style.snepden.de
The SnepDen design system
One stylesheet, served live to every app on the domain. This page is the reference — everything below is real markup you can copy. Resize the window to check the responsive behaviour.
Foundations
Palette
--background
--surface-2
--primary
--glow-a
--glow-b
--glow-c
Type scale
Display — Syne 800
Heading 2
Heading 3
Lead paragraph — Instrument Sans, for intros.
Body copy sits at --fs-md with a 1.65 line height for comfortable reading over long admin tables and consent text alike.
Muted secondary text · mono 012345 · Ctrl+K
Components
Buttons
Stats
Forms
We only ever use this for event mail.
Feedback
Badges & tags
Wizard steps
Table
| Attendee | Nickname | Ticket | Total | Status |
|---|---|---|---|---|
SP Sam P. | Snep | Weekend | € 89.00 | Paid |
JH Joni H. | Frost | Day | € 39.00 | Pending |
NH Niklas H. | — | Supporter | € 149.00 | Paid |
Leaderboard & loading
Highlight effects
Move your cursor across these — the glow follows it.
Cursor spotlight
A radial gradient positioned from --mx/--my, written by one rAF-throttled pointer handler for the whole page.
Gradient border
A masked hairline that sits exactly on the border box — no wrapper element, no layout shift on hover.
.hl-borderAnimated fill
A panning gradient for text and bars. Pauses entirely under prefers-reduced-motion.
Combined
This card carries .hl-border and inherits the spotlight from .card.
Nothing here yet
Empty states get an icon, a heading, one sentence of explanation and exactly one action.