Skip to content

Direction 06 / 06

Warm.

Approachable and calm, like a well-made notebook app. Warm off-white, soft clay, rounded not bubbly.

light-firstBricolage Grotesque · Figtree · JetBrains Monoradius 0.625remupdated 16 Sept 2026

Everything inside this frame is rendered in Warm: its fonts, radius, motion and palette.

Scheme

Example · Tend

For small teams

Notes that turn into plans on their own.

Write the way you think. Tend picks out the tasks, dates and owners, and keeps everyone’s week in one calm place.

Try Tend freeHow it works

Tend

⌘ K New note

readybrand↵

Type

Display Bricolage Grotesque 600, text Figtree, mono JetBrains Mono. SIL OFL 1.1.

text-display-lg

Aa Bb 0123

text-display-sm

Measure twice, ship once

text-2xl

Section heading at reading size

text-md

Body copy runs at sixteen pixels with a comfortable measure and pretty wrapping.

text-sm

Interface text: buttons, navigation, table cells.

label-mono

Label · 11px · tracked

font-mono

const lcp = 1180; // ms

Palette

Semantic tokens in OKLCH, a separate scale per scheme. Contrast gate: 66 checks passed, 0 failed.

tightest: dark --fg on --surface-hover 12.45:1 Lc92

light

bg #fdfaf6

Surfaces

  • bg98.6% 0.006 75
  • bg-subtle96.6% 0.009 70
  • surface99.8% 0.001 75
  • surface-raised100% 0 0
  • surface-hover94.6% 0.012 70

Text

  • fg23% 0.02 50
  • fg-muted47% 0.025 55
  • fg-subtle54% 0.022 60

Lines

  • line-subtle30% 0.03 50 / 0.07
  • line30% 0.03 50 / 0.12
  • line-strong30% 0.03 50 / 0.22
  • line-focus55% 0.15 42

Brand

  • brand55% 0.155 40
  • brand-hover51% 0.15 40
  • brand-subtle95% 0.026 45
  • brand-line80% 0.08 42
  • brand-text50% 0.15 40

Status

  • success49% 0.11 155
  • warning51% 0.105 80
  • danger51% 0.18 22

dark

bg #16120e

Surfaces

  • bg18.5% 0.01 55
  • bg-subtle21% 0.011 55
  • surface22.5% 0.012 55
  • surface-raised26% 0.013 55
  • surface-hover28% 0.014 55

Text

  • fg94.5% 0.01 75
  • fg-muted78.5% 0.018 70
  • fg-subtle64% 0.018 65

Lines

  • line-subtle95% 0.02 70 / 0.07
  • line95% 0.02 70 / 0.11
  • line-strong95% 0.02 70 / 0.2
  • line-focus72% 0.13 45

Brand

  • brand55% 0.155 40
  • brand-hover51% 0.15 40
  • brand-subtle28% 0.05 42
  • brand-line47% 0.1 42
  • brand-text80% 0.11 50

Status

  • success79% 0.12 155
  • warning83% 0.12 85
  • danger79% 0.121 25

Depth, radius, motion

Elevation

shadow-1
shadow-2
shadow-3

Radius · knob 0.625rem

sm
lg
xl
2xl

Motion · hover to play

cubic-bezier(0.23, 1, 0.32, 1)

fast 150ms · base 220ms

slow 320ms · slower 500ms

When to use it

Use for
consumer SaaS, productivity/notes, education, health, community
Avoid for
security/infra, luxury, dense data
Signature
10px radius (cards radius-xl 15px, dialogs 20px); soft warm layered shadows on cards sitting on bg-subtle; brand-subtle callouts with brand-text; sentence case; generous 24px card padding; ease-spring for panels, ease-spring-bouncy only for success moments; grain on heroes.
Don't
neon, pure greys, sharp corners, 3D blobs, heavy drop shadows, Poppins/Nunito.

Install

One import after the base, plus the fonts. Every component keeps working.

packages/tokens/css/directions/warm.css
css
/* src/app/globals.css */
@import "tailwindcss";
@import "@void/tokens/base.css";
@import "@void/tokens/directions/warm.css";
ts
// src/app/layout.tsx
import { Bricolage_Grotesque, Figtree, JetBrains_Mono } from "next/font/google";
const display = Bricolage_Grotesque({ subsets: ["latin"], variable: "--font-bricolage", display: "swap" });
const sans = Figtree({ subsets: ["latin"], variable: "--font-figtree", display: "swap" });
const mono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-jetbrains-mono", display: "swap", preload: false });

All directions · View as Markdown