Foundations / tokens

Semantic roles before product paint.

OKLCH CSS variables are generated from package-owned metadata. The gallery shows representative roles and their intent, not a duplicate token source.

108 generated tokens · @sanchika/tokens/theme.css

Generated groups and visual proof

Color and surfaces · 36 roles

Cool-mineral planes, ledger ink, action roles, and semantic status triads.

color.canvas--sk-color-canvas

Cool mineral page canvas.

oklch(97% 0.008 220)

color.surface--sk-color-surface

Quiet content surface above the canvas.

oklch(99.2% 0.003 220)

color.surface-raised--sk-color-surface-raised

Highest light surface in the canonical theme.

oklch(100% 0 0)

color.surface-inset--sk-color-surface-inset

Cool inset plane for dense operational context.

oklch(95% 0.012 225)

color.surface-muted--sk-color-surface-muted

Muted neutral surface.

oklch(95% 0.012 225)

color.ink-primary--sk-color-ink-primary

Near-black ledger ink.

oklch(19% 0.028 245)

color.ink-secondary--sk-color-ink-secondary

Secondary ledger ink.

oklch(43% 0.024 245)

color.ink-muted--sk-color-ink-muted

Muted text role with AA contrast on canonical light planes.

oklch(43% 0.024 245)

color.ink-inverse--sk-color-ink-inverse

High-contrast text on the dark brand plane.

oklch(100% 0 0)

color.border-subtle--sk-color-border-subtle

Quiet record divider.

oklch(82% 0.018 245)

color.border-default--sk-color-border-default

Default non-text control boundary.

oklch(64% 0.018 255)

color.border-strong--sk-color-border-strong

Strong structural boundary.

oklch(57% 0.03 245)

color.brand-primary--sk-color-brand-primary

Deep navy-teal authority plane.

oklch(16% 0.028 235)

color.brand-secondary--sk-color-brand-secondary

Evidence mint supporting the navy-teal anchor.

oklch(73% 0.09 162)

color.accent-seal--sk-color-accent-seal

Oxidized-brass seal accent.

oklch(76% 0.14 82)

color.link--sk-color-link

Copper link ink adjusted from reference composition to pass AA on canvas.

oklch(55.8% 0.12 47)

color.link-hover--sk-color-link-hover

High-contrast link hover ink.

oklch(16% 0.028 235)

color.focus--sk-color-focus

Visible focus indicator color.

oklch(55.8% 0.12 47)

color.selection-bg--sk-color-selection-bg

Text-selection background.

oklch(76% 0.14 82)

color.selection-text--sk-color-selection-text

Text-selection foreground.

oklch(16% 0.028 235)

color.overlay--sk-color-overlay

Dark neutral overlay derived from the reference composition authority plane.

oklch(16% 0.028 235 / 72%)

color.success-bg--sk-color-success-bg

Success status background.

oklch(94% 0.03 162)

color.success-fg--sk-color-success-fg

Success status foreground.

oklch(45% 0.075 148)

color.success-border--sk-color-success-border

Success status border.

oklch(73% 0.09 162)

color.warning-bg--sk-color-warning-bg

Warning status background.

oklch(91% 0.045 55)

color.warning-fg--sk-color-warning-fg

Warning foreground with AA contrast.

oklch(43% 0.024 245)

color.warning-border--sk-color-warning-border

Warning status border.

oklch(55.8% 0.12 47)

color.danger-bg--sk-color-danger-bg

Danger status background.

oklch(99.2% 0.003 220)

color.danger-fg--sk-color-danger-fg

Danger status foreground.

oklch(48% 0.12 32)

color.danger-border--sk-color-danger-border

Danger status border.

oklch(48% 0.12 32)

color.info-bg--sk-color-info-bg

Information status background.

oklch(95% 0.012 225)

color.info-fg--sk-color-info-fg

Information status foreground.

oklch(48% 0.06 240)

color.info-border--sk-color-info-border

Information status border.

oklch(48% 0.06 240)

color.neutral-bg--sk-color-neutral-bg

Neutral status background.

oklch(95% 0.012 225)

color.neutral-fg--sk-color-neutral-fg

Neutral status foreground.

oklch(19% 0.028 245)

color.neutral-border--sk-color-neutral-border

Neutral status border.

oklch(64% 0.018 255)

Typography · 23 roles

Runtime-safe display, body, mono, scale, weight, rhythm, and tracking roles.

font.display--sk-font-display

Display stack proven by reference composition without a runtime font request.

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

font.body--sk-font-body

Body and UI sans stack.

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

font.mono--sk-font-mono

Runtime-safe mono stack.

"SFMono-Regular", Consolas, "Liberation Mono", monospace

font-size.xs--sk-font-size-xs

Compact caption size repeated across reference composition artifacts.

0.72rem

font-size.sm--sk-font-size-sm

Small supporting text size.

0.875rem

font-size.md--sk-font-size-md

Default compact UI size.

0.9375rem

font-size.lg--sk-font-size-lg

Default body size for the reference compositions.

1rem

font-size.xl--sk-font-size-xl

Small heading size repeated in reference composition.

1.25rem

font-size.2xl--sk-font-size-2xl

Operational section-heading size.

1.55rem

font-size.3xl--sk-font-size-3xl

Responsive section-display role.

clamp(1.55rem, 2.8vw, 2.65rem)

font-size.4xl--sk-font-size-4xl

Responsive compact hero role.

clamp(2.3rem, 5.2vw, 5rem)

font-size.5xl--sk-font-size-5xl

Largest reference composition-proven public hero role.

clamp(3.15rem, 7.1vw, 6rem)

font-weight.regular--sk-font-weight-regular

Regular text weight.

400

font-weight.medium--sk-font-weight-medium

Medium emphasis weight.

500

font-weight.semibold--sk-font-weight-semibold

Strong UI emphasis weight.

650

font-weight.bold--sk-font-weight-bold

Bold compact emphasis.

700

line-height.ui--sk-line-height-ui

Compact UI line height.

1.2

line-height.body--sk-line-height-body

Readable body line height.

1.5

line-height.display--sk-line-height-display

Tight but legible display rhythm.

0.95

line-height.caption--sk-line-height-caption

Compact caption rhythm.

1.25

letter-spacing.tight--sk-letter-spacing-tight

reference composition display tracking floor.

-0.04em

letter-spacing.normal--sk-letter-spacing-normal

Normal UI tracking.

letter-spacing.caps--sk-letter-spacing-caps

Compact uppercase label tracking.

0.06em

Layout and rhythm · 24 roles

Evidence-backed spacing, containers, page rhythm, controls, and table density.

space.1--sk-space-1

Base spacing step 1.

0.25rem

space.2--sk-space-2

Base spacing step 2.

0.5rem

space.3--sk-space-3

Base spacing step 3.

0.75rem

space.4--sk-space-4

Base spacing step 4.

1rem

space.6--sk-space-6

Base spacing step 6.

1.5rem

space.8--sk-space-8

Base spacing step 8.

2rem

space.12--sk-space-12

Base spacing step 12.

3rem

space.16--sk-space-16

Base spacing step 16.

4rem

container.reading--sk-container-reading

Readable long-form measure.

50rem

container.content--sk-container-content

Primary content measure.

69rem

container.wide--sk-container-wide

Wide proof and gallery shell.

86rem

container.full--sk-container-full

Full available inline measure.

100%

section-padding.sm--sk-section-padding-sm

Small section padding.

2rem

section-padding.md--sk-section-padding-md

Responsive medium section padding.

clamp(2.75rem, 6vw, 5.5rem)

section-padding.lg--sk-section-padding-lg

Responsive large section padding.

clamp(3.25rem, 8vw, 7.5rem)

content-gap.sm--sk-content-gap-sm

Small content gap.

0.75rem

content-gap.md--sk-content-gap-md

Medium content gap.

1.5rem

content-gap.lg--sk-content-gap-lg

Large content gap.

2rem

page-gutter--sk-page-gutter

Responsive page gutter proven across every reference composition route.

clamp(0.75rem, 3vw, 2.5rem)

control-height.sm--sk-control-height-sm

Small control height.

2rem

control-height.md--sk-control-height-md

Default control height.

2.5rem

control-height.lg--sk-control-height-lg

Large control height.

2.875rem

table-row.compact--sk-table-row-compact

Compact table row floor.

2.5rem

table-row.comfortable--sk-table-row-comfortable

Comfortable table row floor.

2.875rem

Borders, radius, elevation, and focus · 12 roles

Border-led hierarchy with restrained radii, quiet elevation, and focus geometry.

border-width.hairline--sk-border-width-hairline

Hairline structural border.

1px

border-width.default--sk-border-width-default

Default border width.

1px

border-width.strong--sk-border-width-strong

Strong state and evidence border.

0.16rem

radius.sm--sk-radius-sm

Small control radius.

0.5rem

radius.md--sk-radius-md

Medium grouped-surface radius preserving v0.0.2 geometry.

0.625rem

radius.lg--sk-radius-lg

Large proof-shell radius.

1.1rem

shadow.card--sk-shadow-card

Quiet card elevation retained from v0.0.2.

0 1px 2px color-mix(in oklch, var(--sk-color-ink-muted) 14%, transparent)

shadow.raised--sk-shadow-raised

Reserved raised-surface elevation using the proven quiet card value.

0 1px 2px color-mix(in oklch, var(--sk-color-ink-muted) 14%, transparent)

shadow.popover--sk-shadow-popover

Conservative popover elevation until package proves a stronger need.

0 1px 2px color-mix(in oklch, var(--sk-color-ink-muted) 14%, transparent)

shadow.focus--sk-shadow-focus

Focus shadow counterpart for consumers that cannot use outline.

0 0 0 var(--sk-focus-outline-width) var(--sk-color-focus)

focus.outline-width--sk-focus-outline-width

Visible focus outline width.

2px

focus.outline-offset--sk-focus-outline-offset

Visible focus outline offset.

2px

Motion · 10 roles

Short, CSS-first durations, easing curves, and travel distances for state feedback.

motion.duration-instant--sk-motion-duration-instant

Near-immediate state feedback.

80ms

motion.duration-fast--sk-motion-duration-fast

Fast reference composition focus and disclosure timing.

140ms

motion.duration-standard--sk-motion-duration-standard

Default state transition duration.

180ms

motion.duration-slow--sk-motion-duration-slow

Slow end of the approved non-decorative envelope.

240ms

motion.ease-standard--sk-motion-easing-standard

Default state easing.

ease-out

motion.ease-enter--sk-motion-easing-enter

Restrained enter easing from reference composition.

cubic-bezier(0.2, 0.8, 0.2, 1)

motion.ease-exit--sk-motion-easing-exit

Matched exit easing for continuity.

cubic-bezier(0.2, 0.8, 0.2, 1)

motion.ease-emphasized--sk-motion-easing-emphasized

Emphasized reference composition easing without bounce.

cubic-bezier(0.2, 0.8, 0.2, 1)

motion.distance-xs--sk-motion-distance-xs

Smallest motion travel.

0.25rem

motion.distance-md--sk-motion-distance-md

Maximum standard motion travel.

1rem

One-release compatibility · 3 roles

Deprecated v0.0.2 values retained only where no equivalent semantic alias preserves behavior.

compat.duration-loading--sk-motion-duration-loading

Deprecated v0.0.2 loading-loop duration.

720ms

compat.easing-linear--sk-motion-easing-linear

Deprecated v0.0.2 loading-loop easing.

linear

compat.badge-min--sk-size-badge-min

Deprecated v0.0.2 badge minimum size.

1.5rem

Usage, contrast, and compatibility

Use

Import the theme CSS before primitive and pattern CSS. Choose semantic roles by job, not by sampled color.

Accessibility

Repository contrast fixtures validate the required foreground/background and focus pairs. Consumers still test composed content and real states.

Legacy aliases

One-release compatibility aliases remain only where they preserve v0.0.2 behavior. New work uses current semantic names.

Avoid

Do not override package-internal variables, copy resolved OKLCH values into application CSS, or create product palette rails without meaning.