Reference
Style Guide
Every token, surface, and primitive component shipped with the theme.
Swatches read live CSS variables, so this page always reflects your
palette. Seyko is a single-mode (light) theme by design — see
docs/06-theming.md for the recipe to add a dark mode.
Color tokens
Semantic
surface
var(--surface)
surface-elevated
var(--surface-elevated)
surface-sunken
var(--surface-sunken)
surface-invert
var(--surface-invert)
text
var(--text)
text-muted
var(--text-muted)
text-subtle
var(--text-subtle)
text-invert
var(--text-invert)
border
var(--border)
border-strong
var(--border-strong)
accent
var(--accent)
accent-hover
var(--accent-hover)
accent-foreground
var(--accent-foreground)
overlay
var(--overlay)
Status — base (marker/border/dot) + -text (readable shade)
success
var(--success)
success-text
var(--success-text)
warning
var(--warning)
warning-text
var(--warning-text)
danger
var(--danger)
danger-text
var(--danger-text)
info
var(--info)
info-text
var(--info-text)
Neutral palette
0
50
100
200
300
400
500
600
700
800
900
950
Accent palette (configurable via --c-accent-hue)
50
100
200
300
400
500
600
700
800
900
Typography
fs-xs The quick brown fox jumps over the lazy dog
fs-sm The quick brown fox jumps over the lazy dog
fs-base The quick brown fox jumps over the lazy dog
fs-lg The quick brown fox jumps over the lazy dog
fs-xl The quick brown fox jumps over the lazy dog
fs-2xl The quick brown fox jumps over the lazy dog
fs-3xl The quick brown fox jumps over the lazy dog
fs-4xl The quick brown fox jumps over the lazy dog
fs-5xl The quick brown fox jumps over the lazy dog
Radius
r-sm r-md r-lg r-xl r-2xl r-3xl r-full Shadows
sh-sm sh-md sh-lg sh-xl Spacing scale
s-px s-1 s-2 s-3 s-4 s-6 s-8 s-12 s-16 s-20 s-24 s-32 Section header & eyebrow
The lede line above the title
A composed section heading with a muted suffix.
SectionHeader owns the eyebrow + title + description layout used across every marketing section. SectionsBullet is the eyebrow primitive it renders.
Wordmark
Buttons
BookCallCTA (calendar booking)
ButtonSimple (animated link button)
Plus icon
Avatars
Fallback renders a deterministic OKLCH gradient with initials when
src is undefined.
Profile card
Founder & Designer
at seyko
Alex Doe
Image frame
Surfaces & bands
surface
Page background
surface-elevated
Cards, panels
surface-invert
Hero, CTA blocks
Band (tone-driven rhythm wrapper) & DarkBand (dark image + noise)
Badges
Solid variants
Outline variants
Sizes & dot
Tooltips
Hover or focus a trigger. CSS-only, keyboard accessible.
Toasts / Alerts
Form fields
We'll never share it.
This field is required.
Markdown supported.
Newsletter
Inline layout
Default. Input and button on one row at ≥sm.
Stacked layout
Full-width button — better for hero CTAs and mobile.
Star rating
5-star inline glyph for testimonial review snippets. Color is
token-overridable via the fill prop.
default accent fill larger Trusted by
Breadcrumb
Visual-only. The matching BreadcrumbList JSON-LD is composed
via @/lib/schema at the page level.
Pagination
Also included
These components depend on runtime context (env flags, calendar URL,
video sources) so they render in their real pages rather than here:
BookCallCTA is shown above; ArticleCTA (blog sidebar
CTA), BuyCTA (demo purchase pill, env-gated),
ShowreelCard (lazy YouTube dialog), and Blur
(fixed footer gradient) appear on the home and article pages.