# Design system kit

> A whole design system on one page: foundations, voice, every allowed component in light and dark, its own components and its approval, rendered by texuli/ds-kit for a fictional example brand.

Language: en
Canonical: https://texuli.com/design-systems/kit/
Markdown: https://texuli.com/design-systems/kit.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

The kit renders a design system from data: its foundations in light and dark, its voice, every component it allows in each allowed variant, size and state, its own components and its approval record. Below is **Ledgerline 2.3.0**, a fictional example brand, locked to 3 of the 199 catalog components.

The kit is released in 0.16.0, with the locked design systems it shows. An approval it displays is declared in the document: the kit checks the content hash, but only a reviewed commit proves who approved. See the [design systems hub](https://texuli.com/design-systems/) for the example brands side by side, and the [Design Systems Solution](https://texuli.com/solutions/design-systems/) for the whole loop from brand inputs to locked prototypes.

## Use it in your app

Pass the document, its compiled output (with the allow manifest) and the catalog. Library components arrive as snippets keyed by library id; components from packages above `texuli` arrive as sample snippets keyed by catalog id.

```
<script lang="ts">
  import { DesignSystemKit } from 'texuli/ds-kit';
  import catalog from './catalog/components.json'; // packages/spec/catalog/components.json
  import doc from './design-system.json';
  import compiled from './dist/compiled.json';      // texuli ds compile --format json
</script>

<DesignSystemKit document={doc} {compiled} allow={compiled.allowManifest} {catalog} />
```

## Ledgerline2.3.0

Draft No content hash recorded

Version

2.3.0

Computed hash

`6db953ba91c7d6a9e7b1a84ef73b39190cefdace6e55aa954df47bb7514dc2be`

 Color mode Both Light Dark

### Foundations

#### Color roles (113)

| Token | Light | Dark |
| --- | --- | --- |
| `--tx-accent` | `#e7efff` | `#172544` |
| `--tx-accent-active` | `#f7ffff` | `#030d29` |
| `--tx-accent-disabled` | `#f4f7fb` | `#11151e` |
| `--tx-accent-focus` | `#1d4ed8` | `#2558e2` |
| `--tx-accent-foreground` | `#111a2d` | `#e7efff` |
| `--tx-accent-hover` | `#f7ffff` | `#0c1936` |
| `--tx-background` | `#fafcff` | `#060b14` |
| `--tx-border` | `#d9e2ef` | `#2c333d` |
| `--tx-border-strong` | `#8b939f` | `#79818c` |
| `--tx-canvas` | `#eff6ff` | `#03060d` |
| `--tx-destructive` | `#cc2827` | `#ff645a` |
| `--tx-destructive-active` | `#a3000e` | `#ffa096` |
| `--tx-destructive-disabled` | `#e7b4ad` | `#5a332f` |
| `--tx-destructive-focus` | `#1d4ed8` | `#2558e2` |
| `--tx-destructive-foreground` | `#ffffff` | `#0a0a0a` |
| `--tx-destructive-hover` | `#ba0a15` | `#ff8579` |
| `--tx-destructive-soft` | `#fff2f0` | `#370404` |
| `--tx-destructive-soft-foreground` | `#540004` | `#ffc8c1` |
| `--tx-elevated` | `#f7ffff` | `#1c222b` |
| `--tx-elevated-foreground` | `#0a1628` | `#eff6ff` |
| `--tx-foreground` | `#0a1628` | `#eff6ff` |
| `--tx-info` | `#0871c1` | `#4ba3f7` |
| `--tx-info-active` | `#005493` | `#88c3ff` |
| `--tx-info-disabled` | `#acc4de` | `#2d4157` |
| `--tx-info-focus` | `#1d4ed8` | `#2558e2` |
| `--tx-info-foreground` | `#ffffff` | `#0a0a0a` |
| `--tx-info-hover` | `#0062ab` | `#67b3ff` |
| `--tx-info-soft` | `#eef6ff` | `#001b36` |
| `--tx-info-soft-foreground` | `#002a4e` | `#badbff` |
| `--tx-input` | `#7f8792` | `#6a727d` |
| `--tx-input-active` | `#626a74` | `#87909b` |
| `--tx-input-disabled` | `#c9cbcf` | `#2e3033` |
| `--tx-input-focus` | `#1d4ed8` | `#2558e2` |
| `--tx-input-hover` | `#707883` | `#78818c` |
| `--tx-link` | `#2655d3` | `#85acff` |
| `--tx-link-active` | `#0c34b1` | `#b6ceff` |
| `--tx-link-disabled` | `#a9bce4` | `#3a455a` |
| `--tx-link-focus` | `#1d4ed8` | `#2558e2` |
| `--tx-link-hover` | `#1945c2` | `#9dbdff` |
| `--tx-link-visited` | `#73348e` | `#da99fa` |
| `--tx-muted` | `#ecf4ff` | `#1c222b` |
| `--tx-muted-active` | `#f8ffff` | `#070b13` |
| `--tx-muted-disabled` | `#f6f9fc` | `#121416` |
| `--tx-muted-focus` | `#1d4ed8` | `#2558e2` |
| `--tx-muted-foreground` | `#55647a` | `#95a6be` |
| `--tx-muted-hover` | `#f8ffff` | `#11161f` |
| `--tx-overlay` | `rgb(9 9 11 / 0.5)` | `rgb(0 0 0 / 0.65)` |
| `--tx-primary` | `#1d4ed8` | `#4e83ff` |
| `--tx-primary-active` | `#052ab6` | `#7fa8ff` |
| `--tx-primary-disabled` | `#a6bbe5` | `#2a3857` |
| `--tx-primary-focus` | `#1d4ed8` | `#2558e2` |
| `--tx-primary-foreground` | `#ffffff` | `#0a0a0a` |
| `--tx-primary-hover` | `#103dc7` | `#6796ff` |
| `--tx-primary-soft` | `#f0f5ff` | `#07173f` |
| `--tx-primary-soft-foreground` | `#041c6c` | `#c4d8ff` |
| `--tx-ring` | `#1d4ed8` | `#2558e2` |
| `--tx-scrim` | `rgb(9 9 11 / 0.32)` | `rgb(0 0 0 / 0.5)` |
| `--tx-secondary` | `#cbf1ec` | `#123431` |
| `--tx-secondary-active` | `#e2ffff` | `#001b19` |
| `--tx-secondary-disabled` | `#ebf7f5` | `#121a19` |
| `--tx-secondary-focus` | `#1d4ed8` | `#2558e2` |
| `--tx-secondary-foreground` | `#00201d` | `#d2f8f3` |
| `--tx-secondary-hover` | `#e4fffb` | `#042725` |
| `--tx-selection` | `#c0d5ff` | `#2a4072` |
| `--tx-selection-foreground` | `#111a2d` | `#e7efff` |
| `--tx-sidebar` | `#f2f7ff` | `#0c121a` |
| `--tx-sidebar-border` | `#d9e2ef` | `#272e38` |
| `--tx-sidebar-foreground` | `#172537` | `#dae9ff` |
| `--tx-sidebar-primary` | `#1d4ed8` | `#4e83ff` |
| `--tx-sidebar-primary-active` | `#052ab6` | `#7fa8ff` |
| `--tx-sidebar-primary-disabled` | `#a6bbe5` | `#2a3857` |
| `--tx-sidebar-primary-focus` | `#1d4ed8` | `#2558e2` |
| `--tx-sidebar-primary-hover` | `#103dc7` | `#6796ff` |
| `--tx-status-danger` | `#cc2827` | `#ff645a` |
| `--tx-status-danger-foreground` | `#ffffff` | `#0a0a0a` |
| `--tx-status-danger-soft` | `#fff2f0` | `#370404` |
| `--tx-status-danger-soft-foreground` | `#540004` | `#ffc8c1` |
| `--tx-status-info` | `#0871c1` | `#4ba3f7` |
| `--tx-status-info-foreground` | `#ffffff` | `#0a0a0a` |
| `--tx-status-info-soft` | `#eef6ff` | `#001b36` |
| `--tx-status-info-soft-foreground` | `#002a4e` | `#badbff` |
| `--tx-status-neutral` | `#cbf1ec` | `#123431` |
| `--tx-status-neutral-foreground` | `#00201d` | `#d2f8f3` |
| `--tx-status-neutral-soft` | `#ecf4ff` | `#1c222b` |
| `--tx-status-neutral-soft-foreground` | `#55647a` | `#95a6be` |
| `--tx-status-success` | `#007f38` | `#43b966` |
| `--tx-status-success-foreground` | `#ffffff` | `#0a0a0a` |
| `--tx-status-success-soft` | `#dfffe4` | `#00220a` |
| `--tx-status-success-soft-foreground` | `#003312` | `#9ceead` |
| `--tx-status-warning` | `#916600` | `#cd9200` |
| `--tx-status-warning-foreground` | `#ffffff` | `#0a0a0a` |
| `--tx-status-warning-soft` | `#fff4e1` | `#261800` |
| `--tx-status-warning-soft-foreground` | `#382500` | `#ffcf7d` |
| `--tx-subtle` | `#e1eaf7` | `#272e38` |
| `--tx-subtle-foreground` | `#3f4e63` | `#aebfd8` |
| `--tx-success` | `#007f38` | `#43b966` |
| `--tx-success-active` | `#005e28` | `#67da85` |
| `--tx-success-disabled` | `#acc7b0` | `#2d4732` |
| `--tx-success-focus` | `#1d4ed8` | `#2558e2` |
| `--tx-success-foreground` | `#ffffff` | `#0a0a0a` |
| `--tx-success-hover` | `#006e30` | `#55c975` |
| `--tx-success-soft` | `#dfffe4` | `#00220a` |
| `--tx-success-soft-foreground` | `#003312` | `#9ceead` |
| `--tx-surface` | `#f7ffff` | `#10161f` |
| `--tx-surface-foreground` | `#0a1628` | `#eff6ff` |
| `--tx-warning` | `#916600` | `#cd9200` |
| `--tx-warning-active` | `#6d4c00` | `#eeb23d` |
| `--tx-warning-disabled` | `#cdbfa9` | `#4c3d24` |
| `--tx-warning-focus` | `#1d4ed8` | `#2558e2` |
| `--tx-warning-foreground` | `#ffffff` | `#0a0a0a` |
| `--tx-warning-hover` | `#7f5900` | `#dea227` |
| `--tx-warning-soft` | `#fff4e1` | `#261800` |
| `--tx-warning-soft-foreground` | `#382500` | `#ffcf7d` |

#### Data visualization (36)

| Token | Light | Dark |
| --- | --- | --- |
| `--tx-chart-1` | `#4974d8` | `#76a2ff` |
| `--tx-chart-1-foreground` | `#0a0a0a` | `#0a0a0a` |
| `--tx-chart-2` | `#965bc0` | `#b57ae1` |
| `--tx-chart-2-foreground` | `#ffffff` | `#0a0a0a` |
| `--tx-chart-3` | `#bf4a80` | `#ef75ab` |
| `--tx-chart-3-foreground` | `#ffffff` | `#0a0a0a` |
| `--tx-chart-4` | `#9b7300` | `#d09b00` |
| `--tx-chart-4-foreground` | `#0a0a0a` | `#0a0a0a` |
| `--tx-chart-5` | `#00826b` | `#00b292` |
| `--tx-chart-5-foreground` | `#ffffff` | `#0a0a0a` |
| `--tx-chart-6` | `#6d9d2d` | `#ff9975` |
| `--tx-chart-6-foreground` | `#0a0a0a` | `#0a0a0a` |
| `--tx-chart-7` | `#008fad` | `#00bee5` |
| `--tx-chart-7-foreground` | `#0a0a0a` | `#0a0a0a` |
| `--tx-chart-8` | `#e17148` | `#8bbd50` |
| `--tx-chart-8-foreground` | `#0a0a0a` | `#0a0a0a` |
| `--tx-chart-axis` | `#55647a` | `#95a6be` |
| `--tx-chart-diverging-1` | `#c74b43` | `#c8584f` |
| `--tx-chart-diverging-2` | `#d7766c` | `#a25048` |
| `--tx-chart-diverging-3` | `#e49e95` | `#7e4640` |
| `--tx-chart-diverging-4` | `#eec5bf` | `#5a3c38` |
| `--tx-chart-diverging-5` | `#ebeff5` | `#303338` |
| `--tx-chart-diverging-6` | `#c1d0f0` | `#39455d` |
| `--tx-chart-diverging-7` | `#97b2e9` | `#425783` |
| `--tx-chart-diverging-8` | `#7094e1` | `#4a6aac` |
| `--tx-chart-diverging-9` | `#4974d7` | `#537cd6` |
| `--tx-chart-grid` | `#d9e2ef` | `#2c333d` |
| `--tx-chart-sequential-1` | `#ebf2ff` | `#272e3b` |
| `--tx-chart-sequential-2` | `#d4e2ff` | `#2c374c` |
| `--tx-chart-sequential-3` | `#bed3fc` | `#31405e` |
| `--tx-chart-sequential-4` | `#aac3f7` | `#364970` |
| `--tx-chart-sequential-5` | `#96b4f1` | `#3b5383` |
| `--tx-chart-sequential-6` | `#82a4eb` | `#415c96` |
| `--tx-chart-sequential-7` | `#6f94e5` | `#4666aa` |
| `--tx-chart-sequential-8` | `#5c84de` | `#4b6fbe` |
| `--tx-chart-sequential-9` | `#4974d8` | `#5079d2` |

#### Typography (57)

- body The quick brown fox jumps over the lazy dog
- caption The quick brown fox jumps over the lazy dog
- code The quick brown fox jumps over the lazy dog
- display The quick brown fox jumps over the lazy dog
- heading The quick brown fox jumps over the lazy dog
- label The quick brown fox jumps over the lazy dog
- title The quick brown fox jumps over the lazy dog

| Token | Light | Dark |
| --- | --- | --- |
| `--tx-font-heading` | `"IBM Plex Sans", system-ui, sans-serif` | `"IBM Plex Sans", system-ui, sans-serif` |
| `--tx-font-mono` | `"IBM Plex Mono", ui-monospace, monospace` | `"IBM Plex Mono", ui-monospace, monospace` |
| `--tx-font-sans` | `"IBM Plex Sans", system-ui, sans-serif` | `"IBM Plex Sans", system-ui, sans-serif` |
| `--tx-font-size-2xl` | `1.2458rem` | `1.2458rem` |
| `--tx-font-size-3xl` | `1.4016rem` | `1.4016rem` |
| `--tx-font-size-4xl` | `1.5768rem` | `1.5768rem` |
| `--tx-font-size-5xl` | `1.7739rem` | `1.7739rem` |
| `--tx-font-size-6xl` | `1.9956rem` | `1.9956rem` |
| `--tx-font-size-7xl` | `2.2451rem` | `2.2451rem` |
| `--tx-font-size-8xl` | `2.5257rem` | `2.5257rem` |
| `--tx-font-size-9xl` | `2.8414rem` | `2.8414rem` |
| `--tx-font-size-base` | `0.875rem` | `0.875rem` |
| `--tx-font-size-lg` | `0.9844rem` | `0.9844rem` |
| `--tx-font-size-sm` | `0.7778rem` | `0.7778rem` |
| `--tx-font-size-xl` | `1.1074rem` | `1.1074rem` |
| `--tx-font-size-xs` | `0.6913rem` | `0.6913rem` |
| `--tx-font-weight-body` | `400` | `400` |
| `--tx-font-weight-bold` | `700` | `700` |
| `--tx-font-weight-heading` | `600` | `600` |
| `--tx-font-weight-medium` | `500` | `500` |
| `--tx-letter-spacing-body` | `0` | `0` |
| `--tx-letter-spacing-heading` | `0` | `0` |
| `--tx-type-body-family` | `"IBM Plex Sans", system-ui, sans-serif` | `"IBM Plex Sans", system-ui, sans-serif` |
| `--tx-type-body-line` | `1.5` | `1.5` |
| `--tx-type-body-size` | `0.875rem` | `0.875rem` |
| `--tx-type-body-tracking` | `0` | `0` |
| `--tx-type-body-weight` | `400` | `400` |
| `--tx-type-caption-family` | `"IBM Plex Sans", system-ui, sans-serif` | `"IBM Plex Sans", system-ui, sans-serif` |
| `--tx-type-caption-line` | `1.35` | `1.35` |
| `--tx-type-caption-size` | `0.6913rem` | `0.6913rem` |
| `--tx-type-caption-tracking` | `0` | `0` |
| `--tx-type-caption-weight` | `400` | `400` |
| `--tx-type-code-family` | `"IBM Plex Mono", ui-monospace, monospace` | `"IBM Plex Mono", ui-monospace, monospace` |
| `--tx-type-code-line` | `1.5` | `1.5` |
| `--tx-type-code-size` | `0.875em` | `0.875em` |
| `--tx-type-code-tracking` | `0` | `0` |
| `--tx-type-code-weight` | `400` | `400` |
| `--tx-type-display-family` | `"IBM Plex Sans", system-ui, sans-serif` | `"IBM Plex Sans", system-ui, sans-serif` |
| `--tx-type-display-line` | `1.1` | `1.1` |
| `--tx-type-display-size` | `1.5768rem` | `1.5768rem` |
| `--tx-type-display-tracking` | `0` | `0` |
| `--tx-type-display-weight` | `700` | `700` |
| `--tx-type-heading-family` | `"IBM Plex Sans", system-ui, sans-serif` | `"IBM Plex Sans", system-ui, sans-serif` |
| `--tx-type-heading-line` | `1.3` | `1.3` |
| `--tx-type-heading-size` | `0.9844rem` | `0.9844rem` |
| `--tx-type-heading-tracking` | `0` | `0` |
| `--tx-type-heading-weight` | `600` | `600` |
| `--tx-type-label-family` | `"IBM Plex Sans", system-ui, sans-serif` | `"IBM Plex Sans", system-ui, sans-serif` |
| `--tx-type-label-line` | `1.25` | `1.25` |
| `--tx-type-label-size` | `0.7778rem` | `0.7778rem` |
| `--tx-type-label-tracking` | `0` | `0` |
| `--tx-type-label-weight` | `500` | `500` |
| `--tx-type-title-family` | `"IBM Plex Sans", system-ui, sans-serif` | `"IBM Plex Sans", system-ui, sans-serif` |
| `--tx-type-title-line` | `1.2` | `1.2` |
| `--tx-type-title-size` | `1.2458rem` | `1.2458rem` |
| `--tx-type-title-tracking` | `0` | `0` |
| `--tx-type-title-weight` | `600` | `600` |

#### Spacing (14)

| Token | Light | Dark |
| --- | --- | --- |
| `--tx-space-0` | `0px` | `0px` |
| `--tx-space-1` | `0.2188rem` | `0.2188rem` |
| `--tx-space-2` | `0.4375rem` | `0.4375rem` |
| `--tx-space-3` | `0.6563rem` | `0.6563rem` |
| `--tx-space-4` | `0.875rem` | `0.875rem` |
| `--tx-space-5` | `1.0938rem` | `1.0938rem` |
| `--tx-space-6` | `1.3125rem` | `1.3125rem` |
| `--tx-space-7` | `1.5313rem` | `1.5313rem` |
| `--tx-space-8` | `1.75rem` | `1.75rem` |
| `--tx-space-9` | `1.9688rem` | `1.9688rem` |
| `--tx-space-10` | `2.1875rem` | `2.1875rem` |
| `--tx-space-11` | `2.4063rem` | `2.4063rem` |
| `--tx-space-12` | `2.625rem` | `2.625rem` |
| `--tx-space-unit` | `0.2188rem` | `0.2188rem` |

#### Radius (12)

| Token | Light | Dark |
| --- | --- | --- |
| `--tx-radius` | `0.25rem` | `0.25rem` |
| `--tx-radius-scale` | `0.5` | `0.5` |
| `--tx-radius-step-2` | `1px` | `1px` |
| `--tx-radius-step-4` | `2px` | `2px` |
| `--tx-radius-step-6` | `3px` | `3px` |
| `--tx-shape-radius-full` | `9999px` | `9999px` |
| `--tx-shape-radius-lg` | `0.25rem` | `0.25rem` |
| `--tx-shape-radius-md` | `max(0px, 0.25rem - 1px)` | `max(0px, 0.25rem - 1px)` |
| `--tx-shape-radius-none` | `0px` | `0px` |
| `--tx-shape-radius-sm` | `max(0px, 0.25rem - 2px)` | `max(0px, 0.25rem - 2px)` |
| `--tx-shape-radius-xl` | `calc(0.25rem + 2px)` | `calc(0.25rem + 2px)` |
| `--tx-shape-radius-xs` | `max(0px, 0.25rem - 3px)` | `max(0px, 0.25rem - 3px)` |

#### Elevation and shadow (10)

| Token | Light | Dark |
| --- | --- | --- |
| `--tx-elevation-0` | `none` | `none` |
| `--tx-elevation-1` | `0 1px 2px 0 rgb(15 23 42 / 0.1)` | `0 1px 2px 0 rgb(0 0 0 / 0.5)` |
| `--tx-elevation-2` | `0 1px 2px 0 rgb(15 23 42 / 0.1)` | `0 1px 2px 0 rgb(0 0 0 / 0.5)` |
| `--tx-elevation-3` | `0 4px 8px -2px rgb(15 23 42 / 0.1)` | `0 4px 8px -2px rgb(0 0 0 / 0.5)` |
| `--tx-elevation-4` | `0 4px 8px -2px rgb(15 23 42 / 0.1)` | `0 4px 8px -2px rgb(0 0 0 / 0.5)` |
| `--tx-elevation-5` | `0 4px 8px -2px rgb(15 23 42 / 0.1)` | `0 4px 8px -2px rgb(0 0 0 / 0.5)` |
| `--tx-elevation-style` | `crisp` | `crisp` |
| `--tx-shadow` | `rgb(15 23 42 / 0.1)` | `rgb(0 0 0 / 0.5)` |
| `--tx-shadow-float` | `0 4px 8px -2px rgb(15 23 42 / 0.1)` | `0 4px 8px -2px rgb(0 0 0 / 0.5)` |
| `--tx-shadow-soft` | `0 1px 2px 0 rgb(15 23 42 / 0.1)` | `0 1px 2px 0 rgb(0 0 0 / 0.5)` |

#### Motion (18)

| Token | Light | Dark |
| --- | --- | --- |
| `--tx-motion` | `1` | `1` |
| `--tx-motion-base` | `150ms` | `150ms` |
| `--tx-motion-ease-emphasized` | `cubic-bezier(0.2, 0, 0, 1)` | `cubic-bezier(0.2, 0, 0, 1)` |
| `--tx-motion-ease-enter` | `cubic-bezier(0, 0, 0.2, 1)` | `cubic-bezier(0, 0, 0.2, 1)` |
| `--tx-motion-ease-exit` | `cubic-bezier(0.4, 0, 1, 1)` | `cubic-bezier(0.4, 0, 1, 1)` |
| `--tx-motion-ease-linear` | `linear` | `linear` |
| `--tx-motion-ease-standard` | `cubic-bezier(0.4, 0, 0.2, 1)` | `cubic-bezier(0.4, 0, 0.2, 1)` |
| `--tx-motion-easing` | `ease-out` | `ease-out` |
| `--tx-motion-fast` | `100ms` | `100ms` |
| `--tx-motion-instant` | `0ms` | `0ms` |
| `--tx-motion-slow` | `200ms` | `200ms` |
| `--tx-motion-slower` | `333ms` | `333ms` |
| `--tx-motion-spring-bouncy` | `linear(0, 0.1177, 0.3817, 0.6779, 0.9294, 1.0989, 1.1811, 1.1921, 1.1571, 1.1015, 1.0453, 1.001, 0.9737, 0.9627, 0.964, 0.9727, 0.9839, 0.9943, 1.0019, 1.0061, 1.0074, 1.0066, 1.0046, 1.0024, 1.0006, 0.9993, 0.9987, 0.9986, 0.9988, 0.9992, 0.9997, 1)` | `linear(0, 0.1177, 0.3817, 0.6779, 0.9294, 1.0989, 1.1811, 1.1921, 1.1571, 1.1015, 1.0453, 1.001, 0.9737, 0.9627, 0.964, 0.9727, 0.9839, 0.9943, 1.0019, 1.0061, 1.0074, 1.0066, 1.0046, 1.0024, 1.0006, 0.9993, 0.9987, 0.9986, 0.9988, 0.9992, 0.9997, 1)` |
| `--tx-motion-spring-bouncy-duration` | `844ms` | `844ms` |
| `--tx-motion-spring-gentle` | `linear(0, 0.0228, 0.0795, 0.1561, 0.2426, 0.3318, 0.419, 0.5013, 0.5767, 0.6444, 0.7041, 0.7561, 0.8007, 0.8386, 0.8704, 0.8969, 0.9187, 0.9365, 0.951, 0.9626, 0.9718, 0.9791, 0.9848, 0.9892, 0.9925, 0.9951, 0.9969, 0.9983, 0.9993, 0.9999, 1.0004, 1)` | `linear(0, 0.0228, 0.0795, 0.1561, 0.2426, 0.3318, 0.419, 0.5013, 0.5767, 0.6444, 0.7041, 0.7561, 0.8007, 0.8386, 0.8704, 0.8969, 0.9187, 0.9365, 0.951, 0.9626, 0.9718, 0.9791, 0.9848, 0.9892, 0.9925, 0.9951, 0.9969, 0.9983, 0.9993, 0.9999, 1.0004, 1)` |
| `--tx-motion-spring-gentle-duration` | `648ms` | `648ms` |
| `--tx-motion-spring-snappy` | `linear(0, 0.0368, 0.1267, 0.2447, 0.3726, 0.4983, 0.6137, 0.7148, 0.7995, 0.8679, 0.9212, 0.9609, 0.9892, 1.0082, 1.0199, 1.0261, 1.0283, 1.0278, 1.0255, 1.0223, 1.0187, 1.0151, 1.0117, 1.0088, 1.0062, 1.0042, 1.0026, 1.0014, 1.0005, 0.9999, 0.9995, 1)` | `linear(0, 0.0368, 0.1267, 0.2447, 0.3726, 0.4983, 0.6137, 0.7148, 0.7995, 0.8679, 0.9212, 0.9609, 0.9892, 1.0082, 1.0199, 1.0261, 1.0283, 1.0278, 1.0255, 1.0223, 1.0187, 1.0151, 1.0117, 1.0088, 1.0062, 1.0042, 1.0026, 1.0014, 1.0005, 0.9999, 0.9995, 1)` |
| `--tx-motion-spring-snappy-duration` | `453ms` | `453ms` |

#### Other tokens (49)

| Token | Light | Dark |
| --- | --- | --- |
| `--tx-border-width` | `1px` | `1px` |
| `--tx-border-width-thick` | `calc(1px * 2)` | `calc(1px * 2)` |
| `--tx-border-width-thin` | `1px` | `1px` |
| `--tx-density` | `0.875` | `0.875` |
| `--tx-focus-ring-offset` | `2px` | `2px` |
| `--tx-focus-ring-style` | `ring` | `ring` |
| `--tx-focus-ring-width` | `2px` | `2px` |
| `--tx-glass-blur` | `16px` | `16px` |
| `--tx-glass-opacity` | `82%` | `82%` |
| `--tx-icon-stroke` | `2` | `2` |
| `--tx-icon-style` | `outline` | `outline` |
| `--tx-layout-breakpoint-lg` | `72rem` | `72rem` |
| `--tx-layout-breakpoint-md` | `56rem` | `56rem` |
| `--tx-layout-breakpoint-sm` | `36rem` | `36rem` |
| `--tx-layout-content-max` | `72ch` | `72ch` |
| `--tx-layout-full-max` | `100%` | `100%` |
| `--tx-layout-grid-columns-base` | `1` | `1` |
| `--tx-layout-grid-columns-lg` | `4` | `4` |
| `--tx-layout-grid-columns-md` | `3` | `3` |
| `--tx-layout-grid-columns-sm` | `2` | `2` |
| `--tx-layout-grid-gutter-base` | `0.875rem` | `0.875rem` |
| `--tx-layout-grid-gutter-lg` | `0.875rem` | `0.875rem` |
| `--tx-layout-grid-gutter-md` | `0.875rem` | `0.875rem` |
| `--tx-layout-grid-gutter-sm` | `0.875rem` | `0.875rem` |
| `--tx-layout-wide-max` | `80rem` | `80rem` |
| `--tx-opacity-disabled` | `0.5` | `0.5` |
| `--tx-opacity-muted` | `0.7` | `0.7` |
| `--tx-opacity-scrim` | `45%` | `45%` |
| `--tx-size-control-lg` | `2.75rem` | `2.75rem` |
| `--tx-size-control-md` | `2.25rem` | `2.25rem` |
| `--tx-size-control-sm` | `2rem` | `2rem` |
| `--tx-size-control-xs` | `1.75rem` | `1.75rem` |
| `--tx-size-icon-lg` | `1.5rem` | `1.5rem` |
| `--tx-size-icon-md` | `1.25rem` | `1.25rem` |
| `--tx-size-icon-sm` | `1rem` | `1rem` |
| `--tx-size-icon-xs` | `0.75rem` | `0.75rem` |
| `--tx-size-target-min` | `24px` | `24px` |
| `--tx-size-target-touch` | `max(2.75rem, 44px)` | `max(2.75rem, 44px)` |
| `--tx-surface-glass-alpha` | `82%` | `82%` |
| `--tx-surface-glass-blur` | `16px` | `16px` |
| `--tx-surface-style` | `solid` | `solid` |
| `--tx-z-base` | `0` | `0` |
| `--tx-z-modal` | `60` | `60` |
| `--tx-z-overlay` | `60` | `60` |
| `--tx-z-popover` | `50` | `50` |
| `--tx-z-sticky` | `40` | `40` |
| `--tx-z-toast` | `60` | `60` |
| `--tx-z-tooltip` | `50` | `50` |
| `--tx-z-top` | `70` | `70` |

#### Contrast

Target: AA contrast, controls at least 24 px.

Light

| Foreground | Background | Ratio | Result |
| --- | --- | --- | --- |
| `--tx-foreground` | `--tx-canvas` | 16.65:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-background` | 17.64:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-surface` | 17.87:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-elevated` | 17.87:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-muted` | 16.36:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-subtle` | 14.94:1 (needs 4.5:1, text) | Pass |
| `--tx-surface-foreground` | `--tx-surface` | 17.87:1 (needs 4.5:1, text) | Pass |
| `--tx-elevated-foreground` | `--tx-elevated` | 17.87:1 (needs 4.5:1, text) | Pass |
| `--tx-muted-foreground` | `--tx-background` | 5.85:1 (needs 4.5:1, text) | Pass |
| `--tx-muted-foreground` | `--tx-surface` | 5.93:1 (needs 4.5:1, text) | Pass |
| `--tx-muted-foreground` | `--tx-muted` | 5.42:1 (needs 4.5:1, text) | Pass |
| `--tx-muted-foreground` | `--tx-elevated` | 5.93:1 (needs 4.5:1, text) | Pass |
| `--tx-subtle-foreground` | `--tx-background` | 8.23:1 (needs 4.5:1, text) | Pass |
| `--tx-subtle-foreground` | `--tx-subtle` | 6.97:1 (needs 4.5:1, text) | Pass |
| `--tx-primary-foreground` | `--tx-primary` | 6.7:1 (needs 4.5:1, text) | Pass |
| `--tx-primary-foreground` | `--tx-primary-hover` | 8.35:1 (needs 4.5:1, text) | Pass |
| `--tx-primary-foreground` | `--tx-primary-active` | 10.43:1 (needs 4.5:1, text) | Pass |
| `--tx-primary-foreground` | `--tx-sidebar-primary` | 6.7:1 (needs 4.5:1, text) | Pass |
| `--tx-primary-foreground` | `--tx-sidebar-primary-hover` | 8.35:1 (needs 4.5:1, text) | Pass |
| `--tx-primary-foreground` | `--tx-sidebar-primary-active` | 10.43:1 (needs 4.5:1, text) | Pass |
| `--tx-primary-soft-foreground` | `--tx-primary-soft` | 13.84:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-primary-soft` | 16.58:1 (needs 4.5:1, text) | Pass |
| `--tx-secondary-foreground` | `--tx-secondary` | 14.15:1 (needs 4.5:1, text) | Pass |
| `--tx-secondary-foreground` | `--tx-secondary-hover` | 16.33:1 (needs 4.5:1, text) | Pass |
| `--tx-secondary-foreground` | `--tx-secondary-active` | 16.32:1 (needs 4.5:1, text) | Pass |
| `--tx-accent-foreground` | `--tx-accent` | 15.03:1 (needs 4.5:1, text) | Pass |
| `--tx-accent-foreground` | `--tx-accent-hover` | 17.11:1 (needs 4.5:1, text) | Pass |
| `--tx-accent-foreground` | `--tx-accent-active` | 17.11:1 (needs 4.5:1, text) | Pass |
| `--tx-destructive-foreground` | `--tx-destructive` | 5.38:1 (needs 4.5:1, text) | Pass |
| `--tx-destructive-foreground` | `--tx-destructive-hover` | 6.68:1 (needs 4.5:1, text) | Pass |
| `--tx-destructive-foreground` | `--tx-destructive-active` | 8.19:1 (needs 4.5:1, text) | Pass |
| `--tx-destructive-soft-foreground` | `--tx-destructive-soft` | 13.93:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-destructive-soft` | 16.58:1 (needs 4.5:1, text) | Pass |
| `--tx-success-foreground` | `--tx-success` | 5.13:1 (needs 4.5:1, text) | Pass |
| `--tx-success-foreground` | `--tx-success-hover` | 6.41:1 (needs 4.5:1, text) | Pass |
| `--tx-success-foreground` | `--tx-success-active` | 7.97:1 (needs 4.5:1, text) | Pass |
| `--tx-success-soft-foreground` | `--tx-success-soft` | 13.19:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-success-soft` | 16.88:1 (needs 4.5:1, text) | Pass |
| `--tx-warning-foreground` | `--tx-warning` | 5.11:1 (needs 4.5:1, text) | Pass |
| `--tx-warning-foreground` | `--tx-warning-hover` | 6.3:1 (needs 4.5:1, text) | Pass |
| `--tx-warning-foreground` | `--tx-warning-active` | 7.82:1 (needs 4.5:1, text) | Pass |
| `--tx-warning-soft-foreground` | `--tx-warning-soft` | 13.45:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-warning-soft` | 16.64:1 (needs 4.5:1, text) | Pass |
| `--tx-info-foreground` | `--tx-info` | 5.06:1 (needs 4.5:1, text) | Pass |
| `--tx-info-foreground` | `--tx-info-hover` | 6.29:1 (needs 4.5:1, text) | Pass |
| `--tx-info-foreground` | `--tx-info-active` | 7.8:1 (needs 4.5:1, text) | Pass |
| `--tx-info-soft-foreground` | `--tx-info-soft` | 13.36:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-info-soft` | 16.62:1 (needs 4.5:1, text) | Pass |
| `--tx-sidebar-foreground` | `--tx-sidebar` | 14.39:1 (needs 4.5:1, text) | Pass |
| `--tx-link` | `--tx-background` | 6.14:1 (needs 4.5:1, text) | Pass |
| `--tx-link` | `--tx-surface` | 6.23:1 (needs 4.5:1, text) | Pass |
| `--tx-link` | `--tx-muted` | 5.7:1 (needs 4.5:1, text) | Pass |
| `--tx-link` | `--tx-elevated` | 6.23:1 (needs 4.5:1, text) | Pass |
| `--tx-link-visited` | `--tx-background` | 7.82:1 (needs 4.5:1, text) | Pass |
| `--tx-link-visited` | `--tx-surface` | 7.92:1 (needs 4.5:1, text) | Pass |
| `--tx-link-visited` | `--tx-muted` | 7.25:1 (needs 4.5:1, text) | Pass |
| `--tx-link-visited` | `--tx-elevated` | 7.92:1 (needs 4.5:1, text) | Pass |
| `--tx-selection-foreground` | `--tx-selection` | 11.74:1 (needs 4.5:1, text) | Pass |
| `--tx-border-strong` | `--tx-background` | 3.01:1 (needs 3:1, ui) | Pass |
| `--tx-border-strong` | `--tx-surface` | 3.05:1 (needs 3:1, ui) | Pass |
| `--tx-input` | `--tx-background` | 3.53:1 (needs 3:1, ui) | Pass |
| `--tx-input` | `--tx-surface` | 3.57:1 (needs 3:1, ui) | Pass |
| `--tx-ring` | `--tx-background` | 6.52:1 (needs 3:1, focus) | Pass |
| `--tx-ring` | `--tx-surface` | 6.6:1 (needs 3:1, focus) | Pass |
| `--tx-status-success-foreground` | `--tx-status-success` | 5.13:1 (needs 4.5:1, text) | Pass |
| `--tx-status-success-soft-foreground` | `--tx-status-success-soft` | 13.19:1 (needs 4.5:1, text) | Pass |
| `--tx-status-warning-foreground` | `--tx-status-warning` | 5.11:1 (needs 4.5:1, text) | Pass |
| `--tx-status-warning-soft-foreground` | `--tx-status-warning-soft` | 13.45:1 (needs 4.5:1, text) | Pass |
| `--tx-status-danger-foreground` | `--tx-status-danger` | 5.38:1 (needs 4.5:1, text) | Pass |
| `--tx-status-danger-soft-foreground` | `--tx-status-danger-soft` | 13.93:1 (needs 4.5:1, text) | Pass |
| `--tx-status-info-foreground` | `--tx-status-info` | 5.06:1 (needs 4.5:1, text) | Pass |
| `--tx-status-info-soft-foreground` | `--tx-status-info-soft` | 13.36:1 (needs 4.5:1, text) | Pass |
| `--tx-status-neutral-foreground` | `--tx-status-neutral` | 14.15:1 (needs 4.5:1, text) | Pass |
| `--tx-status-neutral-soft-foreground` | `--tx-status-neutral-soft` | 5.42:1 (needs 4.5:1, text) | Pass |

Dark

| Foreground | Background | Ratio | Result |
| --- | --- | --- | --- |
| `--tx-foreground` | `--tx-canvas` | 18.63:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-background` | 18.1:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-surface` | 16.68:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-elevated` | 14.69:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-muted` | 14.69:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-subtle` | 12.57:1 (needs 4.5:1, text) | Pass |
| `--tx-surface-foreground` | `--tx-surface` | 16.68:1 (needs 4.5:1, text) | Pass |
| `--tx-elevated-foreground` | `--tx-elevated` | 14.69:1 (needs 4.5:1, text) | Pass |
| `--tx-muted-foreground` | `--tx-background` | 7.95:1 (needs 4.5:1, text) | Pass |
| `--tx-muted-foreground` | `--tx-surface` | 7.32:1 (needs 4.5:1, text) | Pass |
| `--tx-muted-foreground` | `--tx-muted` | 6.45:1 (needs 4.5:1, text) | Pass |
| `--tx-muted-foreground` | `--tx-elevated` | 6.45:1 (needs 4.5:1, text) | Pass |
| `--tx-subtle-foreground` | `--tx-background` | 10.55:1 (needs 4.5:1, text) | Pass |
| `--tx-subtle-foreground` | `--tx-subtle` | 7.32:1 (needs 4.5:1, text) | Pass |
| `--tx-primary-foreground` | `--tx-primary` | 5.67:1 (needs 4.5:1, text) | Pass |
| `--tx-primary-foreground` | `--tx-primary-hover` | 6.96:1 (needs 4.5:1, text) | Pass |
| `--tx-primary-foreground` | `--tx-primary-active` | 8.43:1 (needs 4.5:1, text) | Pass |
| `--tx-primary-foreground` | `--tx-sidebar-primary` | 5.67:1 (needs 4.5:1, text) | Pass |
| `--tx-primary-foreground` | `--tx-sidebar-primary-hover` | 6.96:1 (needs 4.5:1, text) | Pass |
| `--tx-primary-foreground` | `--tx-sidebar-primary-active` | 8.43:1 (needs 4.5:1, text) | Pass |
| `--tx-primary-soft-foreground` | `--tx-primary-soft` | 12.14:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-primary-soft` | 16.03:1 (needs 4.5:1, text) | Pass |
| `--tx-secondary-foreground` | `--tx-secondary` | 11.82:1 (needs 4.5:1, text) | Pass |
| `--tx-secondary-foreground` | `--tx-secondary-hover` | 13.96:1 (needs 4.5:1, text) | Pass |
| `--tx-secondary-foreground` | `--tx-secondary-active` | 15.76:1 (needs 4.5:1, text) | Pass |
| `--tx-accent-foreground` | `--tx-accent` | 13.13:1 (needs 4.5:1, text) | Pass |
| `--tx-accent-foreground` | `--tx-accent-hover` | 15.05:1 (needs 4.5:1, text) | Pass |
| `--tx-accent-foreground` | `--tx-accent-active` | 16.63:1 (needs 4.5:1, text) | Pass |
| `--tx-destructive-foreground` | `--tx-destructive` | 6.8:1 (needs 4.5:1, text) | Pass |
| `--tx-destructive-foreground` | `--tx-destructive-hover` | 8.37:1 (needs 4.5:1, text) | Pass |
| `--tx-destructive-foreground` | `--tx-destructive-active` | 10.1:1 (needs 4.5:1, text) | Pass |
| `--tx-destructive-soft-foreground` | `--tx-destructive-soft` | 12.08:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-destructive-soft` | 16.33:1 (needs 4.5:1, text) | Pass |
| `--tx-success-foreground` | `--tx-success` | 7.89:1 (needs 4.5:1, text) | Pass |
| `--tx-success-foreground` | `--tx-success-hover` | 9.42:1 (needs 4.5:1, text) | Pass |
| `--tx-success-foreground` | `--tx-success-active` | 11.26:1 (needs 4.5:1, text) | Pass |
| `--tx-success-soft-foreground` | `--tx-success-soft` | 12.36:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-success-soft` | 15.64:1 (needs 4.5:1, text) | Pass |
| `--tx-warning-foreground` | `--tx-warning` | 7.26:1 (needs 4.5:1, text) | Pass |
| `--tx-warning-foreground` | `--tx-warning-hover` | 8.77:1 (needs 4.5:1, text) | Pass |
| `--tx-warning-foreground` | `--tx-warning-active` | 10.43:1 (needs 4.5:1, text) | Pass |
| `--tx-warning-soft-foreground` | `--tx-warning-soft` | 11.93:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-warning-soft` | 15.9:1 (needs 4.5:1, text) | Pass |
| `--tx-info-foreground` | `--tx-info` | 7.43:1 (needs 4.5:1, text) | Pass |
| `--tx-info-foreground` | `--tx-info-hover` | 8.92:1 (needs 4.5:1, text) | Pass |
| `--tx-info-foreground` | `--tx-info-active` | 10.65:1 (needs 4.5:1, text) | Pass |
| `--tx-info-soft-foreground` | `--tx-info-soft` | 12.11:1 (needs 4.5:1, text) | Pass |
| `--tx-foreground` | `--tx-info-soft` | 15.94:1 (needs 4.5:1, text) | Pass |
| `--tx-sidebar-foreground` | `--tx-sidebar` | 15.29:1 (needs 4.5:1, text) | Pass |
| `--tx-link` | `--tx-background` | 8.76:1 (needs 4.5:1, text) | Pass |
| `--tx-link` | `--tx-surface` | 8.07:1 (needs 4.5:1, text) | Pass |
| `--tx-link` | `--tx-muted` | 7.11:1 (needs 4.5:1, text) | Pass |
| `--tx-link` | `--tx-elevated` | 7.11:1 (needs 4.5:1, text) | Pass |
| `--tx-link-visited` | `--tx-background` | 9.3:1 (needs 4.5:1, text) | Pass |
| `--tx-link-visited` | `--tx-surface` | 8.57:1 (needs 4.5:1, text) | Pass |
| `--tx-link-visited` | `--tx-muted` | 7.55:1 (needs 4.5:1, text) | Pass |
| `--tx-link-visited` | `--tx-elevated` | 7.55:1 (needs 4.5:1, text) | Pass |
| `--tx-selection-foreground` | `--tx-selection` | 8.76:1 (needs 4.5:1, text) | Pass |
| `--tx-border-strong` | `--tx-background` | 5:1 (needs 3:1, ui) | Pass |
| `--tx-border-strong` | `--tx-surface` | 4.6:1 (needs 3:1, ui) | Pass |
| `--tx-input` | `--tx-background` | 4.04:1 (needs 3:1, ui) | Pass |
| `--tx-input` | `--tx-surface` | 3.73:1 (needs 3:1, ui) | Pass |
| `--tx-ring` | `--tx-background` | 3.35:1 (needs 3:1, focus) | Pass |
| `--tx-ring` | `--tx-surface` | 3.08:1 (needs 3:1, focus) | Pass |
| `--tx-status-success-foreground` | `--tx-status-success` | 7.89:1 (needs 4.5:1, text) | Pass |
| `--tx-status-success-soft-foreground` | `--tx-status-success-soft` | 12.36:1 (needs 4.5:1, text) | Pass |
| `--tx-status-warning-foreground` | `--tx-status-warning` | 7.26:1 (needs 4.5:1, text) | Pass |
| `--tx-status-warning-soft-foreground` | `--tx-status-warning-soft` | 11.93:1 (needs 4.5:1, text) | Pass |
| `--tx-status-danger-foreground` | `--tx-status-danger` | 6.8:1 (needs 4.5:1, text) | Pass |
| `--tx-status-danger-soft-foreground` | `--tx-status-danger-soft` | 12.08:1 (needs 4.5:1, text) | Pass |
| `--tx-status-info-foreground` | `--tx-status-info` | 7.43:1 (needs 4.5:1, text) | Pass |
| `--tx-status-info-soft-foreground` | `--tx-status-info-soft` | 12.11:1 (needs 4.5:1, text) | Pass |
| `--tx-status-neutral-foreground` | `--tx-status-neutral` | 11.82:1 (needs 4.5:1, text) | Pass |
| `--tx-status-neutral-soft-foreground` | `--tx-status-neutral-soft` | 6.45:1 (needs 4.5:1, text) | Pass |

- `--tx-size-control-xs`: 28 px (needs 24 px), Pass
- `--tx-size-control-sm`: 32 px (needs 24 px), Pass
- `--tx-size-control-md`: 36 px (needs 24 px), Pass
- `--tx-size-control-lg`: 44 px (needs 24 px), Pass

### Voice and rules

#### Identity

Name

Ledgerline

Description

A fictional finance back office: dense tables, crisp edges and a high-contrast variant for long sessions.

Owner

Ledgerline Platform (fictional)

License

MIT

Tags

enterprise, dense, example

#### Tone

- precise
- neutral

#### Lexicon

| Term | Preferred |
| --- | --- |
| workspace | ledger |

#### Guidelines

- Lead with the number.
- Name the period every figure covers.

#### Accessibility

Contrast

AA

Minimum target

24

Focus

ring

#### Locked-mode rules

Locked · 3 components allowed

draft

In locked mode, layout utilities only, on the token scale: display, flex, grid, gap, padding, margin, size, position and overflow. Color, typography, radius, shadow, opacity, filters, transforms, transitions and arbitrary values are not allowed. The checker owns the exact list.

### Components

3 components allowed by this design system.

forms (1)

#### Button `button`

Light

| Variant / size | sm | md | lg | icon |
| --- | --- | --- | --- | --- |
| default | default · sm · default | default · md · default | default · lg · default | default · icon · default |
| secondary | secondary · sm · default | secondary · md · default | secondary · lg · default | secondary · icon · default |
| outline | outline · sm · default | outline · md · default | outline · lg · default | outline · icon · default |
| ghost | ghost · sm · default | ghost · md · default | ghost · lg · default | ghost · icon · default |
| destructive | destructive · sm · default | destructive · md · default | destructive · lg · default | destructive · icon · default |
| link | link · sm · default | link · md · default | link · lg · default | link · icon · default |

 default · md · default · disabled

default · md · default · disabled

default · md · default · loading

default · md · default · loading

default · md · destructive

default · md · destructive

default · md · success

default · md · success

default · md · warning

default · md · warning

 default · md · default

Hover, focus or press this sample (hover, focus-visible)

Dark

| Variant / size | sm | md | lg | icon |
| --- | --- | --- | --- | --- |
| default | default · sm · default | default · md · default | default · lg · default | default · icon · default |
| secondary | secondary · sm · default | secondary · md · default | secondary · lg · default | secondary · icon · default |
| outline | outline · sm · default | outline · md · default | outline · lg · default | outline · icon · default |
| ghost | ghost · sm · default | ghost · md · default | ghost · lg · default | ghost · icon · default |
| destructive | destructive · sm · default | destructive · md · default | destructive · lg · default | destructive · icon · default |
| link | link · sm · default | link · md · default | link · lg · default | link · icon · default |

 default · md · default · disabled

default · md · default · disabled

default · md · default · loading

default · md · default · loading

default · md · destructive

default · md · destructive

default · md · success

default · md · success

default · md · warning

default · md · warning

 default · md · default

Hover, focus or press this sample (hover, focus-visible)

display (1)

#### Card `card`

Light

 elevated

elevated

flat

flat

 elevated

Hover, focus or press this sample (hover, focus-visible)

Dark

 elevated

elevated

flat

flat

 elevated

Hover, focus or press this sample (hover, focus-visible)

forms (1)

#### Input `input`

Light

| Variant / size | control | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | display |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| default | default · control | default · xs | default · sm | default · md | default · lg | default · xl | default · 2xl | default · 3xl | default · 4xl | default · display |
| plain | plain · control | plain · xs | plain · sm | plain · md | plain · lg | plain · xl | plain · 2xl | plain · 3xl | plain · 4xl | plain · display |

 default · control · disabled

default · control · disabled

default · control · invalid

default · control · invalid

default · control · readonly

default · control · readonly

 default · control

Hover, focus or press this sample (hover, focus-visible)

Dark

| Variant / size | control | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | display |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| default | default · control | default · xs | default · sm | default · md | default · lg | default · xl | default · 2xl | default · 3xl | default · 4xl | default · display |
| plain | plain · control | plain · xs | plain · sm | plain · md | plain · lg | plain · xl | plain · 2xl | plain · 3xl | plain · 4xl | plain · display |

 default · control · disabled

default · control · disabled

default · control · invalid

default · control · invalid

default · control · readonly

default · control · readonly

 default · control

Hover, focus or press this sample (hover, focus-visible)

#### Not in this design system (196)

- `accordion`
- `action-form`
- `alert`
- `alert-dialog`
- `analytics-grid`
- `app-nav`
- `avatar`
- `avatar-group-grid`
- `badge`
- `banner`
- `blocks-code`
- `blocks-data`
- `blocks-diagram`
- `blocks-embed`
- `blocks-interactive`
- `blocks-map`
- `blocks-media`
- `blocks-structure`
- `blocks-text`
- `bottom-nav`
- `box`
- `breadcrumb`
- `button-group`
- `callout`
- `canvas`
- `carousel`
- `charts-area`
- `charts-bar`
- `charts-bubble`
- `charts-bullet`
- `charts-canvas-renderer`
- `charts-cartesian`
- `charts-combo`
- `charts-donut`
- `charts-funnel`
- `charts-gauge`
- `charts-geo-map`
- `charts-geo-point-map`
- `charts-heatmap`
- `charts-line`
- `charts-network`
- `charts-pie`
- `charts-progress-ring`
- `charts-sankey`
- `charts-scatter`
- `charts-sparkline`
- `charts-stacked-bar`
- `charts-sunburst`
- `charts-treemap`
- `chat-message`
- `chat-thread`
- `checkbox`
- `chip`
- `code`
- `code-field`
- `color-swatch`
- `combobox`
- `command-palette`
- `composer`
- `content-layout`
- `context-menu`
- `context-menu-trigger`
- `control-choice`
- `control-filter`
- `control-slider`
- `control-toggle`
- `data-board`
- `data-calendar`
- `data-cohort-table`
- `data-dashboard`
- `data-dashboard-widget`
- `data-files`
- `data-filter-builder`
- `data-grid`
- `data-map`
- `data-notification-inbox`
- `data-timeline`
- `data-tree-view`
- `data-virtual-list`
- `deck-slide`
- `description`
- `detail-panel`
- `dialog`
- `document`
- `drawer`
- `dropdown-menu`
- `dropdown-menu-content`
- `dropdown-menu-item`
- `dropdown-menu-trigger`
- `empty-state`
- `error-state`
- `field`
- `field-error`
- `file-upload`
- `flow-action`
- `flow-view`
- `form`
- `form-field`
- `form-submit`
- `heading`
- `host-region`
- `hover-card`
- `hover-card-content`
- `icon`
- `icon-button`
- `inline-text`
- `input-group`
- `kbd`
- `kpi`
- `label`
- `layout-auth-split`
- `layout-blog`
- `layout-card`
- `layout-chrome`
- `layout-dashboard-grid`
- `layout-deck`
- `layout-doc`
- `layout-docs`
- `layout-drawer`
- `layout-dual-sidebar`
- `layout-editorial`
- `layout-grid`
- `layout-host`
- `layout-landing`
- `layout-marketing`
- `layout-page`
- `layout-pricing`
- `layout-row`
- `layout-settings`
- `layout-sidebar`
- `layout-split`
- `layout-stack`
- `layout-tile`
- `layout-top-nav`
- `layout-wizard`
- `link`
- `list`
- `list-item`
- `mark`
- `media-composition-canvas`
- `media-composition-svg`
- `media-image`
- `menubar`
- `menubar-trigger`
- `mobile-app-frame`
- `mobile-header`
- `multi-select`
- `nav-icon`
- `navigation-menu`
- `number-field`
- `pagination`
- `pin-input`
- `popover`
- `popover-content`
- `progress`
- `prose`
- `radio`
- `radio-group`
- `rating`
- `responsive-modal`
- `schema-form`
- `screen-outlet`
- `select`
- `select-content`
- `select-group`
- `select-item`
- `select-label`
- `select-portal`
- `select-separator`
- `select-trigger`
- `select-value`
- `select-viewport`
- `separator`
- `sheet`
- `sidebar`
- `skeleton`
- `sortable-list`
- `spinner`
- `split-view`
- `spreadsheet`
- `stat`
- `stepper`
- `switch`
- `table`
- `tabs`
- `tag`
- `tags-input`
- `text`
- `text-counter`
- `textarea`
- `time-field`
- `timeline`
- `toaster`
- `toggle-group`
- `tooltip`
- `workflow-graph`

### Library

#### KPI strip0.1.0

Not approved

Id

`kpi-strip`

Purpose

A row of figures for the day's ledger.

Status

draft

Composes

- `card` (allowed) - `button` (allowed)

Preview supplied by the consumer: the code lives in the consumer design-systems folder.