Foundations

A small vocabulary with room to breathe.

Semantic tokens encode intent, so components can change theme, framework, and context without changing meaning.

Color

Sky carries action and identity. Zinc provides calm structure. Feedback colors never carry meaning alone.

--cf-color-canvas

--cf-color-surface

--cf-color-surface-raised

--cf-color-surface-muted

--cf-color-surface-inverse

--cf-color-text

--cf-color-text-strong

--cf-color-text-muted

--cf-color-text-subtle

--cf-color-border

--cf-color-border-strong

--cf-color-focus

--cf-color-accent

--cf-color-accent-soft

--cf-color-info

--cf-color-success

--cf-color-warning

--cf-color-danger

Token scales

Applications consume named decisions instead of literal lengths, shadows, durations, or arbitrary stacking values.

Spacing

A 4px-rooted rhythm with half steps only where compact controls need them.

--cf-space-0
--cf-space-0-5
--cf-space-1
--cf-space-1-5
--cf-space-2
--cf-space-3
--cf-space-4
--cf-space-5
--cf-space-6
--cf-space-8
--cf-space-10
--cf-space-12
--cf-space-16
--cf-space-20
--cf-space-24

Radii

Controls stay precise; content surfaces become progressively softer.

--cf-radius-xs
--cf-radius-sm
--cf-radius-md
--cf-radius-lg
--cf-radius-xl
--cf-radius-2xl
--cf-radius-full

Shadows

Elevation is reserved for raised content, popovers, and modal context.

--cf-shadow-xs
--cf-shadow-sm
--cf-shadow-md
--cf-shadow-lg

Motion

Durations and easing are semantic, and collapse under reduced-motion preferences.

--cf-duration-fast
--cf-duration-normal
--cf-duration-slow
--cf-ease-standard
--cf-ease-emphasized

Z-index

A deliberately small layer scale prevents local stacking-context inflation.

--cf-z-base
--cf-z-sticky
--cf-z-popover
--cf-z-toast
--cf-z-dialog

Typography

Manrope is geometric without becoming cold. The scale gives long-form content a strong, readable rhythm.

Heading one

Heading two

Heading three

Lead text introduces a page without competing with its title.

Body text stays comfortable across long articles and compact interfaces.

Muted text is reserved for supporting metadata.

Inline code uses a system monospace stack.

Shape and rhythm

Spacing follows a compact 4px-rooted scale. Soft radii group related content without turning every surface into a pill.

Spacing

Use Stack and Inline before one-off margins. Sections create page rhythm; fields own internal rhythm.

Radius

Small for controls, large for content surfaces, full only for tags, avatars, and compact status.

Motion

150–240ms transitions clarify state. Reduced-motion removes movement without hiding feedback.

Themes

Light preserves the original cofob.dev palette. Dark uses purpose-built surfaces and contrast rather than color inversion.

System by default

The saved preference can be light, dark, or system. ThemeScript resolves it before paint and ThemeProvider listens for OS changes.