@fogtype/css

A minimal, classless CSS framework that conveys structure through typography and spacing alone.

Color Palette

Primary--color-primary
Primary Dark--color-primary-dark
Primary Light--color-primary-light
Danger--color-danger
Warning--color-warning
Success--color-success
Text--color-text
Text Secondary--color-text-secondary
Text Disabled--color-text-disabled
Border--color-border
Surface--color-surface
Background--color-background

Typography

Heading 1 - 32px

Heading 2 - 24px

Heading 3 / Body - 20px

Body text is based on 20px with a line height of 1.6. When mixing 日本語 and English, text-autospace: normal automatically inserts a 1/4 em space between CJK and Latin characters. Even in a sentence like "use Claude Opus 4.8 in 2026年", the spacing around punctuation is adjusted by text-spacing-trim.

Use bold (em) for emphasis and strong for stronger meaning. Links appear like this in an underline color. Keys are shown as Ctrl+K, notes are attached like this with small. Highlights are expressed with mark.

Lists

Unordered list

Calm, clean, readability first
Flat design
- Nested items keep the rhythm too
- Indent is --space-inline-large (40px)
Layout for print media and long-form reading

Ordered list

Pin the root font-size to a minimum of 20px
Align margins to the rlh (32px) rhythm

Definition list

rlh: root line-height = 1.6 × 20px = 32px. The base unit for all block-axis margins.
ic: The advance width of one full-width character

Code

Inline code blends into the body as in --space-block-small. Blocks scroll horizontally:

:root {
  --color-primary: oklch(54% 0.247 293);      /* swap the brand color */
  --color-primary-dark: oklch(40% 0.247 293); /* on hover */
  --radius: 0;                                /* sharpen the corners */
  --line-length: 50;                          /* widen the body to 50ric */
}

Table

Tables are flat, with no shadows or rounded corners. Cell backgrounds use --color-surface, and row dividers use 1px solid var(--color-border).

Type Scale
Role	Token	Size	Line Height
Heading 1	`--text-huge`	32px	1.2
Heading 2	`--text-large`	24px	1.2
Heading 3 / Body	`--text-default`	20px	1.6
Caption / Small	`--text-small`	15px	1.6

Semantic Colors

Error: The value you entered is not valid. Uses --color-danger.

Warning: This action cannot be undone. Uses --color-warning.

Done: Your changes have been saved. Uses --color-success.

Buttons

Corners have a subtle radius (border-radius: var(--radius)). The height meets the minimum touch-target size.