Style Guide

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

Theme and Font Settings

Use these controls to test the real theme and font-size behavior used across the site.

Theme

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.