Prototype design system.

Foundations, components, and patterns now live in separate pages so demos stay readable and reusable.

Foundations

The stable layer behind every component.

Foundations define the reusable contract for color, typography, spacing-related scales, elevation, and responsive behavior. Product interfaces should consume this layer through semantic utilities and UI components.

Use semantic roles

Application code should choose a semantic utility before reaching for a primitive color.

text-toned, bg-base, border-subtle

Keep theme changes centralized

Light and dark mappings are changed in the theme source, not inside individual components.

Design System/source/themes.css

Expose developer aliases

Tailwind utilities are the readable API developers should use in Vue templates.

Design System/source/tailwind-theme.css

Treat primitives as raw materials

Primitive palettes document available values, but they are not the default implementation layer.

Design System/source/tokens.css

Source map

These are the canonical files developers should inspect before adding or changing visual behavior.

Tokens

Primitive colors, radii, shadows, spacing, and fonts.

Design System/source/tokens.css

Themes

Light/dark semantic aliases consumed by Tailwind.

Design System/source/themes.css

Tailwind

Token mapping for the prototype utility classes.

Design System/source/tailwind-theme.css

Typography

Canonical type-heading, type-body, caption, and code scale.

Design System/source/typography.css

Breakpoints

Responsive Tailwind thresholds used by patterns and layouts.

Design System/foundations/breakpoints.md

Semantic colors

Theme-aware text, background, border, surface, and feedback roles.

Design System/foundations/semantic-colors.md

Alpha overlays

Transparent primitive overlays used for layered interaction states.

Design System/foundations/alpha-overlays.md

Dataviz colors

Categorical chart colors with dedicated light and dark mappings.

Design System/foundations/dataviz-colors.md

Shadows

Elevation scale for cards, panels, overlays, and popovers.

Design System/foundations/shadows.md

Icons

Centralized Lucide registry to avoid scattered imports.

components/ui/icon-registry.ts

Governance

Usage rules, single sources, and reused instances.

design.md

Semantic color tokens

Semantic tokens are the colors application code should use. The same class stays in the component while light and dark values are resolved by the theme.

Families shown here

TextBackgroundBorderSurfaceFeedback

Feedback text tokens are intentionally separate from feedback fill tokens for readable contrast.

Text

Use these roles for hierarchy and readability. Prefer `text-default` for normal product copy.

Dimmed

text-dimmed

--ui-text-dimmed

Disabled or least prominent supporting text.

Light

--ds-color-neutral-600

Dark

--ds-color-neutral-400

Muted

text-muted

--ui-text-muted

Secondary metadata, breadcrumbs, hints, and less prominent labels.

Light

--ds-color-neutral-600

Dark

--ds-color-neutral-400

Toned

text-toned

--ui-text-toned

Card titles and emphasized text that should stay below highlighted.

Light

--ds-color-neutral-600

Dark

--ds-color-neutral-300

Default

text-default

--ui-text

Default application text.

Light

--ds-color-neutral-700

Dark

--ds-color-neutral-200

Highlighted

text-highlighted

--ui-text-highlighted

Primary headings, active navigation, and strongest text.

Light

--ds-color-neutral-900

Dark

--ds-color-white

Inverted

text-inverted

--ui-text-inverted

Text placed on dark or selected surfaces.

Light

--ds-color-white

Dark

--ds-color-neutral-900

Background

Use these for UI fills. The product page background is `bg-canvas`, which maps to the elevated background.

Base

bg-base

--ui-bg

Cards, menus, inputs, and table rows.

Fill

Light

--ds-color-white

Fill

Dark

--ds-color-neutral-900

Elevated

bg-elevated

--ui-bg-elevated

Global page background and table row hover.

Fill

Light

--ds-color-neutral-100

Fill

Dark

--ds-color-neutral-800

Accented

bg-accented

--ui-bg-accented

Subtle hover pills and low-emphasis active fills.

Fill

Light

--ds-color-neutral-200

Fill

Dark

--ds-color-neutral-700

Selected

bg-selected

--ui-bg-selected

Low-emphasis selected states. Do not use for table hover.

Fill

Light

--ds-color-primary-secondary

Fill

Dark

--ds-color-primary-800

Navigation selected

bg-navigation-selected

--ui-bg-navigation-selected

Active side navigation item only.

Fill

Light

--ds-color-primary-500

Fill

Dark

--ds-color-primary-300

Inverted

bg-inverted

--ui-bg-inverted

Inverted containers and contrast previews.

Fill

Light

--ds-color-neutral-900

Fill

Dark

--ds-color-white

Border

Use border roles instead of primitive neutral steps. Header and footer rules use accented border.

Base

border-base

--ui-border

Default component borders.

Border

Light

--ds-color-neutral-200

Border

Dark

--ds-color-neutral-700

Subtle

border-subtle

--ui-border-subtle

Internal separators and low-contrast dividers.

Border

Light

--ds-color-neutral-100

Border

Dark

--ds-color-neutral-800

Accented

border-accented

--ui-border-accented

Structural borders such as header and footer rules.

Border

Light

--alpha-900-20

Border

Dark

--alpha-white-20

Surface

Surface roles are editorial layout aliases. Components can use them when the role is structural.

Canvas

bg-canvas

--ds-semantic-canvas

Global app and design-system page background.

Fill

Light

--ui-bg-elevated

Fill

Dark

--ui-bg-elevated

Surface

bg-surface

--ds-semantic-surface

Raised page regions and neutral panels.

Fill

Light

--ds-color-neutral-100

Fill

Dark

--ds-color-neutral-800

Surface accent

bg-surface-accent

--ds-semantic-surface-accent

Subtle nested panels and accented layout zones.

Fill

Light

--ds-color-neutral-200

Fill

Dark

--ds-color-neutral-700

Surface raised

bg-surface-raised

--ds-semantic-surface-raised

Cards, panels, and UI catalogue containers.

Fill

Light

--ds-color-white

Fill

Dark

--ds-color-neutral-800

Feedback

Feedback tokens express meaning. Text roles are separate from fill roles so contrast stays correct in both themes.

Primary text

text-primary

--ui-text-primary

Brand-colored inline text and links that need text contrast.

Light

--ds-color-primary-700

Dark

--ds-color-primary-300

Success text

text-success

--ui-text-success

Positive text, verified labels, and success copy.

Light

--ds-color-success-700

Dark

--ds-color-success-400

Warning text

text-warning

--ui-text-warning

Warning text and caution copy.

Light

--ds-color-warning-800

Dark

--ds-color-warning-300

Error text

text-error

--ui-text-error

Error text, destructive labels, and invalid field copy.

Light

--ds-color-error-700

Dark

--ds-color-error-400

Brand fill

bg-brand / text-brand

--ds-semantic-brand

Primary actions, brand accents, and active controls.

Fill

Light

--ds-color-primary-600

Fill

Dark

--ds-color-primary-400

Success fill

bg-success

--ds-semantic-success

Positive status fills, success badges, and confirmation states.

Fill

Light

--ds-color-success-500

Fill

Dark

--ds-color-success-400

Warning fill

bg-warning

--ds-semantic-warning

Warning status fills and attention states.

Fill

Light

--ds-color-warning-500

Fill

Dark

--ds-color-warning-400

Danger fill

bg-danger

--ds-semantic-danger

Destructive action fills and high-emphasis error states.

Fill

Light

--ds-color-error-700

Fill

Dark

--ds-color-error-400

Status info soft

UiStatusMessage tone="info"

--ui-status-info-bg

Soft background for informational status messages.

Fill

Light

--ds-color-primary-500 / 25%

Fill

Dark

--ds-color-primary-400 / 25%

Status danger soft

UiStatusMessage tone="danger"

--ui-status-danger-bg

Soft background for error and danger status messages.

Fill

Light

--ds-color-error-500 / 25%

Fill

Dark

--ds-color-error-400 / 25%

Alpha overlays

Alpha tokens are transparent primitives used to layer interaction states over an existing surface. They are exposed as Tailwind color utilities, but product code should still prefer semantic roles when a reusable meaning exists.

Neutral 900 / 10%

bg-alpha-900-10

--alpha-900-10rgb(var(--ds-color-neutral-900) / 0.1)

Subtle hover, selected states, and soft layering over a base fill.

Light canvas preview

Dark canvas preview

Neutral 900 / 20%

bg-alpha-900-20

--alpha-900-20rgb(var(--ds-color-neutral-900) / 0.2)

Stronger overlays when 10% is too quiet. Use sparingly and prefer semantic tokens first.

Light canvas preview

Dark canvas preview

White / 20%

bg-alpha-white-20

--alpha-white-20rgb(var(--ds-color-white) / 0.2)

Dark-theme counterpart to Neutral 900 / 20% for borders and overlays on dark surfaces.

Light canvas preview

Dark canvas preview

Data visualization colors

Use these categorical colors for charts and ranked distributions. They are intentionally separate from semantic feedback colors so a chart segment never implies success, warning, or error by accident.

Dataviz 1

bg-dataviz-1

--ds-dataviz-1

Light · --ds-color-dataviz-1-light

Dark · --ds-color-dataviz-1-dark

Dataviz 2

bg-dataviz-2

--ds-dataviz-2

Light · --ds-color-dataviz-2-light

Dark · --ds-color-dataviz-2-dark

Dataviz 3

bg-dataviz-3

--ds-dataviz-3

Light · --ds-color-dataviz-3-light

Dark · --ds-color-dataviz-3-dark

Dataviz 4

bg-dataviz-4

--ds-dataviz-4

Light · --ds-color-dataviz-4-light

Dark · --ds-color-dataviz-4-dark

Dataviz 5

bg-dataviz-5

--ds-dataviz-5

Light · --ds-color-dataviz-5-light

Dark · --ds-color-dataviz-5-dark

Dataviz 6

bg-dataviz-6

--ds-dataviz-6

Light · --ds-color-dataviz-6-light

Dark · --ds-color-dataviz-6-dark

Dataviz 7

bg-dataviz-7

--ds-dataviz-7

Light · --ds-color-dataviz-7-light

Dark · --ds-color-dataviz-7-dark

Dataviz 8

bg-dataviz-8

--ds-dataviz-8

Light · --ds-color-dataviz-8-light

Dark · --ds-color-dataviz-8-dark

Dataviz 9

bg-dataviz-9

--ds-dataviz-9

Light · --ds-color-dataviz-9-light

Dark · --ds-color-dataviz-9-dark

Dataviz 10

bg-dataviz-10

--ds-dataviz-10

Light · --ds-color-dataviz-10-light

Dark · --ds-color-dataviz-10-dark

Dataviz 11

bg-dataviz-11

--ds-dataviz-11

Light · --ds-color-dataviz-11-light

Dark · --ds-color-dataviz-11-dark

Dataviz 12

bg-dataviz-12

--ds-dataviz-12

Light · --ds-color-dataviz-12-light

Dark · --ds-color-dataviz-12-dark

Dataviz 13

bg-dataviz-13

--ds-dataviz-13

Light · --ds-color-dataviz-13-light

Dark · --ds-color-dataviz-13-dark

Dataviz 14

bg-dataviz-14

--ds-dataviz-14

Light · --ds-color-dataviz-14-light

Dark · --ds-color-dataviz-14-dark

Usage contract

Use the palette in order for categorical charts. If a chart has more than six meaningful categories, keep the first categories visible and aggregate the long tail into an “Other” bucket before assigning the next token.

Breakpoints

Product layout thresholds are defined once and consumed through Tailwind responsive utilities.

640px40rem

Small adjustments above narrow mobile.

768px48rem

Tablet threshold, intermediate header, and active side navigation.

1024px64rem

Compact desktop start, full header, and content grids.

1280px80rem

Large desktop and more generous grids.

2xl

1536px96rem

Full 12-column product rail and floating patterns.

Shadow scale

Shadows are theme-aware and use the neutral shadow color token instead of hardcoded black.

Small

shadow-drop-sm

Subtle lift for compact controls or tiny previews.

0 1px 2px / 5%

Default

shadow-drop

Default card elevation when a surface needs light depth.

0 1px 2px / 6%, 0 1px 3px / 10%

Medium

shadow-drop-md

Raised cards, floating controls, and compact panels.

0 2px 4px -1px / 6%, 0 4px 6px -1px / 10%

Large

shadow-drop-lg

Panels that sit above the page surface.

0 4px 6px -2px / 5%, 0 10px 15px -3px / 10%

XLarge

shadow-drop-xl

High-emphasis overlays and important editable states.

0 10px 10px -5px / 4%, 0 20px 25px -5px / 10%

2XLarge

shadow-drop-2xl

Modal-level elevation; use rarely.

0 25px 50px -12px / 25%

Typography

The `type-*` styles are the only canonical type scale for the prototype. Do not create local font-size or tracking utilities in product pages.

Heading/XXLarge

type-heading-xxlarge

Primary page title