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

Section

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.

Eyebrow bullet

Wordmark

seyko

studio

Buttons

BookCallCTA (calendar booking)

Primary small Primary medium Primary large Secondary Ghost

ButtonSimple (animated link button)

Light variant Light variant

Dark variant Dark variant

Plus icon

Avatars

AD

JS

Alex Doe

Fallback renders a deterministic OKLCH gradient with initials when src is undefined.

Profile card

Alex Doe, Founder & Designer at seyko

Founder & Designer

at seyko

Alex Doe

Book a call Book a call

Image frame

square

video

portrait

Surfaces & bands

surface

Page background

surface-elevated

Cards, panels

surface-invert

Hero, CTA blocks

Band (tone-driven rhythm wrapper) & DarkBand (dark image + noise)

Band tone="sunken"

DarkBand — full dark treatment with overlay + noise

Badges

Solid variants

neutral accent success warning danger info

Outline variants

neutral accent success warning danger info

Sizes & dot

small medium large Live In development

Tooltips

Hover or focus a trigger. CSS-only, keyboard accessible.

Toasts / Alerts

This is a info message — use for form status, system feedback, or transient state.

This is a success message — use for form status, system feedback, or transient state.

This is a warning message — use for form status, system feedback, or transient state.

This is a danger message — use for form status, system feedback, or transient state.

Dismissible toast — the × removes this node entirely.

Form fields

Name

Email

We'll never share it.

Role

Required field

This field is required.

Message

Markdown supported.

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

Trusted by clients who trust us

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.

seyko

Have a project in mind?

Let's talk.

Tell us your vision —from your MVP to the growth strategy you need.

Quick response.

Whether your idea is fully formed or half-baked, share it with us. The worst that can happen is an honest opinion.

Clear next steps.

We reply within 48 hours with a clear proposal: scope, price, timeline.

Alex Doe, Founder & Designer at seyko

Founder & Designer

at seyko

Alex Doe

Book a call Book a call

hello@seyko.studio

Seyko · Astro theme