Copy the css/, fonts/ and (optionally) js/ folders, then link them:

Starter template

What's inside

The same button, three ways

Tones on different components

Every color is declared once with light-dark(), so a component never needs a dark-mode override. The active scheme is driven by the CSS color-scheme property:

A dark island in a light page

Theme switcher

With fernand.js, any element with data-theme-set switches the theme and remembers it in localStorage. aria-pressed is kept in sync for you.

Or from JavaScript: Fernand.setTheme('dark'). While switching, transitions are disabled for one frame (data-theme-switching) so the whole UI swaps at once instead of fading for 750 ms.

Images per theme

Shown with .only-light / .only-dark

Your own colors

Use light-dark() for any custom color and it will follow the theme automatically:

Overriding

Palette — same names as the app

These keep the app's historical names (--white is the background, so it is dark in dark mode). Prefer the semantic tokens below in new code.

Semantic colors

Tones

Each tone has a solid color, a hover color, a text color (readable on the pale background) and a pale background.

Variable names follow the pattern --color-{tone}, -hover, -text, -pale. Inside a component, a tone class exposes them as --tone, --tone-hover, --tone-text, --tone-pale, --tone-contrast — handy for your own components:

Typography

Spacing, shapes & controls

Elevation

Motion

Fernand's signature is a long, exponential ease-out: things move fast then settle softly. --ease: cubic-bezier(.19, 1, .22, 1) with --duration (.75s), --duration-fast (.5s) and --duration-instant (.2s, for dialogs and popovers). Motion is disabled when the user asks for prefers-reduced-motion.

1. Every keyboard action has a visible equivalent.

   Replying with R means there's also a Reply button. Show the shortcut in the button with a <kbd> so people learn it.

2. A dialog can always be dismissed four ways.

   Esc, a click on the backdrop (closedby="any"), a close button, and a Cancel button.

3. Happy assumptions.

   Validate on the client, then show the result immediately — don't wait for the server. Adding a tag shows the tag right away.

4. Settings sections look the same.

   Same title structure, same "add an entry" pattern, same way to validate changes — across every settings page.

5. Quiet by default.

   Grey text, thin borders, one blue primary action per screen. Color is reserved for state: success, warning, danger.

The h2 is the most recognisable Fernand element: it introduces every group of settings. Use <hgroup> for a title with a description:

Inline text

Lists & quotes

Cells with .actions only appear on row hover (on devices that can hover). .numeric right-aligns with tabular figures.

Boxed & tinted

Wrap a wide table in a <figure> to make it scroll horizontally on small screens. Use .compact for denser rows.

Two ways to label

Help text

A <small> right after a field becomes its description.

Types

Select & textarea

States & sizes

Other inputs

A <small> right after an invalid field turns red automatically:

Native validation

The browser's :user-invalid is styled too: it only kicks in once the user has interacted with the field. Type something, then leave the field.

Shake

Add .shake to any element to signal a wrong value — the app does it on a wrong 2FA code.

Switch

A checkbox with role="switch" — the toggle used everywhere in the settings.

Choice cards

A <label class="card"> with a radio inside becomes a selectable card. The selected ring comes from :has(input:checked) — no JavaScript.

Default elements

type="reset" is a secondary action by nature, so it's outlined by default.

Variants

Tones

Sizes

Icons & shortcuts

States

aria-busy="true" shows a spinner and blocks clicks. aria-pressed turns a .neutral or .ghost button into a toggle.

Button groups

With a title, a link and a close button

Confirm

.alert.confirm asks for a decision in place, with actions in a <footer>. Combine it with a tone.

Notice the buttons: they inherit the tone of the alert, so the "Delete rule" button is red without any extra class.

Banner

.alert.banner spans the full width and sticks to the top of its scroll container.

Clickable cards

A link or a button with .card lifts on hover. aria-current (or .selected) adds the blue focus ring, .new is the dashed "add" placeholder.

Raised, disabled & empty

Tags

Set any color with --dot-color, or use a tone on the tag.

Interactive

Badges

Dots & counters

ARIA tabs

Switching panels needs fernand.js (it also handles ← → Home End).

Segmented

Underline

Navigation tabs

For links between pages, use a <nav class="tabs"> and mark the current page with aria-current="page".

Vertical

• command="show-modal" + commandfor="id" on a button opens it.
• closedby="any" closes it on Esc and on a backdrop click.
• <form method="dialog"> closes it on submit — dialog.returnValue is the clicked button's value.

Structure it with <header>, <section> (the scrollable body) and <footer>. Older browsers get the same behaviour from fernand.js.

Form dialog

Confirmation

dialog.confirm centers an icon and a question. The tone colors the icon and the buttons.

Sizes & side panel

Sizes: .small (420px), default (550px), .medium (640px), .large (820px), .fullscreen, .sidepanel. Or set --dialog-width yourself.

From JavaScript

Inside a popover, a <menu> (or <ul>) becomes a list of actions. .danger items turn red, <kbd> is pushed to the right, aria-checked="true" shows a check mark. Any other content gets a comfortable padding.

Fernand.toast(message, { tone, title, timeout }) creates the region on first use. timeout: 0 keeps it until dismissed.

Markup

Put toasts inside a <div class="toasts" aria-live="polite"> to stack them in the corner. Add .timed for the countdown bar (--toast-duration).

Use <img class="avatar" src="…" alt="…"> for pictures. Size with .small, .large or --avatar-size; color with a tone or --avatar-bg/--avatar-color.

Skeleton

The "wireframe" the app shows while a list loads. Prefer it to spinners for content.

Busy

Breadcrumb

Steps

Divider

Settings layout

A 250px navigation on the left, a centered 800px column on the right. This very page uses it. On screens under 900px, the navigation moves on top.

Use <main class="wide"> for dashboards that need 1200px.

Centered layout

For login, sign-up and onboarding: a grey page with a 350px column (.wide for 640px). See the login example.