Token Explorer

Visual reference for all Fikir CSS design tokens

← Playground
Compare themes:

Light

--color-bg-default
--color-bg-surface
--color-fg-default
--color-fg-muted
--color-accent
--color-danger
--color-success
--color-warning
--color-border-subtle

Dark

--color-bg-default
--color-bg-surface
--color-fg-default
--color-fg-muted
--color-accent
--color-danger
--color-success
--color-warning
--color-border-subtle

Color — Semantic (adapts to theme)

--color-bg-default
Page background
--color-bg-surface
Card/panel background
--color-fg-default
Primary text
--color-fg-muted
Secondary/muted text
--color-border-subtle
Subtle borders
--color-accent
Primary accent
--color-danger
Danger/error

Color — Primitive (static)

--color-primary-500
oklch(62% 0.18 262)
--color-primary-600
oklch(56% 0.18 262)
--color-danger-500
oklch(62% 0.2 24)
--color-gray-50
oklch(98% 0.004 260)
--color-gray-100
oklch(95% 0.006 260)
--color-gray-300
oklch(86% 0.01 260)
--color-gray-700
oklch(38% 0.01 260)
--color-gray-900
oklch(22% 0.01 260)

Spacing

--space-0 · 0
--space-1 · 0.25rem (4px)
--space-2 · 0.5rem (8px)
--space-3 · 0.75rem (12px)
--space-4 · 1rem (16px)
--space-6 · 1.5rem (24px)

Border Radius

--radius-sm · 0.375rem
--radius-md · 0.625rem
--radius-lg · 0.875rem
999px (pill)

Shadow

--shadow-sm
--shadow-md

Font Size

--font-size-xs The quick brown fox — 0.75rem
--font-size-sm The quick brown fox — 0.875rem
--font-size-md The quick brown fox — 1rem
--font-size-lg The quick brown fox — 1.125rem

Container

--container-md · 64rem (1024px) — max-width for the .container layout class