Style Guide

A style reference page for testing typography, forms, layout, states, and dark mode with the current theme tokens.

Typography

Heading Level 3

Heading Level 4

This is a paragraph with an internal link and an external link.

Strong, emphasis, inline code, mark.

Design systems are not static files; they are living contracts between code and decisions.

Color Palettes

Primary

--primary-lightest

--primary-lighter

--primary-light

--primary

--primary-dark

--primary-darker

--primary-darkest

Secondary

--secondary-lightest

--secondary-lighter

--secondary-light

--secondary

--secondary-dark

--secondary-darker

--secondary-darkest

Other

--yellow

--red

Neutral + Base

--white

--gray-50

--gray-100

--gray-200

--gray-300

--gray-400

--gray-500

--gray-600

--gray-700

--gray-800

--gray-900

--gray-950

--black

Lists

Unordered

First unordered item
Second unordered item
Third unordered item

Ordered

First ordered item
Second ordered item
Third ordered item

Buttons

Contact Form

Table

Token	Value	Usage
`--primary`	Brand green	Buttons, highlights
`--gray-100`	Light neutral	Text on dark backgrounds
`--fs-base`	Base fluid size	Paragraph text

Code Block

style-guide-example.ts

type Theme = 'light' | 'dark';

const currentTheme = (document.documentElement.dataset.theme as Theme) || 'light';
const accent = currentTheme === 'dark' ? 'var(--secondary)' : 'var(--primary)';

console.log({ currentTheme, accent });

Callouts

Note: This is a small callout, matching the blog callout block component.

Tip: Use this page to validate spacing, typography, and color token consistency across light/dark modes.