Load Order

Load app.css after tachyons.css.

<link rel="stylesheet" href="/tachyons.css">
<link rel="stylesheet" href="/app.css">

It sits in @layer app, above core utilities and below debug helpers.

Themes

By default, the root follows prefers-color-scheme. Force a theme on html or any subtree with data-theme.

<main data-theme="dark" class="bg-surface-base text-1">
  ...
</main>

Semantic Utilities

Accent

Tokens	Utilities
--accent, --on-accent	accent, bg-accent, b--accent, on-accent, hover-accent, hover-bg-accent, hover-b--accent

Text

Tokens	Utilities
--text-1, --text-2, --text-3, --text-inverted	text-*, bg-text-*, b--text-*, hover-text-*, hover-bg-text-*, hover-b--text-*

Surface

Tokens	Utilities
--surface-base, --surface-1, --surface-2, --surface-3, --surface-4	surface-*, bg-surface-*, b--surface-*, hover-surface-*, hover-bg-surface-*, hover-b--surface-*

Border

Tokens	Utilities
--border-1, --border-2, --border-3	border-*, bg-border-*, b--border-*, hover-border-*, hover-bg-border-*, hover-b--border-*

State

Tokens	Utilities
--danger, --success, --warning, --info, --on-danger, --on-success, --on-warning, --on-info	danger, success, warning, info, bg-*, b--*, on-*, hover-*, hover-bg-*, hover-b--*

Focus and motion

Tokens	Utilities
--focus, --focus-offset, --focus-ring	focus-ring, focus-ring-box, hover-border, fade-y

Every semantic color token has foreground (token), background (bg-token), border (b--token), hover foreground (hover-token), hover background (hover-bg-token), and hover border (hover-b--token) forms. Accent and state colors also include on-* contrast helpers.

Theme Seeds

Seed	Light default	Dark default
--accent-*	light-blue	light-blue
--surface-base-*	white	oklch(0.08 0 0)
--ink-*	black	white
--danger-*	dark-red	light-red
--success-*	green	light-green
--warning-*	orange	yellow
--info-*	light-blue	light-blue

Accent Overrides

Set one accent and the derived helpers follow.

:root {
  --accent: oklch(0.62 0.22 255);
}

Or split the seed by theme.

:root {
  --accent-light: oklch(0.58 0.23 255);
  --accent-dark: oklch(0.72 0.18 255);
}

Example

<section class="bg-surface-base text-1 ba b--border-1 pa3">
  <button class="button-reset bg-accent on-accent focus-ring ph3 pv2">
    Save
  </button>
</section>