Internal

Brand & design

Token-backed styles used across the SolidStart app. Semantic colors use HSL variables in src/app.css; primitives in src/styles/tokens.css.

Semantic colors

background

--background

foreground

--foreground

card

--card

primary

--primary

secondary

--secondary

muted

--muted

accent

--accent

destructive

--destructive

border

--border

Gold body text on background: use for display only; prefer text-foreground for long copy. Ring/focus uses ring-ring.

Gradients & shadows

bg-gradient-gold

text-gradient-gold

shadow-card

shadow-glow

Typography

Display — text-display

Display small — text-display-sm

Heading — font-serif text-4xl

Body lg — Inter, muted foreground for supporting text.

Body base — default paragraph on canvas.

Caption — text-sm muted

Spacing tokens

section-smvar(--section-y-sm)

sectionvar(--section-y-lg)

gutter-endvar(--gutter-end)

Sections use py-section / py-section-sm. Home content grid uses pe-gutter-end for the fixed logo.

Radius

Buttons

Layout demos

Section + ContentMax (container + horizontal padding).

ProseContainer + cc-prose for legal-style longform (max-width max-w-prose / 65ch).

aspect-card (16/9), hero uses aspect-hero