Tokens & brand

SEEDED FIXTURE — baked at build time, NOT live. 240 deterministic rows in the shape of ui_test_db.

OKLCH design tokens from @anshinus/design-tokens, consumed as plain CSS custom properties — no Tailwind required for these two files.

Colour tokens — 42 values

OKLCH, read from colorTokens at render time. Contrast is computed with the package's own contrastRatio() against whichever of LIGHT_FG / DARK_FG pairs better — computed, not asserted, because a documented contrast figure nobody recomputes is one that drifts.

background

var(--background)

1.00:1

fail

foreground

var(--foreground)

1.00:1

fail

card

var(--card)

1.00:1

fail

cardForeground

var(--card-foreground)

1.00:1

fail

popover

var(--popover)

1.00:1

fail

popoverForeground

var(--popover-foreground)

1.00:1

fail

primary

var(--primary)

1.00:1

fail

primaryForeground

var(--primary-foreground)

1.00:1

fail

secondary

var(--secondary)

1.00:1

fail

secondaryForeground

var(--secondary-foreground)

1.00:1

fail

muted

var(--muted)

1.00:1

fail

mutedForeground

var(--muted-foreground)

1.00:1

fail

accent

var(--accent)

1.00:1

fail

accentForeground

var(--accent-foreground)

1.00:1

fail

destructive

var(--destructive)

1.00:1

fail

destructiveForeground

var(--destructive-foreground)

1.00:1

fail

destructiveText

var(--destructive-text)

1.00:1

fail

success

var(--success)

1.00:1

fail

successForeground

var(--success-foreground)

1.00:1

fail

warning

var(--warning)

1.00:1

fail

warningForeground

var(--warning-foreground)

1.00:1

fail

info

var(--info)

1.00:1

fail

infoForeground

var(--info-foreground)

1.00:1

fail

border

var(--border)

1.00:1

fail

input

var(--input)

1.00:1

fail

ring

var(--ring)

1.00:1

fail

sidebar

var(--sidebar)

1.00:1

fail

sidebarForeground

var(--sidebar-foreground)

1.00:1

fail

sidebarPrimary

var(--sidebar-primary)

1.00:1

fail

sidebarPrimaryForeground

var(--sidebar-primary-foreground)

1.00:1

fail

sidebarAccent

var(--sidebar-accent)

1.00:1

fail

sidebarAccentForeground

var(--sidebar-accent-foreground)

1.00:1

fail

sidebarBorder

var(--sidebar-border)

1.00:1

fail

sidebarRing

var(--sidebar-ring)

1.00:1

fail

anshinGreen

var(--anshin-green)

1.00:1

fail

anshinGreenLight

var(--anshin-green-light)

1.00:1

fail

anshinBlue

var(--anshin-blue)

1.00:1

fail

anshinGray

var(--anshin-gray)

1.00:1

fail

brandShield

var(--brand-shield)

1.00:1

fail

brandShieldContrast

var(--brand-shield-contrast)

1.00:1

fail

brandWordmark

var(--brand-wordmark)

1.00:1

fail

brandProduct

var(--brand-product)

1.00:1

fail

Chart palette — 8 values

Categorical series colours plus semantic success / warning / danger, consumed by @anshinus/charts. Never pick a chart colour by hand.

chart1

var(--chart-1)

1.00:1

fail

chart2

var(--chart-2)

1.00:1

fail

chart3

var(--chart-3)

1.00:1

fail

chart4

var(--chart-4)

1.00:1

fail

chart5

var(--chart-5)

1.00:1

fail

chartSuccess

var(--chart-success)

1.00:1

fail

chartWarning

var(--chart-warning)

1.00:1

fail

chartDanger

var(--chart-danger)

1.00:1

fail

Spacing

The only spacing values a page should use.

contentPadding	var(--content-padding)
contentGap	var(--content-gap)
cardPadding	var(--card-padding)
sectionGap	var(--section-gap)
elementGap	var(--element-gap)

Radius

Corner rounding. Consistent radii are most of what makes a UI look deliberate.

default	var(--radius)
sm	var(--radius-sm)
md	var(--radius-md)
lg	var(--radius-lg)
xl	var(--radius-xl)

Typography

Families, sizes and weights.

fontSans	var(--font-sans)
fontMono	var(--font-mono)
headerTitleFontSize	var(--header-title-font-size)
headerTitleFontWeight	var(--header-title-font-weight)
headerSubtitleFontSize	var(--header-subtitle-font-size)

Sizing

Header height, icon sizes, logo dimensions.

headerHeight	var(--header-height)
headerIconSize	var(--header-icon-size)
iconSizeXs	var(--icon-size-xs)
iconSizeSm	var(--icon-size-sm)
iconSizeMd	var(--icon-size-md)
iconSizeLg	var(--icon-size-lg)
iconSizeXl	var(--icon-size-xl)
iconStrokeWidth	var(--icon-stroke-width)
logoHeaderWidth	var(--logo-header-width)
logoHeaderHeight	var(--logo-header-height)
logoLoginSize	var(--logo-login-size)
logoSidebarSize	var(--logo-sidebar-size)
sidebarWidth	var(--sidebar-width)
sidebarWidthMobile	var(--sidebar-width-mobile)
sidebarWidthCollapsed	var(--sidebar-width-collapsed)

Forms

Field and section rhythm inside a form.

formSectionGap	var(--form-section-gap)
formFieldGap	var(--form-field-gap)
formTabHeight	var(--form-tab-height)
formAvatarSize	var(--form-avatar-size)

Page gutters — the frame around all of this

From @anshinus/design-tokens/css/global.css, added 5.3.1 because AnshinAppShell's <main> had no horizontal padding at all and every product invented its own.

--anshin-page-gutter-x

clamp(1rem, 2.5vw, 3rem)

Side gutters. Scale with the viewport rather than stepping at breakpoints.

--anshin-page-gutter-bottom

2.5rem

Larger than the sides — content flush to the bottom reads as truncated.

--anshin-page-gutter-top

1.5rem

Smaller; the header already separates.

--anshin-page-section-gap

1.5rem

Rhythm between stacked sections.

Live value on this page: (reading…) — if this stays empty, global.css was not imported.