---
title: "Warm direction"
description: "Warm: Approachable and calm, like a well-made notebook app. Warm off-white, soft clay, rounded not bubbly."
canonical: https://void-design.vercel.app/directions/warm
lastModified: 2026-09-16
---

# Warm

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

direction 06/06 · light-first · Bricolage Grotesque · Figtree · JetBrains Mono · radius 0.625rem

Everything below the page header is rendered in Warm: its fonts, radius, motion and palette, with a switch between its light and dark schemes.

## Type

Display Bricolage Grotesque 600, text Figtree, mono JetBrains Mono (SIL OFL 1.1). The scale is closed: text-display-lg, text-display-sm, text-2xl, text-md, text-sm, label-mono, font-mono.

## 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.

| Token | Light | Dark |
| --- | --- | --- |
| --bg | oklch(98.6% 0.006 75) | oklch(18.5% 0.01 55) |
| --bg-subtle | oklch(96.6% 0.009 70) | oklch(21% 0.011 55) |
| --surface | oklch(99.8% 0.001 75) | oklch(22.5% 0.012 55) |
| --surface-raised | oklch(100% 0 0) | oklch(26% 0.013 55) |
| --surface-hover | oklch(94.6% 0.012 70) | oklch(28% 0.014 55) |
| --surface-active | oklch(92.2% 0.015 65) | oklch(31% 0.015 55) |
| --line | oklch(30% 0.03 50 / 0.12) | oklch(95% 0.02 70 / 0.11) |
| --line-subtle | oklch(30% 0.03 50 / 0.07) | oklch(95% 0.02 70 / 0.07) |
| --line-strong | oklch(30% 0.03 50 / 0.22) | oklch(95% 0.02 70 / 0.2) |
| --line-focus | oklch(55% 0.15 42) | oklch(72% 0.13 45) |
| --fg | oklch(23% 0.02 50) | oklch(94.5% 0.01 75) |
| --fg-muted | oklch(47% 0.025 55) | oklch(78.5% 0.018 70) |
| --fg-subtle | oklch(54% 0.022 60) | oklch(64% 0.018 65) |
| --fg-faint | oklch(63.5% 0.022 60) | oklch(51.5% 0.018 65) |
| --fg-on-brand | oklch(100% 0 0) | oklch(100% 0 0) |
| --brand | oklch(55% 0.155 40) | oklch(55% 0.155 40) |
| --brand-hover | oklch(51% 0.15 40) | oklch(51% 0.15 40) |
| --brand-subtle | oklch(95% 0.026 45) | oklch(28% 0.05 42) |
| --brand-line | oklch(80% 0.08 42) | oklch(47% 0.1 42) |
| --brand-text | oklch(50% 0.15 40) | oklch(80% 0.11 50) |
| --success | oklch(49% 0.11 155) | oklch(79% 0.12 155) |
| --success-subtle | oklch(95.5% 0.035 155) | oklch(26% 0.045 155) |
| --warning | oklch(51% 0.105 80) | oklch(83% 0.12 85) |
| --warning-subtle | oklch(96% 0.05 90) | oklch(27% 0.045 80) |
| --danger | oklch(51% 0.18 22) | oklch(79% 0.121 25) |
| --danger-subtle | oklch(95.5% 0.022 22) | oklch(27% 0.06 25) |
| --grain-opacity | 0.03 | 0.05 |

## Depth, radius, motion

Elevation shadow-1, shadow-2, shadow-3. Radius knob 0.625rem: rounded-sm, rounded-lg, rounded-xl, rounded-2xl. Motion 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:** security/infra, luxury, dense data
- **Token file:** `packages/tokens/css/directions/warm.css`

## 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

```css
@import "tailwindcss";
@import "@void/tokens/base.css";
@import "@void/tokens/directions/warm.css";
```

```ts
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 });
```