Neutral ramp

Purple ramp — brand

Orange ramp

Red ramp

Green ramp

Blue ramp

Semantic tokens (theme-aware)

Shadows & radii

Light is the default on :root. Dark mode is driven by a pure-CSS media query — no JavaScript involved. An explicit data-theme attribute (set by the switcher and persisted to localStorage) overrides the media query, since the attribute blocks have equal specificity and come later in the source.

:root {
    color-scheme: light;
    --bg: var(--sd-neutral-40);
    --text: var(--sd-neutral-900);
    /* …light semantic tokens */
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg: var(--sd-neutral-900);
        --text: var(--sd-neutral-100);
        /* …dark semantic tokens */
    }
}

[data-theme="light"] { /* same light tokens — explicit override */ }
[data-theme="dark"]  { /* same dark tokens  — explicit override */ }

Heading 1

Heading 2

Heading 3

Heading 4

Body text with strong, emphasis, deletion and an inline link. Inline code too.

Font utilities

This paragraph is set in Charter, a serif face, via the .font-serif utility class:

Phoebe Sarah Hertha Ayrton (born Phoebe Sarah Marks; 28 April 1854 – 26 August 1923),^[1] known in her adult life as Hertha Ayrton, was an English electrical engineer, mathematician, physicist and inventor, and suffragette. She was awarded the Hughes Medal by the Royal Society for her work on electric arcs and ripple marks in sand and water. Émigré.

And this one is set in IBM Plex Mono via .font-mono:

In 1895, Hertha Ayrton wrote a series of articles for The Electrician, explaining that these phenomena were the result of oxygen coming into contact with the carbon rods used to create the arc. In 1899, she was the first woman ever to read her own paper before the Institution of Electrical Engineers (IEE).^[1] Her paper was titled "The Hissing of the Electric Arc".

A blockquote — left-accented, tinted background, italic.

• Unordered item
• Unordered item

1. Ordered item
2. Ordered item

dt term

dd definition

Another term

Another definition

const theme = localStorage.getItem('theme');

<label class="input-group">
    <span>Rate</span>
    <input type="number" placeholder="0.00">
    <span>($/h)</span>
</label>

Decorated table (with wrapper)

<div class="sd-table-wrap decorated-table-wrap">
    <table>
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>

Bare table (no wrapper)