Card

Card variants

Select a frame or text to edit its styles.

9 combinations

Outlined

Elevated

Filled

Interaction & state previews

Try keyboard and pointer behavior here. Disabled, loading and radius examples inherit the same recipes; they are not separate style scopes.

Make something great

Good design starts with a few thoughtful details.

Shape the details.Keep the whole system in view.

Space to explore

Your next idea starts right here.

Give your next idea a place to grow.Carry it through every detail.

Filled, small

A quieter surface for secondary content.

Start with a foundation.Make it your own.

Independent slots

Instance values; shared tokens unchanged.

Local content spacing.Each slot remains independent.

Use this system in your project

Download your tokens, then run these commands in an existing React 19 project. The CLI installs editable React and CSS Modules sources.

1. Save bambiui-tokens.json in your project. 2. Run the CLI commands below. 3. Follow the generated stylesheet and ThemeScope setup.

The JSON download includes both themes and saved tokens, never Playground props. The CLI reads it locally and never uploads your system. Without --system, init uses the default system.

Registry: . Imports and package-manager installation remain explicit. Distributed software is MIT licensed; Studio remains private.

Manual source ZIP (fallback)

Components, CSS Modules, both themes and a populated example from saved System sample defaults. Temporary Preview options are excluded. A detached system snapshot—not a Project backup. CLI sources retain their React API defaults.

Bind application behavior in your host. Optional Google Fonts remain remote. MIT license and scope notice are included; user-authored designs are not relicensed.

React usage

Examples from snippets.ts. Imports refer to this project; this is not a published component package.

import { Button, Card } from "@/app/studio/components";
import { Icon } from "@/app/studio/icons";

export function Example() {
  return (
    <>
      <Card>
        <Card.Icon>
          <Icon name="spark" />
        </Card.Icon>
        <Card.Header>
          <Card.Title>Make something great</Card.Title>
          <Card.Description>
            Good design starts with a few thoughtful details.
          </Card.Description>
        </Card.Header>
      </Card>

      <Card variant="elevated" size="lg">
        <Card.Icon>
          <Icon name="plus" />
        </Card.Icon>
        <Card.Header>
          <Card.Title>Space to explore</Card.Title>
          <Card.Description>Your next idea starts right here.</Card.Description>
        </Card.Header>
        <Card.Content>Give your next idea a place to grow.</Card.Content>
        <Card.Footer>
          <Button size="sm">Start</Button>
          <Button size="sm" variant="ghost">
            Later
          </Button>
        </Card.Footer>
      </Card>

      <Card variant="filled" size="sm">
        <Card.Header>
          <Card.Title>Filled, small</Card.Title>
          <Card.Description>
            A quieter surface for secondary content.
          </Card.Description>
        </Card.Header>
      </Card>

      {/* Card slots each accept appearance; Card has no parts object. */}
      <Card appearance={{ paddingTop: 20, paddingRight: 24, paddingBottom: 16, paddingLeft: 12, borderTopLeftRadius: 24, shadow: "md" }}>
        <Card.Header appearance={{ gap: 12, paddingBottom: 4 }}>
          <Card.Title appearance={{ fontSize: 22, fontWeight: 650 }}>Independent slots</Card.Title>
          <Card.Description appearance={{ lineHeight: 1.8 }}>Instance values leave shared tokens unchanged.</Card.Description>
        </Card.Header>
        <Card.Content appearance={{ gap: 20, paddingTop: 8 }}>Local content spacing.</Card.Content>
        <Card.Footer appearance={{ gap: 16, marginTop: 4 }}><Button>Continue</Button></Card.Footer>
      </Card>
    </>
  );
}

Props and defaults

Wrapper API from the component sources and docs/component-api.md. A dash means no wrapper default; inherited Base UI defaults are identified separately. These are React API defaults, separate from saved System sample defaults and temporary Preview options.

Card prop reference
Prop	Type	Default	Behavior
`variant`	`"outlined" \| "elevated" \| "filled"`	`"outlined"`	Surface treatment.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Shared size scale; density for Card.
`radius`	`"sm" \| "md" \| "lg"`	`omitted (global md by default)`	Selects the shared sm/md/lg radius token. Omit to preserve a historical numeric component override.
`children`	`ReactNode`	`—`	Component content.
`className`	`string`	`—`	Applied to the root; the field wrapper for labelled controls.
`appearance`	`NodeAppearance`	`omitted`	Theme-independent instance values on the painted element. Supplied values win over native style, exact recipes and shared System Styles; omitted values inherit. These are not new CSS tokens.

Also accepts native article props. Compose Card.Icon (span), Card.Header (div), Card.Title (strong, not a heading), Card.Description (p), Card.Content (div) and Card.Footer (div). Each part accepts its native element props. No tone prop is defined.

Saved sample defaults — export reference

These are saved System sample defaults, not React API defaults or shared styles. The matrix uses these unless you change temporary Preview options. Preview options are session-only: they never enter System CSS/JSON, the manual ZIP or CLI output. Project editing and insertion-default authoring are paused; existing saved values are preserved.

The populated Card ZIP example includes Header with Title and Description, Content with Text, and Footer with Button. Slot copy comes from saved Card defaults; nested Text and Button use their own saved defaults. Layout primitives remain empty.

Card saved sample defaults
Parameter	Source	Value
Variant `props.variant`	Built-in starter	`"outlined"`
Size `props.size`	Built-in starter	`"md"`
Radius preset `props.radius`	Built-in starter	`omitted`
Title `slots.title`	Built-in starter	`"Project overview"`
Description `slots.description`	Built-in starter	`"Keep your ideas and next steps in one place."`
Content `slots.content`	Built-in starter	`"Add details, organize your work, and share progress with your team."`
Action label `slots.action`	Built-in starter	`"Get started"`

The manual ZIP populated example uses this saved snapshot. The CLI copies component sources with their unchanged React API defaults; it does not rewrite those defaults. Optional omitted props retain their component behavior.

Exact component recipes — authored fields

System Styles edits a matrix combination and layer, not temporary Preview content. This component has 9 exact recipes; the full catalog has 294. Each stored recipe applies to matching variant/state, tone where supported, and size. Studio writes non-color edits to every supported combination at the selected size and layer; Text retains its typographic variant and shares across tones. Colors stay on the selected combination and theme. Other sizes and layers are unchanged. Existing differences are preserved until the field is edited or reset. Preview options do not select the matrix edit scope, rewrite saved defaults or change exports.

Frame edits geometry, spacing, fill, decorative border and effects; Text edits typography and ink. They share a part record but never an editable field. Only authored, CSS-consumed fields in the light theme are listed below, not unset fields or generated box/state helpers.

Per property: local appearance / field parts → native style → exact recipe → legacy shared part style → component variant/state, theme tokens and parent inheritance. Studio reset removes each field in its editing group: same-size layer non-colors across supported combinations, or the selected combination color. The exact declarations below each restore their own fallback, not a snapshot. A transparent recipe surface reveals its parent rather than the older fill. No recipe can replace the global accessible focus outline.

Root, Header, Title, Description, Content, Footer and Icon use the enclosing Card’s exact variant/size. Title inherits Header ink; Description retains variant-derived ink unless overridden. Content/Footer Text recipes scope all six typography/ink fields to nested Text and Button/Badge labels, ahead of those children’s own recipes and shared styles. Legacy shared slot typography does not enter that scope. Child local typography wins over slot-local typography, then the Card slot recipe; a nested Card starts a new scope. Slot backgrounds remain behind child surfaces; a Button’s own fill is still its text background. Icon Text exposes only mark ink.

Part scopes: root (Card) — frame; header (Header) — frame; title (Title) — frame + text; description (Description) — frame + text; content (Content) — frame + text; footer (Footer) — frame + text; icon (Icon) — frame + text.

No authored recipe fields in this theme — component CSS fallbacks remain active.

Lengths use px; fontWeight, lineHeight and opacity are unitless; shadows reference the shared presets. Non-color fields are shared across Light and Dark, normalized from Light on import including omissions. Colors remain theme-specific. CSS export clears omitted Dark declarations so sparse Light colors do not leak.

Unedited defaults retain 150 modeled contrast pairs per theme. Recipe diagnostics add only affected opaque text, marks, painted borders and parent-surface focus pairs, including modeled Card Content/Footer children. Geometry/type-only edits do not expand the audit; opacity, local overrides and arbitrary nesting are not certified. Passing these pairs is not a blanket WCAG claim.

Shared component part styles

Legacy shared part styles apply across combinations to linked existing components as well as new insertions. Exact matrix recipes override these defaults per field. Colors belong to the light theme; dimensions, typography, spacing, border widths, opacity and shadow presets are shared across Light and Dark. Local appearance and field parts still win for the properties they supply.

Only consumed, editable metadata fields are listed. An unset variable uses the component CSS default, which can depend on variant, state, size, tone and parent inheritance; it is not a materialized token value. Generated box/alignment helpers are implementation details, not editable styles. Root/control variant paint stays in the separate variant and state reference.

Card `root`

Card · Card
Field / CSS variable	Scope	Source	CSS declaration
Width `--card-part-root-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Height `--card-part-root-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Min width `--card-part-root-min-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Min height `--card-part-root-min-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Max width `--card-part-root-max-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding top `--card-part-root-padding-top`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding right `--card-part-root-padding-right`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding bottom `--card-part-root-padding-bottom`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding left `--card-part-root-padding-left`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin top `--card-part-root-margin-top`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin right `--card-part-root-margin-right`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin bottom `--card-part-root-margin-bottom`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin left `--card-part-root-margin-left`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Top Left radius `--card-part-root-border-top-left-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Top Right radius `--card-part-root-border-top-right-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Bottom Right radius `--card-part-root-border-bottom-right-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Bottom Left radius `--card-part-root-border-bottom-left-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Font size `--card-part-root-font-size`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Font weight `--card-part-root-font-weight`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Line height `--card-part-root-line-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Letter spacing `--card-part-root-letter-spacing`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Text align `--card-part-root-text-align`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Gap `--card-part-root-gap`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Opacity `--card-part-root-opacity`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback

Header `header`

Card · Header
Field / CSS variable	Scope	Source	CSS declaration
Width `--card-part-header-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Height `--card-part-header-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Min width `--card-part-header-min-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Min height `--card-part-header-min-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Max width `--card-part-header-max-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding top `--card-part-header-padding-top`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding right `--card-part-header-padding-right`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding bottom `--card-part-header-padding-bottom`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding left `--card-part-header-padding-left`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin top `--card-part-header-margin-top`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin right `--card-part-header-margin-right`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin bottom `--card-part-header-margin-bottom`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin left `--card-part-header-margin-left`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Top Left radius `--card-part-header-border-top-left-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Top Right radius `--card-part-header-border-top-right-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Bottom Right radius `--card-part-header-border-bottom-right-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Bottom Left radius `--card-part-header-border-bottom-left-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Font size `--card-part-header-font-size`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Font weight `--card-part-header-font-weight`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Line height `--card-part-header-line-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Letter spacing `--card-part-header-letter-spacing`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Text align `--card-part-header-text-align`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Gap `--card-part-header-gap`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Background `--card-part-header-background`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Color `--card-part-header-color`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Border color `--card-part-header-border-color`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Border width `--card-part-header-border-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Shadow `--card-part-header-shadow`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Opacity `--card-part-header-opacity`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback

Title `title`

Card · Title
Field / CSS variable	Scope	Source	CSS declaration
Width `--card-part-title-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Height `--card-part-title-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Min width `--card-part-title-min-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Min height `--card-part-title-min-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Max width `--card-part-title-max-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding top `--card-part-title-padding-top`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding right `--card-part-title-padding-right`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding bottom `--card-part-title-padding-bottom`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding left `--card-part-title-padding-left`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin top `--card-part-title-margin-top`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin right `--card-part-title-margin-right`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin bottom `--card-part-title-margin-bottom`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin left `--card-part-title-margin-left`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Top Left radius `--card-part-title-border-top-left-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Top Right radius `--card-part-title-border-top-right-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Bottom Right radius `--card-part-title-border-bottom-right-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Bottom Left radius `--card-part-title-border-bottom-left-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Font size `--card-part-title-font-size`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Font weight `--card-part-title-font-weight`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Line height `--card-part-title-line-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Letter spacing `--card-part-title-letter-spacing`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Text align `--card-part-title-text-align`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Background `--card-part-title-background`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Color `--card-part-title-color`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Border color `--card-part-title-border-color`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Border width `--card-part-title-border-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Shadow `--card-part-title-shadow`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Opacity `--card-part-title-opacity`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback

Description `description`

Card · Description
Field / CSS variable	Scope	Source	CSS declaration
Width `--card-part-description-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Height `--card-part-description-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Min width `--card-part-description-min-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Min height `--card-part-description-min-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Max width `--card-part-description-max-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding top `--card-part-description-padding-top`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding right `--card-part-description-padding-right`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding bottom `--card-part-description-padding-bottom`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding left `--card-part-description-padding-left`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin top `--card-part-description-margin-top`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin right `--card-part-description-margin-right`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin bottom `--card-part-description-margin-bottom`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin left `--card-part-description-margin-left`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Top Left radius `--card-part-description-border-top-left-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Top Right radius `--card-part-description-border-top-right-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Bottom Right radius `--card-part-description-border-bottom-right-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Bottom Left radius `--card-part-description-border-bottom-left-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Font size `--card-part-description-font-size`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Font weight `--card-part-description-font-weight`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Line height `--card-part-description-line-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Letter spacing `--card-part-description-letter-spacing`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Text align `--card-part-description-text-align`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Background `--card-part-description-background`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Color `--card-part-description-color`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Border color `--card-part-description-border-color`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Border width `--card-part-description-border-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Shadow `--card-part-description-shadow`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Opacity `--card-part-description-opacity`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback

Content `content`

Card · Content
Field / CSS variable	Scope	Source	CSS declaration
Width `--card-part-content-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Height `--card-part-content-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Min width `--card-part-content-min-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Min height `--card-part-content-min-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Max width `--card-part-content-max-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding top `--card-part-content-padding-top`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding right `--card-part-content-padding-right`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding bottom `--card-part-content-padding-bottom`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding left `--card-part-content-padding-left`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin top `--card-part-content-margin-top`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin right `--card-part-content-margin-right`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin bottom `--card-part-content-margin-bottom`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin left `--card-part-content-margin-left`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Top Left radius `--card-part-content-border-top-left-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Top Right radius `--card-part-content-border-top-right-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Bottom Right radius `--card-part-content-border-bottom-right-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Bottom Left radius `--card-part-content-border-bottom-left-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Font size `--card-part-content-font-size`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Font weight `--card-part-content-font-weight`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Line height `--card-part-content-line-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Letter spacing `--card-part-content-letter-spacing`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Text align `--card-part-content-text-align`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Gap `--card-part-content-gap`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Background `--card-part-content-background`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Color `--card-part-content-color`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Border color `--card-part-content-border-color`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Border width `--card-part-content-border-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Shadow `--card-part-content-shadow`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Opacity `--card-part-content-opacity`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback

Footer `footer`

Card · Footer
Field / CSS variable	Scope	Source	CSS declaration
Width `--card-part-footer-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Height `--card-part-footer-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Min width `--card-part-footer-min-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Min height `--card-part-footer-min-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Max width `--card-part-footer-max-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding top `--card-part-footer-padding-top`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding right `--card-part-footer-padding-right`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding bottom `--card-part-footer-padding-bottom`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding left `--card-part-footer-padding-left`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin top `--card-part-footer-margin-top`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin right `--card-part-footer-margin-right`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin bottom `--card-part-footer-margin-bottom`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin left `--card-part-footer-margin-left`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Top Left radius `--card-part-footer-border-top-left-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Top Right radius `--card-part-footer-border-top-right-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Bottom Right radius `--card-part-footer-border-bottom-right-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Bottom Left radius `--card-part-footer-border-bottom-left-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Font size `--card-part-footer-font-size`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Font weight `--card-part-footer-font-weight`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Line height `--card-part-footer-line-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Letter spacing `--card-part-footer-letter-spacing`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Text align `--card-part-footer-text-align`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Gap `--card-part-footer-gap`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Background `--card-part-footer-background`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Color `--card-part-footer-color`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Border color `--card-part-footer-border-color`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Border width `--card-part-footer-border-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Shadow `--card-part-footer-shadow`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Opacity `--card-part-footer-opacity`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback

Icon `icon`

Card · Icon
Field / CSS variable	Scope	Source	CSS declaration
Width `--card-part-icon-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Height `--card-part-icon-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Min width `--card-part-icon-min-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Min height `--card-part-icon-min-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Max width `--card-part-icon-max-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding top `--card-part-icon-padding-top`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding right `--card-part-icon-padding-right`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding bottom `--card-part-icon-padding-bottom`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Padding left `--card-part-icon-padding-left`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin top `--card-part-icon-margin-top`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin right `--card-part-icon-margin-right`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin bottom `--card-part-icon-margin-bottom`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Margin left `--card-part-icon-margin-left`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Top Left radius `--card-part-icon-border-top-left-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Top Right radius `--card-part-icon-border-top-right-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Bottom Right radius `--card-part-icon-border-bottom-right-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Bottom Left radius `--card-part-icon-border-bottom-left-radius`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Font size `--card-part-icon-font-size`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Font weight `--card-part-icon-font-weight`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Line height `--card-part-icon-line-height`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Letter spacing `--card-part-icon-letter-spacing`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Text align `--card-part-icon-text-align`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Background `--card-part-icon-background`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Color `--card-part-icon-color`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Border color `--card-part-icon-border-color`	light theme color	Inherited CSS default	Not declared — component CSS fallback
Border width `--card-part-icon-border-width`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Shadow `--card-part-icon-shadow`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback
Opacity `--card-part-icon-opacity`	Shared dimension / effect	Inherited CSS default	Not declared — component CSS fallback

Reset removes an authored key to restore its CSS fallback, not a fixed copy of today’s value. Lengths use px; fontWeight, lineHeight and opacity are unitless. CSS export resets omitted Dark variables to initial where necessary, so Light’s sparse overrides cannot leak into Dark.

The contrast audit models opaque field-part, Card-slot and Text colors. Legacy shared Card Content/Footer typography styles the slot itself, not nested Text or Button/Badge labels; exact Card recipes have the descendant scope described above. The audit does not certify local appearance, opacity compositing, arbitrary nested/external surfaces, shadows or focus geometry. Review the rendered composition in both themes.

Radius presets

radius="sm | md | lg" resolves --card-radius-{preset}-{size}-{corner}, then the shared --ds-radius-{preset} step. Recipe and shared-part corners style only the default shape (radius omitted); local appearance still wins. Shared by Light and Dark.

card radius preset variables
Preset · size	CSS variable	Resolved value
sm · sm · topLeft	`--card-radius-sm-sm-top-left`	`4px` · from `--ds-radius-sm`
sm · sm · topRight	`--card-radius-sm-sm-top-right`	`4px` · from `--ds-radius-sm`
sm · sm · bottomRight	`--card-radius-sm-sm-bottom-right`	`4px` · from `--ds-radius-sm`
sm · sm · bottomLeft	`--card-radius-sm-sm-bottom-left`	`4px` · from `--ds-radius-sm`
sm · md · topLeft	`--card-radius-sm-md-top-left`	`4px` · from `--ds-radius-sm`
sm · md · topRight	`--card-radius-sm-md-top-right`	`4px` · from `--ds-radius-sm`
sm · md · bottomRight	`--card-radius-sm-md-bottom-right`	`4px` · from `--ds-radius-sm`
sm · md · bottomLeft	`--card-radius-sm-md-bottom-left`	`4px` · from `--ds-radius-sm`
sm · lg · topLeft	`--card-radius-sm-lg-top-left`	`4px` · from `--ds-radius-sm`
sm · lg · topRight	`--card-radius-sm-lg-top-right`	`4px` · from `--ds-radius-sm`
sm · lg · bottomRight	`--card-radius-sm-lg-bottom-right`	`4px` · from `--ds-radius-sm`
sm · lg · bottomLeft	`--card-radius-sm-lg-bottom-left`	`4px` · from `--ds-radius-sm`
md · sm · topLeft	`--card-radius-md-sm-top-left`	`8px` · from `--ds-radius-md`
md · sm · topRight	`--card-radius-md-sm-top-right`	`8px` · from `--ds-radius-md`
md · sm · bottomRight	`--card-radius-md-sm-bottom-right`	`8px` · from `--ds-radius-md`
md · sm · bottomLeft	`--card-radius-md-sm-bottom-left`	`8px` · from `--ds-radius-md`
md · md · topLeft	`--card-radius-md-md-top-left`	`8px` · from `--ds-radius-md`
md · md · topRight	`--card-radius-md-md-top-right`	`8px` · from `--ds-radius-md`
md · md · bottomRight	`--card-radius-md-md-bottom-right`	`8px` · from `--ds-radius-md`
md · md · bottomLeft	`--card-radius-md-md-bottom-left`	`8px` · from `--ds-radius-md`
md · lg · topLeft	`--card-radius-md-lg-top-left`	`8px` · from `--ds-radius-md`
md · lg · topRight	`--card-radius-md-lg-top-right`	`8px` · from `--ds-radius-md`
md · lg · bottomRight	`--card-radius-md-lg-bottom-right`	`8px` · from `--ds-radius-md`
md · lg · bottomLeft	`--card-radius-md-lg-bottom-left`	`8px` · from `--ds-radius-md`
lg · sm · topLeft	`--card-radius-lg-sm-top-left`	`12px` · from `--ds-radius-lg`
lg · sm · topRight	`--card-radius-lg-sm-top-right`	`12px` · from `--ds-radius-lg`
lg · sm · bottomRight	`--card-radius-lg-sm-bottom-right`	`12px` · from `--ds-radius-lg`
lg · sm · bottomLeft	`--card-radius-lg-sm-bottom-left`	`12px` · from `--ds-radius-lg`
lg · md · topLeft	`--card-radius-lg-md-top-left`	`12px` · from `--ds-radius-lg`
lg · md · topRight	`--card-radius-lg-md-top-right`	`12px` · from `--ds-radius-lg`
lg · md · bottomRight	`--card-radius-lg-md-bottom-right`	`12px` · from `--ds-radius-lg`
lg · md · bottomLeft	`--card-radius-lg-md-bottom-left`	`12px` · from `--ds-radius-lg`
lg · lg · topLeft	`--card-radius-lg-lg-top-left`	`12px` · from `--ds-radius-lg`
lg · lg · topRight	`--card-radius-lg-lg-top-right`	`12px` · from `--ds-radius-lg`
lg · lg · bottomRight	`--card-radius-lg-lg-bottom-right`	`12px` · from `--ds-radius-lg`
lg · lg · bottomLeft	`--card-radius-lg-lg-bottom-left`	`12px` · from `--ds-radius-lg`

Local instance appearance (not tokens)

appearance overrides only this instance, taking precedence over System Styles. It targets the Input shell, Switch track, Checkbox box, or the component root. Unset values keep their shared part, theme, variant and state inheritance. Lengths are pixels; lineHeight is unitless. Colors are six-digit hex (background and borderColor also accept transparent); shadow uses the existing none/sm/md/lg presets.

Consumed primary fields: width, height, minWidth, minHeight, maxWidth, paddingTop, paddingRight, paddingBottom, paddingLeft, marginTop, marginRight, marginBottom, marginLeft, borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, fontSize, fontWeight, lineHeight, letterSpacing, textAlign, gap, background, color, borderColor, borderWidth, shadow, opacity.

Set appearance separately on Card.Header, Card.Title, Card.Description, Card.Content and Card.Footer. They are independent page nodes, not entries in a Card parts object.

width/height accept a finite number, hug or fill; minWidth/minHeight are numeric and maxWidth also accepts fill. Hug means fit-content width or auto height. Fill is 100% of the containing block, not flex-grow.

Reset by omitting a React appearance key; page-document update commands use null to reset a field, part or entire override object. Values are stored in the page and copied into TSX, not exported as new theme CSS variables. Local colors and opacity can fail contrast even when the token audit passes; review both themes. Decorative borders and shadows never replace the shared focus outline.

Token inheritance

Live base aliases for this component. Overrides replace inheritance, even when equal to the global value. Variants, tones, sizes and states may use additional tokens; these are not computed element styles.

Card base token aliases
Alias CSS name	Source	Resolved value
`--card-background`	Inherited: `--ds-background`	`#fff8f6`
`--card-foreground`	Inherited: `--ds-foreground`	`#201916`
`--card-border`	Inherited: `--ds-border`	`#8e8480`
`--card-radius`	Inherited: `--ds-radius`	`8px`
`--card-padding-x`	Inherited: `--ds-padding-x`	`16px`
`--card-padding-y`	Inherited: `--ds-padding-y`	`10px`
`--card-gap`	Inherited: `--ds-gap`	`8px`
`--card-margin`	Inherited: `--ds-margin`	`0px`
`--card-font-size`	Inherited: `--ds-font-size`	`14px`
`--card-border-width`	Inherited: `--ds-border-width`	`1px`

Variant and state styles

These are the resolved CSS variables consumed by this component. Sparse color overrides are theme-specific; border widths and shadow presets are shared across Light and Dark. Unset colors inherit from component or global tokens, or use the documented derived color.

Card resolved variant styles
CSS variable	Source	Resolved value
`--card-variant-outlined-background`	Inherited / derived	`#fff8f6`
`--card-variant-outlined-foreground`	Inherited / derived	`#201916`
`--card-variant-outlined-border`	Inherited / derived	`#8e8480`
`--card-variant-outlined-border-width`	Shared default	`1px`
`--card-variant-outlined-shadow`	Shared default	`none`
`--card-variant-outlined-description`	Inherited / derived	`#635c59`
`--card-variant-elevated-background`	Inherited / derived	`#fff8f6`
`--card-variant-elevated-foreground`	Inherited / derived	`#201916`
`--card-variant-elevated-border`	Inherited / derived	`transparent`
`--card-variant-elevated-border-width`	Shared default	`1px`
`--card-variant-elevated-shadow`	Shared default	`var(--ds-shadow-lg)`
`--card-variant-elevated-description`	Inherited / derived	`#635c59`
`--card-variant-filled-background`	Inherited / derived	`#fff4f1`
`--card-variant-filled-foreground`	Inherited / derived	`#201916`
`--card-variant-filled-border`	Inherited / derived	`transparent`
`--card-variant-filled-border-width`	Shared default	`1px`
`--card-variant-filled-shadow`	Shared default	`none`
`--card-variant-filled-description`	Inherited / derived	`#635b58`

Derived colors and system constants

Computed from the light theme’s current values; these are not manual component overrides.

light runtime variables
CSS variable	Value
`--card-description`	`#635c59`
`--card-filled-description`	`#635b58`

CSS variable export

Both themes, including aliases, derived state colors and system constants. Light is the root default; set data-ds-theme="dark" on your theme container for dark mode. Component markup and style rules are not included.

Show full-system CSS variables

:root, [data-ds-theme="light"] {
  color-scheme: light;
  --ds-size-scale-sm: 0.875;
  --ds-size-scale-lg: 1.125;
  --ds-icon-size: 1.15em;
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 3px;
  --ds-state-pressed-offset: 1px;
  --ds-state-disabled-opacity: 0.4;
  --ds-text-muted-mix: 70%;
  --ds-button-font-weight: 500;
  --ds-button-line-height: 1.35;
  --ds-field-label-font-weight: 500;
  --ds-field-helper-font-size: 0.86em;
  --ds-field-helper-line-height: 1.45;
  --ds-input-line-height: 1.4;
  --ds-badge-line-height: 1.2;
  --ds-card-title-font-weight: 550;
  --ds-card-title-letter-spacing: -0.02em;
  --ds-card-description-line-height: 1.65;
  --ds-shadow-sm: 0 1px 2px #00000014;
  --ds-shadow-md: 0 4px 12px #00000018;
  --ds-shadow-lg: 0 8px 24px #27272a1f;
  --ds-shadow-elevated: 0 8px 24px #27272a0c;
  --ds-transition-duration: 150ms;
  --ds-control-inset: 2px;
  --ds-switch-thumb-shadow: 0 1px 2px #00000029;
  --ds-checkbox-inset: 6px;
  --ds-spinner-duration: 800ms;
  --ds-card-icon-border-width: 1px;
  --ds-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-background: #fff8f6;
  --ds-foreground: #201916;
  --ds-muted: #fff4f1;
  --ds-muted-foreground: #796f6c;
  --ds-border: #8e8480;
  --ds-primary: #e8673c;
  --ds-on-primary: #291b15;
  --ds-secondary: #81711d;
  --ds-on-secondary: #ffffff;
  --ds-success: #1c822b;
  --ds-on-success: #ffffff;
  --ds-warning: #946900;
  --ds-on-warning: #ffffff;
  --ds-danger: #bb4441;
  --ds-on-danger: #ffffff;
  --ds-info: #2671c9;
  --ds-on-info: #ffffff;
  --ds-radius: 8px;
  --ds-radius-sm: 4px;
  --ds-radius-lg: 12px;
  --ds-padding-x: 16px;
  --ds-padding-y: 10px;
  --ds-gap: 8px;
  --ds-margin: 0px;
  --ds-spacing-sm: 4px;
  --ds-spacing-md: 8px;
  --ds-spacing-lg: 16px;
  --ds-font-size: 14px;
  --ds-border-width: 1px;
  --ds-control-height-sm: 32px;
  --ds-control-height-md: 36px;
  --ds-control-height-lg: 44px;
  --ds-neutral-50: #fff9f6;
  --ds-neutral-100: #f6ece8;
  --ds-neutral-200: #e6dcd7;
  --ds-neutral-300: #d2c8c4;
  --ds-neutral-400: #b8afab;
  --ds-neutral-500: #9f9692;
  --ds-neutral-600: #877e7a;
  --ds-neutral-700: #706763;
  --ds-neutral-800: #59504d;
  --ds-neutral-900: #433b38;
  --ds-neutral-1000: #120c09;
  --ds-primary-50: #fff8f6;
  --ds-primary-100: #ffe9e2;
  --ds-primary-200: #ffd3c4;
  --ds-primary-300: #ffb69f;
  --ds-primary-400: #ff8d68;
  --ds-primary-500: #ed6c41;
  --ds-primary-600: #d15225;
  --ds-primary-700: #b43900;
  --ds-primary-800: #902b00;
  --ds-primary-900: #6d1f00;
  --ds-primary-1000: #1f0400;
  --ds-secondary-50: #fffbe5;
  --ds-secondary-100: #fff0a6;
  --ds-secondary-200: #f0df8f;
  --ds-secondary-300: #dccc7c;
  --ds-secondary-400: #c2b263;
  --ds-secondary-500: #a9994a;
  --ds-secondary-600: #908030;
  --ds-secondary-700: #796910;
  --ds-secondary-800: #605200;
  --ds-secondary-900: #483d00;
  --ds-secondary-1000: #110d00;
  --ds-success-50: #f0fff0;
  --ds-success-100: #caffca;
  --ds-success-200: #99f99d;
  --ds-success-300: #86e58a;
  --ds-success-400: #6cca71;
  --ds-success-500: #52b059;
  --ds-success-600: #379740;
  --ds-success-700: #167e27;
  --ds-success-800: #006517;
  --ds-success-900: #004b0f;
  --ds-success-1000: #001201;
  --ds-warning-50: #fff9f0;
  --ds-warning-100: #ffeccc;
  --ds-warning-200: #ffd895;
  --ds-warning-300: #f1c270;
  --ds-warning-400: #d7a956;
  --ds-warning-500: #bd903c;
  --ds-warning-600: #a3781e;
  --ds-warning-700: #896100;
  --ds-warning-800: #6c4c00;
  --ds-warning-900: #513800;
  --ds-warning-1000: #150b00;
  --ds-danger-50: #fff8f8;
  --ds-danger-100: #ffe9e6;
  --ds-danger-200: #ffd1cd;
  --ds-danger-300: #ffb5ae;
  --ds-danger-400: #ff8a82;
  --ds-danger-500: #e86d66;
  --ds-danger-600: #cc544f;
  --ds-danger-700: #b03a38;
  --ds-danger-800: #951e22;
  --ds-danger-900: #78000e;
  --ds-danger-1000: #220001;
  --ds-info-50: #f7faff;
  --ds-info-100: #e4f0ff;
  --ds-info-200: #c9e0ff;
  --ds-info-300: #a7ceff;
  --ds-info-400: #79b4ff;
  --ds-info-500: #509af5;
  --ds-info-600: #3780da;
  --ds-info-700: #1b68bf;
  --ds-info-800: #0050a0;
  --ds-info-900: #003b79;
  --ds-info-1000: #000d23;
  --ds-typography-heading-font-size: 32px;
  --ds-typography-heading-line-height: 1.2;
  --ds-typography-heading-font-weight: 700;
  --ds-typography-heading-letter-spacing: -0.5px;
  --ds-typography-h1-font-size: 48px;
  --ds-typography-h1-line-height: 1.1;
  --ds-typography-h1-font-weight: 700;
  --ds-typography-h1-letter-spacing: -1px;
  --ds-typography-h2-font-size: 40px;
  --ds-typography-h2-line-height: 1.15;
  --ds-typography-h2-font-weight: 700;
  --ds-typography-h2-letter-spacing: -0.75px;
  --ds-typography-h3-font-size: 32px;
  --ds-typography-h3-line-height: 1.2;
  --ds-typography-h3-font-weight: 700;
  --ds-typography-h3-letter-spacing: -0.5px;
  --ds-typography-h4-font-size: 28px;
  --ds-typography-h4-line-height: 1.25;
  --ds-typography-h4-font-weight: 600;
  --ds-typography-h4-letter-spacing: -0.35px;
  --ds-typography-h5-font-size: 24px;
  --ds-typography-h5-line-height: 1.3;
  --ds-typography-h5-font-weight: 600;
  --ds-typography-h5-letter-spacing: -0.25px;
  --ds-typography-h6-font-size: 20px;
  --ds-typography-h6-line-height: 1.35;
  --ds-typography-h6-font-weight: 600;
  --ds-typography-h6-letter-spacing: 0px;
  --ds-typography-paragraph-font-size: 16px;
  --ds-typography-paragraph-line-height: 1.5;
  --ds-typography-paragraph-font-weight: 400;
  --ds-typography-paragraph-letter-spacing: 0px;
  --ds-typography-label-font-size: 14px;
  --ds-typography-label-line-height: 1.4;
  --ds-typography-label-font-weight: 500;
  --ds-typography-label-letter-spacing: 0px;
  --ds-typography-caption-font-size: 12px;
  --ds-typography-caption-line-height: 1.4;
  --ds-typography-caption-font-weight: 400;
  --ds-typography-caption-letter-spacing: 0px;
  --button-background: var(--ds-primary);
  --button-foreground: var(--ds-on-primary);
  --button-border: var(--ds-border);
  --button-radius: var(--ds-radius);
  --button-padding-x: var(--ds-padding-x);
  --button-padding-y: var(--ds-padding-y);
  --button-gap: var(--ds-gap);
  --button-margin: var(--ds-margin);
  --button-font-size: var(--ds-font-size);
  --button-border-width: var(--ds-border-width);
  --input-background: var(--ds-background);
  --input-foreground: var(--ds-foreground);
  --input-border: var(--ds-border);
  --input-radius: var(--ds-radius);
  --input-padding-x: var(--ds-padding-x);
  --input-padding-y: var(--ds-padding-y);
  --input-gap: var(--ds-gap);
  --input-margin: var(--ds-margin);
  --input-font-size: var(--ds-font-size);
  --input-border-width: var(--ds-border-width);
  --card-background: var(--ds-background);
  --card-foreground: var(--ds-foreground);
  --card-border: var(--ds-border);
  --card-radius: var(--ds-radius);
  --card-padding-x: var(--ds-padding-x);
  --card-padding-y: var(--ds-padding-y);
  --card-gap: var(--ds-gap);
  --card-margin: var(--ds-margin);
  --card-font-size: var(--ds-font-size);
  --card-border-width: var(--ds-border-width);
  --badge-background: var(--ds-background);
  --badge-foreground: var(--ds-foreground);
  --badge-border: var(--ds-border);
  --badge-radius: var(--ds-radius);
  --badge-padding-x: var(--ds-padding-x);
  --badge-padding-y: var(--ds-padding-y);
  --badge-gap: var(--ds-gap);
  --badge-margin: var(--ds-margin);
  --badge-font-size: var(--ds-font-size);
  --badge-border-width: var(--ds-border-width);
  --switch-background: var(--ds-primary);
  --switch-foreground: var(--ds-on-primary);
  --switch-border: var(--ds-border);
  --switch-radius: var(--ds-radius);
  --switch-padding-x: var(--ds-padding-x);
  --switch-padding-y: var(--ds-padding-y);
  --switch-gap: var(--ds-gap);
  --switch-margin: var(--ds-margin);
  --switch-font-size: var(--ds-font-size);
  --switch-border-width: var(--ds-border-width);
  --checkbox-background: var(--ds-primary);
  --checkbox-foreground: var(--ds-on-primary);
  --checkbox-border: var(--ds-border);
  --checkbox-radius: var(--ds-radius);
  --checkbox-padding-x: var(--ds-padding-x);
  --checkbox-padding-y: var(--ds-padding-y);
  --checkbox-gap: var(--ds-gap);
  --checkbox-margin: var(--ds-margin);
  --checkbox-font-size: var(--ds-font-size);
  --checkbox-border-width: var(--ds-border-width);
  --text-background: var(--ds-background);
  --text-foreground: var(--ds-foreground);
  --text-border: var(--ds-border);
  --text-radius: var(--ds-radius);
  --text-padding-x: var(--ds-padding-x);
  --text-padding-y: var(--ds-padding-y);
  --text-gap: var(--ds-gap);
  --text-margin: var(--ds-margin);
  --text-font-size: var(--ds-font-size);
  --text-border-width: var(--ds-border-width);
  --ds-radius-md: 8px;
  --ds-primary-hover: #e6653a;
  --ds-primary-active: #e26237;
  --ds-primary-subtle: #fdeae3;
  --ds-primary-on-subtle: #a23200;
  --ds-primary-outline: #d8582c;
  --ds-primary-focus: #d8582c;
  --ds-secondary-hover: #6d5d00;
  --ds-secondary-active: #574a00;
  --ds-secondary-subtle: #f2ebe0;
  --ds-secondary-on-subtle: #6d5d00;
  --ds-secondary-outline: #978636;
  --ds-secondary-focus: #978636;
  --ds-success-hover: #00721b;
  --ds-success-active: #005b14;
  --ds-success-subtle: #e8ece2;
  --ds-success-on-subtle: #00721b;
  --ds-success-outline: #3e9d46;
  --ds-success-focus: #3e9d46;
  --ds-warning-hover: #7a5600;
  --ds-warning-active: #624400;
  --ds-warning-subtle: #f4eadd;
  --ds-warning-on-subtle: #7a5600;
  --ds-warning-outline: #aa7e26;
  --ds-warning-focus: #aa7e26;
  --ds-danger-hover: #a32d2d;
  --ds-danger-active: #8b1119;
  --ds-danger-subtle: #f8e6e4;
  --ds-danger-on-subtle: #a32d2d;
  --ds-danger-outline: #d35a55;
  --ds-danger-focus: #d35a55;
  --ds-info-hover: #075cb2;
  --ds-info-active: #004891;
  --ds-info-subtle: #e9ebf2;
  --ds-info-on-subtle: #075cb2;
  --ds-info-outline: #3d87e1;
  --ds-info-focus: #3d87e1;
  --button-variant-primary-background: #e8673c;
  --button-variant-primary-foreground: #291b15;
  --button-variant-primary-border: #8e8480;
  --button-variant-primary-border-width: 1px;
  --button-variant-primary-shadow: none;
  --button-variant-primary-hover-background: #e6653a;
  --button-variant-primary-active-background: #e26237;
  --button-variant-secondary-background: #81711d;
  --button-variant-secondary-foreground: #ffffff;
  --button-variant-secondary-border: #81711d;
  --button-variant-secondary-border-width: 1px;
  --button-variant-secondary-shadow: none;
  --button-variant-secondary-hover-background: #6d5d00;
  --button-variant-secondary-active-background: #574a00;
  --button-variant-outline-background: transparent;
  --button-variant-outline-foreground: #201916;
  --button-variant-outline-border: #8e8480;
  --button-variant-outline-border-width: 1px;
  --button-variant-outline-shadow: none;
  --button-variant-outline-hover-background: #fff4f1;
  --button-variant-outline-active-background: #fff4f1;
  --button-variant-ghost-background: transparent;
  --button-variant-ghost-foreground: #201916;
  --button-variant-ghost-border: transparent;
  --button-variant-ghost-border-width: 1px;
  --button-variant-ghost-shadow: none;
  --button-variant-ghost-hover-background: #fff4f1;
  --button-variant-ghost-active-background: #fff4f1;
  --button-variant-destructive-background: #bb4441;
  --button-variant-destructive-foreground: #ffffff;
  --button-variant-destructive-border: #bb4441;
  --button-variant-destructive-border-width: 1px;
  --button-variant-destructive-shadow: none;
  --button-variant-destructive-hover-background: #a32d2d;
  --button-variant-destructive-active-background: #8b1119;
  --button-variant-link-background: transparent;
  --button-variant-link-foreground: #a23200;
  --button-variant-link-border: transparent;
  --button-variant-link-border-width: 1px;
  --button-variant-link-shadow: none;
  --button-variant-link-hover-background: #fff4f1;
  --button-variant-link-active-background: #fff4f1;
  --button-hover: #e6653a;
  --button-active: #e26237;
  --input-variant-default-background: #fff8f6;
  --input-variant-default-foreground: #201916;
  --input-variant-default-border: #8e8480;
  --input-variant-default-border-width: 1px;
  --input-variant-default-shadow: none;
  --input-variant-hover-background: #fff8f6;
  --input-variant-hover-foreground: #201916;
  --input-variant-hover-border: #8e8480;
  --input-variant-hover-border-width: 1px;
  --input-variant-hover-shadow: none;
  --input-variant-invalid-background: #fff8f6;
  --input-variant-invalid-foreground: #201916;
  --input-variant-invalid-border: #bb4441;
  --input-variant-invalid-border-width: 1px;
  --input-variant-invalid-shadow: none;
  --input-variant-readonly-background: #fff8f6;
  --input-variant-readonly-foreground: #201916;
  --input-variant-readonly-border: #8e8480;
  --input-variant-readonly-border-width: 1px;
  --input-variant-readonly-shadow: none;
  --switch-variant-checked-background: #e8673c;
  --switch-variant-checked-foreground: #291b15;
  --switch-variant-checked-border: #8e8480;
  --switch-variant-checked-border-width: 1px;
  --switch-variant-checked-shadow: none;
  --switch-variant-unchecked-background: #fff4f1;
  --switch-variant-unchecked-foreground: #201916;
  --switch-variant-unchecked-border: #8e8480;
  --switch-variant-unchecked-border-width: 1px;
  --switch-variant-unchecked-shadow: none;
  --switch-variant-invalid-checked-background: #e8673c;
  --switch-variant-invalid-checked-foreground: #291b15;
  --switch-variant-invalid-checked-border: #d35a55;
  --switch-variant-invalid-checked-border-width: 1px;
  --switch-variant-invalid-checked-shadow: none;
  --switch-variant-invalid-unchecked-background: #fff4f1;
  --switch-variant-invalid-unchecked-foreground: #201916;
  --switch-variant-invalid-unchecked-border: #d35a55;
  --switch-variant-invalid-unchecked-border-width: 1px;
  --switch-variant-invalid-unchecked-shadow: none;
  --checkbox-variant-checked-background: #e8673c;
  --checkbox-variant-checked-foreground: #291b15;
  --checkbox-variant-checked-border: #8e8480;
  --checkbox-variant-checked-border-width: 1px;
  --checkbox-variant-checked-shadow: none;
  --checkbox-variant-unchecked-background: #fff4f1;
  --checkbox-variant-unchecked-foreground: #201916;
  --checkbox-variant-unchecked-border: #8e8480;
  --checkbox-variant-unchecked-border-width: 1px;
  --checkbox-variant-unchecked-shadow: none;
  --checkbox-variant-invalid-checked-background: #e8673c;
  --checkbox-variant-invalid-checked-foreground: #291b15;
  --checkbox-variant-invalid-checked-border: #d35a55;
  --checkbox-variant-invalid-checked-border-width: 1px;
  --checkbox-variant-invalid-checked-shadow: none;
  --checkbox-variant-invalid-unchecked-background: #fff4f1;
  --checkbox-variant-invalid-unchecked-foreground: #201916;
  --checkbox-variant-invalid-unchecked-border: #d35a55;
  --checkbox-variant-invalid-unchecked-border-width: 1px;
  --checkbox-variant-invalid-unchecked-shadow: none;
  --badge-neutral-subtle: #e9e2e0;
  --badge-neutral-on-subtle: #645c58;
  --badge-neutral-outline: #8d8480;
  --badge-variant-solid-neutral-background: #201916;
  --badge-variant-solid-neutral-foreground: #fff8f6;
  --badge-variant-solid-neutral-border: #201916;
  --badge-variant-solid-neutral-border-width: 1px;
  --badge-variant-solid-neutral-shadow: none;
  --badge-variant-solid-neutral-subtle: #e9e2e0;
  --badge-variant-solid-neutral-on-subtle: #645c58;
  --badge-variant-solid-neutral-outline: #201916;
  --badge-variant-subtle-neutral-background: #e9e2e0;
  --badge-variant-subtle-neutral-foreground: #645c58;
  --badge-variant-subtle-neutral-border: transparent;
  --badge-variant-subtle-neutral-border-width: 1px;
  --badge-variant-subtle-neutral-shadow: none;
  --badge-variant-subtle-neutral-subtle: #e9e2e0;
  --badge-variant-subtle-neutral-on-subtle: #645c58;
  --badge-variant-subtle-neutral-outline: transparent;
  --badge-variant-outline-neutral-background: #fff8f6;
  --badge-variant-outline-neutral-foreground: #645c58;
  --badge-variant-outline-neutral-border: #8d8480;
  --badge-variant-outline-neutral-border-width: 1px;
  --badge-variant-outline-neutral-shadow: none;
  --badge-variant-outline-neutral-subtle: #e9e2e0;
  --badge-variant-outline-neutral-on-subtle: #645c58;
  --badge-variant-outline-neutral-outline: #8d8480;
  --badge-primary-subtle: #fdeae3;
  --badge-primary-on-subtle: #a23200;
  --badge-primary-outline: #d8582c;
  --badge-variant-solid-primary-background: #e8673c;
  --badge-variant-solid-primary-foreground: #291b15;
  --badge-variant-solid-primary-border: #e8673c;
  --badge-variant-solid-primary-border-width: 1px;
  --badge-variant-solid-primary-shadow: none;
  --badge-variant-solid-primary-subtle: #fdeae3;
  --badge-variant-solid-primary-on-subtle: #a23200;
  --badge-variant-solid-primary-outline: #e8673c;
  --badge-variant-subtle-primary-background: #fdeae3;
  --badge-variant-subtle-primary-foreground: #a23200;
  --badge-variant-subtle-primary-border: transparent;
  --badge-variant-subtle-primary-border-width: 1px;
  --badge-variant-subtle-primary-shadow: none;
  --badge-variant-subtle-primary-subtle: #fdeae3;
  --badge-variant-subtle-primary-on-subtle: #a23200;
  --badge-variant-subtle-primary-outline: transparent;
  --badge-variant-outline-primary-background: #fff8f6;
  --badge-variant-outline-primary-foreground: #a23200;
  --badge-variant-outline-primary-border: #d8582c;
  --badge-variant-outline-primary-border-width: 1px;
  --badge-variant-outline-primary-shadow: none;
  --badge-variant-outline-primary-subtle: #fdeae3;
  --badge-variant-outline-primary-on-subtle: #a23200;
  --badge-variant-outline-primary-outline: #d8582c;
  --badge-success-subtle: #e8ece2;
  --badge-success-on-subtle: #00721b;
  --badge-success-outline: #3e9d46;
  --badge-variant-solid-success-background: #1c822b;
  --badge-variant-solid-success-foreground: #ffffff;
  --badge-variant-solid-success-border: #1c822b;
  --badge-variant-solid-success-border-width: 1px;
  --badge-variant-solid-success-shadow: none;
  --badge-variant-solid-success-subtle: #e8ece2;
  --badge-variant-solid-success-on-subtle: #00721b;
  --badge-variant-solid-success-outline: #1c822b;
  --badge-variant-subtle-success-background: #e8ece2;
  --badge-variant-subtle-success-foreground: #00721b;
  --badge-variant-subtle-success-border: transparent;
  --badge-variant-subtle-success-border-width: 1px;
  --badge-variant-subtle-success-shadow: none;
  --badge-variant-subtle-success-subtle: #e8ece2;
  --badge-variant-subtle-success-on-subtle: #00721b;
  --badge-variant-subtle-success-outline: transparent;
  --badge-variant-outline-success-background: #fff8f6;
  --badge-variant-outline-success-foreground: #00721b;
  --badge-variant-outline-success-border: #3e9d46;
  --badge-variant-outline-success-border-width: 1px;
  --badge-variant-outline-success-shadow: none;
  --badge-variant-outline-success-subtle: #e8ece2;
  --badge-variant-outline-success-on-subtle: #00721b;
  --badge-variant-outline-success-outline: #3e9d46;
  --badge-warning-subtle: #f4eadd;
  --badge-warning-on-subtle: #7a5600;
  --badge-warning-outline: #aa7e26;
  --badge-variant-solid-warning-background: #946900;
  --badge-variant-solid-warning-foreground: #ffffff;
  --badge-variant-solid-warning-border: #946900;
  --badge-variant-solid-warning-border-width: 1px;
  --badge-variant-solid-warning-shadow: none;
  --badge-variant-solid-warning-subtle: #f4eadd;
  --badge-variant-solid-warning-on-subtle: #7a5600;
  --badge-variant-solid-warning-outline: #946900;
  --badge-variant-subtle-warning-background: #f4eadd;
  --badge-variant-subtle-warning-foreground: #7a5600;
  --badge-variant-subtle-warning-border: transparent;
  --badge-variant-subtle-warning-border-width: 1px;
  --badge-variant-subtle-warning-shadow: none;
  --badge-variant-subtle-warning-subtle: #f4eadd;
  --badge-variant-subtle-warning-on-subtle: #7a5600;
  --badge-variant-subtle-warning-outline: transparent;
  --badge-variant-outline-warning-background: #fff8f6;
  --badge-variant-outline-warning-foreground: #7a5600;
  --badge-variant-outline-warning-border: #aa7e26;
  --badge-variant-outline-warning-border-width: 1px;
  --badge-variant-outline-warning-shadow: none;
  --badge-variant-outline-warning-subtle: #f4eadd;
  --badge-variant-outline-warning-on-subtle: #7a5600;
  --badge-variant-outline-warning-outline: #aa7e26;
  --badge-danger-subtle: #f8e6e4;
  --badge-danger-on-subtle: #a32d2d;
  --badge-danger-outline: #d35a55;
  --badge-variant-solid-danger-background: #bb4441;
  --badge-variant-solid-danger-foreground: #ffffff;
  --badge-variant-solid-danger-border: #bb4441;
  --badge-variant-solid-danger-border-width: 1px;
  --badge-variant-solid-danger-shadow: none;
  --badge-variant-solid-danger-subtle: #f8e6e4;
  --badge-variant-solid-danger-on-subtle: #a32d2d;
  --badge-variant-solid-danger-outline: #bb4441;
  --badge-variant-subtle-danger-background: #f8e6e4;
  --badge-variant-subtle-danger-foreground: #a32d2d;
  --badge-variant-subtle-danger-border: transparent;
  --badge-variant-subtle-danger-border-width: 1px;
  --badge-variant-subtle-danger-shadow: none;
  --badge-variant-subtle-danger-subtle: #f8e6e4;
  --badge-variant-subtle-danger-on-subtle: #a32d2d;
  --badge-variant-subtle-danger-outline: transparent;
  --badge-variant-outline-danger-background: #fff8f6;
  --badge-variant-outline-danger-foreground: #a32d2d;
  --badge-variant-outline-danger-border: #d35a55;
  --badge-variant-outline-danger-border-width: 1px;
  --badge-variant-outline-danger-shadow: none;
  --badge-variant-outline-danger-subtle: #f8e6e4;
  --badge-variant-outline-danger-on-subtle: #a32d2d;
  --badge-variant-outline-danger-outline: #d35a55;
  --badge-info-subtle: #e9ebf2;
  --badge-info-on-subtle: #075cb2;
  --badge-info-outline: #3d87e1;
  --badge-variant-solid-info-background: #2671c9;
  --badge-variant-solid-info-foreground: #ffffff;
  --badge-variant-solid-info-border: #2671c9;
  --badge-variant-solid-info-border-width: 1px;
  --badge-variant-solid-info-shadow: none;
  --badge-variant-solid-info-subtle: #e9ebf2;
  --badge-variant-solid-info-on-subtle: #075cb2;
  --badge-variant-solid-info-outline: #2671c9;
  --badge-variant-subtle-info-background: #e9ebf2;
  --badge-variant-subtle-info-foreground: #075cb2;
  --badge-variant-subtle-info-border: transparent;
  --badge-variant-subtle-info-border-width: 1px;
  --badge-variant-subtle-info-shadow: none;
  --badge-variant-subtle-info-subtle: #e9ebf2;
  --badge-variant-subtle-info-on-subtle: #075cb2;
  --badge-variant-subtle-info-outline: transparent;
  --badge-variant-outline-info-background: #fff8f6;
  --badge-variant-outline-info-foreground: #075cb2;
  --badge-variant-outline-info-border: #3d87e1;
  --badge-variant-outline-info-border-width: 1px;
  --badge-variant-outline-info-shadow: none;
  --badge-variant-outline-info-subtle: #e9ebf2;
  --badge-variant-outline-info-on-subtle: #075cb2;
  --badge-variant-outline-info-outline: #3d87e1;
  --card-variant-outlined-background: #fff8f6;
  --card-variant-outlined-foreground: #201916;
  --card-variant-outlined-border: #8e8480;
  --card-variant-outlined-border-width: 1px;
  --card-variant-outlined-shadow: none;
  --card-variant-outlined-description: #635c59;
  --card-variant-elevated-background: #fff8f6;
  --card-variant-elevated-foreground: #201916;
  --card-variant-elevated-border: transparent;
  --card-variant-elevated-border-width: 1px;
  --card-variant-elevated-shadow: var(--ds-shadow-lg);
  --card-variant-elevated-description: #635c59;
  --card-variant-filled-background: #fff4f1;
  --card-variant-filled-foreground: #201916;
  --card-variant-filled-border: transparent;
  --card-variant-filled-border-width: 1px;
  --card-variant-filled-shadow: none;
  --card-variant-filled-description: #635b58;
  --card-description: #635c59;
  --card-filled-description: #635b58;
}

[data-ds-theme="dark"] {
  color-scheme: dark;
  --ds-size-scale-sm: 0.875;
  --ds-size-scale-lg: 1.125;
  --ds-icon-size: 1.15em;
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 3px;
  --ds-state-pressed-offset: 1px;
  --ds-state-disabled-opacity: 0.4;
  --ds-text-muted-mix: 70%;
  --ds-button-font-weight: 500;
  --ds-button-line-height: 1.35;
  --ds-field-label-font-weight: 500;
  --ds-field-helper-font-size: 0.86em;
  --ds-field-helper-line-height: 1.45;
  --ds-input-line-height: 1.4;
  --ds-badge-line-height: 1.2;
  --ds-card-title-font-weight: 550;
  --ds-card-title-letter-spacing: -0.02em;
  --ds-card-description-line-height: 1.65;
  --ds-shadow-sm: 0 1px 2px #00000014;
  --ds-shadow-md: 0 4px 12px #00000018;
  --ds-shadow-lg: 0 8px 24px #27272a1f;
  --ds-shadow-elevated: 0 8px 24px #27272a0c;
  --ds-transition-duration: 150ms;
  --ds-control-inset: 2px;
  --ds-switch-thumb-shadow: 0 1px 2px #00000029;
  --ds-checkbox-inset: 6px;
  --ds-spinner-duration: 800ms;
  --ds-card-icon-border-width: 1px;
  --ds-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-background: #0e0706;
  --ds-foreground: #ede2de;
  --ds-muted: #201916;
  --ds-muted-foreground: #a69c98;
  --ds-border: #8e8480;
  --ds-primary: #f47247;
  --ds-on-primary: #000000;
  --ds-secondary: #af9f50;
  --ds-on-secondary: #000000;
  --ds-success: #58b75e;
  --ds-on-success: #000000;
  --ds-warning: #cd9200;
  --ds-on-warning: #000000;
  --ds-danger: #ef736c;
  --ds-on-danger: #000000;
  --ds-info: #56a0fc;
  --ds-on-info: #000000;
  --ds-radius: 8px;
  --ds-radius-sm: 4px;
  --ds-radius-lg: 12px;
  --ds-padding-x: 16px;
  --ds-padding-y: 10px;
  --ds-gap: 8px;
  --ds-margin: 0px;
  --ds-spacing-sm: 4px;
  --ds-spacing-md: 8px;
  --ds-spacing-lg: 16px;
  --ds-font-size: 14px;
  --ds-border-width: 1px;
  --ds-control-height-sm: 32px;
  --ds-control-height-md: 36px;
  --ds-control-height-lg: 44px;
  --ds-neutral-50: #fff9f6;
  --ds-neutral-100: #f7ece8;
  --ds-neutral-200: #e6dbd7;
  --ds-neutral-300: #d3c8c4;
  --ds-neutral-400: #b9aeab;
  --ds-neutral-500: #a09692;
  --ds-neutral-600: #887e7a;
  --ds-neutral-700: #706763;
  --ds-neutral-800: #59504d;
  --ds-neutral-900: #443b38;
  --ds-neutral-1000: #120b09;
  --ds-primary-50: #fff8f6;
  --ds-primary-100: #ffe9e2;
  --ds-primary-200: #ffd3c4;
  --ds-primary-300: #ffb69f;
  --ds-primary-400: #ff8d68;
  --ds-primary-500: #ed6c41;
  --ds-primary-600: #d15225;
  --ds-primary-700: #b43900;
  --ds-primary-800: #902b00;
  --ds-primary-900: #6d1f00;
  --ds-primary-1000: #1e0400;
  --ds-secondary-50: #fffbe5;
  --ds-secondary-100: #fff0a5;
  --ds-secondary-200: #f0df8f;
  --ds-secondary-300: #dccc7c;
  --ds-secondary-400: #c2b263;
  --ds-secondary-500: #a9994a;
  --ds-secondary-600: #908030;
  --ds-secondary-700: #796911;
  --ds-secondary-800: #605200;
  --ds-secondary-900: #483d00;
  --ds-secondary-1000: #110d00;
  --ds-success-50: #f0fff0;
  --ds-success-100: #caffca;
  --ds-success-200: #99f99c;
  --ds-success-300: #85e589;
  --ds-success-400: #6bca70;
  --ds-success-500: #51b058;
  --ds-success-600: #36973f;
  --ds-success-700: #157f26;
  --ds-success-800: #006517;
  --ds-success-900: #004b0e;
  --ds-success-1000: #001201;
  --ds-warning-50: #fff9f0;
  --ds-warning-100: #ffeccd;
  --ds-warning-200: #ffd896;
  --ds-warning-300: #fcbf4d;
  --ds-warning-400: #e1a52c;
  --ds-warning-500: #c58c00;
  --ds-warning-600: #a77600;
  --ds-warning-700: #896000;
  --ds-warning-800: #6d4c00;
  --ds-warning-900: #513800;
  --ds-warning-1000: #150b00;
  --ds-danger-50: #fff8f8;
  --ds-danger-100: #ffe9e6;
  --ds-danger-200: #ffd1cd;
  --ds-danger-300: #ffb5ae;
  --ds-danger-400: #ff8a82;
  --ds-danger-500: #e86d66;
  --ds-danger-600: #cc544f;
  --ds-danger-700: #b03a38;
  --ds-danger-800: #951e22;
  --ds-danger-900: #78000e;
  --ds-danger-1000: #220001;
  --ds-info-50: #f7faff;
  --ds-info-100: #e4f0ff;
  --ds-info-200: #c9e0ff;
  --ds-info-300: #a7ceff;
  --ds-info-400: #79b4ff;
  --ds-info-500: #509af5;
  --ds-info-600: #3680da;
  --ds-info-700: #1a68bf;
  --ds-info-800: #0051a0;
  --ds-info-900: #003c79;
  --ds-info-1000: #000d23;
  --ds-typography-heading-font-size: 32px;
  --ds-typography-heading-line-height: 1.2;
  --ds-typography-heading-font-weight: 700;
  --ds-typography-heading-letter-spacing: -0.5px;
  --ds-typography-h1-font-size: 48px;
  --ds-typography-h1-line-height: 1.1;
  --ds-typography-h1-font-weight: 700;
  --ds-typography-h1-letter-spacing: -1px;
  --ds-typography-h2-font-size: 40px;
  --ds-typography-h2-line-height: 1.15;
  --ds-typography-h2-font-weight: 700;
  --ds-typography-h2-letter-spacing: -0.75px;
  --ds-typography-h3-font-size: 32px;
  --ds-typography-h3-line-height: 1.2;
  --ds-typography-h3-font-weight: 700;
  --ds-typography-h3-letter-spacing: -0.5px;
  --ds-typography-h4-font-size: 28px;
  --ds-typography-h4-line-height: 1.25;
  --ds-typography-h4-font-weight: 600;
  --ds-typography-h4-letter-spacing: -0.35px;
  --ds-typography-h5-font-size: 24px;
  --ds-typography-h5-line-height: 1.3;
  --ds-typography-h5-font-weight: 600;
  --ds-typography-h5-letter-spacing: -0.25px;
  --ds-typography-h6-font-size: 20px;
  --ds-typography-h6-line-height: 1.35;
  --ds-typography-h6-font-weight: 600;
  --ds-typography-h6-letter-spacing: 0px;
  --ds-typography-paragraph-font-size: 16px;
  --ds-typography-paragraph-line-height: 1.5;
  --ds-typography-paragraph-font-weight: 400;
  --ds-typography-paragraph-letter-spacing: 0px;
  --ds-typography-label-font-size: 14px;
  --ds-typography-label-line-height: 1.4;
  --ds-typography-label-font-weight: 500;
  --ds-typography-label-letter-spacing: 0px;
  --ds-typography-caption-font-size: 12px;
  --ds-typography-caption-line-height: 1.4;
  --ds-typography-caption-font-weight: 400;
  --ds-typography-caption-letter-spacing: 0px;
  --button-background: var(--ds-primary);
  --button-foreground: var(--ds-on-primary);
  --button-border: var(--ds-border);
  --button-radius: var(--ds-radius);
  --button-padding-x: var(--ds-padding-x);
  --button-padding-y: var(--ds-padding-y);
  --button-gap: var(--ds-gap);
  --button-margin: var(--ds-margin);
  --button-font-size: var(--ds-font-size);
  --button-border-width: var(--ds-border-width);
  --input-background: var(--ds-background);
  --input-foreground: var(--ds-foreground);
  --input-border: var(--ds-border);
  --input-radius: var(--ds-radius);
  --input-padding-x: var(--ds-padding-x);
  --input-padding-y: var(--ds-padding-y);
  --input-gap: var(--ds-gap);
  --input-margin: var(--ds-margin);
  --input-font-size: var(--ds-font-size);
  --input-border-width: var(--ds-border-width);
  --card-background: var(--ds-background);
  --card-foreground: var(--ds-foreground);
  --card-border: var(--ds-border);
  --card-radius: var(--ds-radius);
  --card-padding-x: var(--ds-padding-x);
  --card-padding-y: var(--ds-padding-y);
  --card-gap: var(--ds-gap);
  --card-margin: var(--ds-margin);
  --card-font-size: var(--ds-font-size);
  --card-border-width: var(--ds-border-width);
  --badge-background: var(--ds-background);
  --badge-foreground: var(--ds-foreground);
  --badge-border: var(--ds-border);
  --badge-radius: var(--ds-radius);
  --badge-padding-x: var(--ds-padding-x);
  --badge-padding-y: var(--ds-padding-y);
  --badge-gap: var(--ds-gap);
  --badge-margin: var(--ds-margin);
  --badge-font-size: var(--ds-font-size);
  --badge-border-width: var(--ds-border-width);
  --switch-background: var(--ds-primary);
  --switch-foreground: var(--ds-on-primary);
  --switch-border: var(--ds-border);
  --switch-radius: var(--ds-radius);
  --switch-padding-x: var(--ds-padding-x);
  --switch-padding-y: var(--ds-padding-y);
  --switch-gap: var(--ds-gap);
  --switch-margin: var(--ds-margin);
  --switch-font-size: var(--ds-font-size);
  --switch-border-width: var(--ds-border-width);
  --checkbox-background: var(--ds-primary);
  --checkbox-foreground: var(--ds-on-primary);
  --checkbox-border: var(--ds-border);
  --checkbox-radius: var(--ds-radius);
  --checkbox-padding-x: var(--ds-padding-x);
  --checkbox-padding-y: var(--ds-padding-y);
  --checkbox-gap: var(--ds-gap);
  --checkbox-margin: var(--ds-margin);
  --checkbox-font-size: var(--ds-font-size);
  --checkbox-border-width: var(--ds-border-width);
  --text-background: var(--ds-background);
  --text-foreground: var(--ds-foreground);
  --text-border: var(--ds-border);
  --text-radius: var(--ds-radius);
  --text-padding-x: var(--ds-padding-x);
  --text-padding-y: var(--ds-padding-y);
  --text-gap: var(--ds-gap);
  --text-margin: var(--ds-margin);
  --text-font-size: var(--ds-font-size);
  --text-border-width: var(--ds-border-width);
  --ds-radius-md: 8px;
  --ds-primary-hover: #ff9877;
  --ds-primary-active: #ffbba5;
  --ds-primary-subtle: #371a12;
  --ds-primary-on-subtle: #ff8761;
  --ds-primary-outline: #d8582c;
  --ds-primary-focus: #d8582c;
  --ds-secondary-hover: #c8b869;
  --ds-secondary-active: #dfcf7f;
  --ds-secondary-subtle: #2b2213;
  --ds-secondary-on-subtle: #bfaf60;
  --ds-secondary-outline: #968736;
  --ds-secondary-focus: #968736;
  --ds-success-hover: #72d177;
  --ds-success-active: #89e88c;
  --ds-success-subtle: #1b2716;
  --ds-success-on-subtle: #68c76d;
  --ds-success-outline: #3d9d45;
  --ds-success-focus: #3d9d45;
  --ds-warning-hover: #e8ab35;
  --ds-warning-active: #ffc252;
  --ds-warning-subtle: #302005;
  --ds-warning-on-subtle: #dea227;
  --ds-warning-outline: #ae7c00;
  --ds-warning-focus: #ae7c00;
  --ds-danger-hover: #ff958d;
  --ds-danger-active: #ffbab3;
  --ds-danger-subtle: #371a18;
  --ds-danger-on-subtle: #ff847c;
  --ds-danger-outline: #d35a55;
  --ds-danger-focus: #d35a55;
  --ds-info-hover: #85baff;
  --ds-info-active: #add1ff;
  --ds-info-subtle: #1b2332;
  --ds-info-on-subtle: #73b1ff;
  --ds-info-outline: #3d87e1;
  --ds-info-focus: #3d87e1;
  --button-variant-primary-background: #f47247;
  --button-variant-primary-foreground: #000000;
  --button-variant-primary-border: #8e8480;
  --button-variant-primary-border-width: 1px;
  --button-variant-primary-shadow: none;
  --button-variant-primary-hover-background: #ff9877;
  --button-variant-primary-active-background: #ffbba5;
  --button-variant-secondary-background: #af9f50;
  --button-variant-secondary-foreground: #000000;
  --button-variant-secondary-border: #af9f50;
  --button-variant-secondary-border-width: 1px;
  --button-variant-secondary-shadow: none;
  --button-variant-secondary-hover-background: #c8b869;
  --button-variant-secondary-active-background: #dfcf7f;
  --button-variant-outline-background: transparent;
  --button-variant-outline-foreground: #ede2de;
  --button-variant-outline-border: #8e8480;
  --button-variant-outline-border-width: 1px;
  --button-variant-outline-shadow: none;
  --button-variant-outline-hover-background: #201916;
  --button-variant-outline-active-background: #201916;
  --button-variant-ghost-background: transparent;
  --button-variant-ghost-foreground: #ede2de;
  --button-variant-ghost-border: transparent;
  --button-variant-ghost-border-width: 1px;
  --button-variant-ghost-shadow: none;
  --button-variant-ghost-hover-background: #201916;
  --button-variant-ghost-active-background: #201916;
  --button-variant-destructive-background: #ef736c;
  --button-variant-destructive-foreground: #000000;
  --button-variant-destructive-border: #ef736c;
  --button-variant-destructive-border-width: 1px;
  --button-variant-destructive-shadow: none;
  --button-variant-destructive-hover-background: #ff958d;
  --button-variant-destructive-active-background: #ffbab3;
  --button-variant-link-background: transparent;
  --button-variant-link-foreground: #ff8761;
  --button-variant-link-border: transparent;
  --button-variant-link-border-width: 1px;
  --button-variant-link-shadow: none;
  --button-variant-link-hover-background: #201916;
  --button-variant-link-active-background: #201916;
  --button-hover: #ff9877;
  --button-active: #ffbba5;
  --input-variant-default-background: #0e0706;
  --input-variant-default-foreground: #ede2de;
  --input-variant-default-border: #8e8480;
  --input-variant-default-border-width: 1px;
  --input-variant-default-shadow: none;
  --input-variant-hover-background: #0e0706;
  --input-variant-hover-foreground: #ede2de;
  --input-variant-hover-border: #8e8480;
  --input-variant-hover-border-width: 1px;
  --input-variant-hover-shadow: none;
  --input-variant-invalid-background: #0e0706;
  --input-variant-invalid-foreground: #ede2de;
  --input-variant-invalid-border: #ef736c;
  --input-variant-invalid-border-width: 1px;
  --input-variant-invalid-shadow: none;
  --input-variant-readonly-background: #0e0706;
  --input-variant-readonly-foreground: #ede2de;
  --input-variant-readonly-border: #8e8480;
  --input-variant-readonly-border-width: 1px;
  --input-variant-readonly-shadow: none;
  --switch-variant-checked-background: #f47247;
  --switch-variant-checked-foreground: #000000;
  --switch-variant-checked-border: #8e8480;
  --switch-variant-checked-border-width: 1px;
  --switch-variant-checked-shadow: none;
  --switch-variant-unchecked-background: #201916;
  --switch-variant-unchecked-foreground: #ede2de;
  --switch-variant-unchecked-border: #8e8480;
  --switch-variant-unchecked-border-width: 1px;
  --switch-variant-unchecked-shadow: none;
  --switch-variant-invalid-checked-background: #f47247;
  --switch-variant-invalid-checked-foreground: #000000;
  --switch-variant-invalid-checked-border: #d35a55;
  --switch-variant-invalid-checked-border-width: 1px;
  --switch-variant-invalid-checked-shadow: none;
  --switch-variant-invalid-unchecked-background: #201916;
  --switch-variant-invalid-unchecked-foreground: #ede2de;
  --switch-variant-invalid-unchecked-border: #d35a55;
  --switch-variant-invalid-unchecked-border-width: 1px;
  --switch-variant-invalid-unchecked-shadow: none;
  --checkbox-variant-checked-background: #f47247;
  --checkbox-variant-checked-foreground: #000000;
  --checkbox-variant-checked-border: #8e8480;
  --checkbox-variant-checked-border-width: 1px;
  --checkbox-variant-checked-shadow: none;
  --checkbox-variant-unchecked-background: #201916;
  --checkbox-variant-unchecked-foreground: #ede2de;
  --checkbox-variant-unchecked-border: #8e8480;
  --checkbox-variant-unchecked-border-width: 1px;
  --checkbox-variant-unchecked-shadow: none;
  --checkbox-variant-invalid-checked-background: #f47247;
  --checkbox-variant-invalid-checked-foreground: #000000;
  --checkbox-variant-invalid-checked-border: #d35a55;
  --checkbox-variant-invalid-checked-border-width: 1px;
  --checkbox-variant-invalid-checked-shadow: none;
  --checkbox-variant-invalid-unchecked-background: #201916;
  --checkbox-variant-invalid-unchecked-foreground: #ede2de;
  --checkbox-variant-invalid-unchecked-border: #d35a55;
  --checkbox-variant-invalid-unchecked-border-width: 1px;
  --checkbox-variant-invalid-unchecked-shadow: none;
  --badge-neutral-subtle: #362e2d;
  --badge-neutral-on-subtle: #b6aba8;
  --badge-neutral-outline: #8e8480;
  --badge-variant-solid-neutral-background: #ede2de;
  --badge-variant-solid-neutral-foreground: #0e0706;
  --badge-variant-solid-neutral-border: #ede2de;
  --badge-variant-solid-neutral-border-width: 1px;
  --badge-variant-solid-neutral-shadow: none;
  --badge-variant-solid-neutral-subtle: #362e2d;
  --badge-variant-solid-neutral-on-subtle: #b6aba8;
  --badge-variant-solid-neutral-outline: #ede2de;
  --badge-variant-subtle-neutral-background: #362e2d;
  --badge-variant-subtle-neutral-foreground: #b6aba8;
  --badge-variant-subtle-neutral-border: transparent;
  --badge-variant-subtle-neutral-border-width: 1px;
  --badge-variant-subtle-neutral-shadow: none;
  --badge-variant-subtle-neutral-subtle: #362e2d;
  --badge-variant-subtle-neutral-on-subtle: #b6aba8;
  --badge-variant-subtle-neutral-outline: transparent;
  --badge-variant-outline-neutral-background: #0e0706;
  --badge-variant-outline-neutral-foreground: #b6aba8;
  --badge-variant-outline-neutral-border: #8e8480;
  --badge-variant-outline-neutral-border-width: 1px;
  --badge-variant-outline-neutral-shadow: none;
  --badge-variant-outline-neutral-subtle: #362e2d;
  --badge-variant-outline-neutral-on-subtle: #b6aba8;
  --badge-variant-outline-neutral-outline: #8e8480;
  --badge-primary-subtle: #371a12;
  --badge-primary-on-subtle: #ff8761;
  --badge-primary-outline: #d8582c;
  --badge-variant-solid-primary-background: #f47247;
  --badge-variant-solid-primary-foreground: #000000;
  --badge-variant-solid-primary-border: #f47247;
  --badge-variant-solid-primary-border-width: 1px;
  --badge-variant-solid-primary-shadow: none;
  --badge-variant-solid-primary-subtle: #371a12;
  --badge-variant-solid-primary-on-subtle: #ff8761;
  --badge-variant-solid-primary-outline: #f47247;
  --badge-variant-subtle-primary-background: #371a12;
  --badge-variant-subtle-primary-foreground: #ff8761;
  --badge-variant-subtle-primary-border: transparent;
  --badge-variant-subtle-primary-border-width: 1px;
  --badge-variant-subtle-primary-shadow: none;
  --badge-variant-subtle-primary-subtle: #371a12;
  --badge-variant-subtle-primary-on-subtle: #ff8761;
  --badge-variant-subtle-primary-outline: transparent;
  --badge-variant-outline-primary-background: #0e0706;
  --badge-variant-outline-primary-foreground: #ff8761;
  --badge-variant-outline-primary-border: #d8582c;
  --badge-variant-outline-primary-border-width: 1px;
  --badge-variant-outline-primary-shadow: none;
  --badge-variant-outline-primary-subtle: #371a12;
  --badge-variant-outline-primary-on-subtle: #ff8761;
  --badge-variant-outline-primary-outline: #d8582c;
  --badge-success-subtle: #1b2716;
  --badge-success-on-subtle: #68c76d;
  --badge-success-outline: #3d9d45;
  --badge-variant-solid-success-background: #58b75e;
  --badge-variant-solid-success-foreground: #000000;
  --badge-variant-solid-success-border: #58b75e;
  --badge-variant-solid-success-border-width: 1px;
  --badge-variant-solid-success-shadow: none;
  --badge-variant-solid-success-subtle: #1b2716;
  --badge-variant-solid-success-on-subtle: #68c76d;
  --badge-variant-solid-success-outline: #58b75e;
  --badge-variant-subtle-success-background: #1b2716;
  --badge-variant-subtle-success-foreground: #68c76d;
  --badge-variant-subtle-success-border: transparent;
  --badge-variant-subtle-success-border-width: 1px;
  --badge-variant-subtle-success-shadow: none;
  --badge-variant-subtle-success-subtle: #1b2716;
  --badge-variant-subtle-success-on-subtle: #68c76d;
  --badge-variant-subtle-success-outline: transparent;
  --badge-variant-outline-success-background: #0e0706;
  --badge-variant-outline-success-foreground: #68c76d;
  --badge-variant-outline-success-border: #3d9d45;
  --badge-variant-outline-success-border-width: 1px;
  --badge-variant-outline-success-shadow: none;
  --badge-variant-outline-success-subtle: #1b2716;
  --badge-variant-outline-success-on-subtle: #68c76d;
  --badge-variant-outline-success-outline: #3d9d45;
  --badge-warning-subtle: #302005;
  --badge-warning-on-subtle: #dea227;
  --badge-warning-outline: #ae7c00;
  --badge-variant-solid-warning-background: #cd9200;
  --badge-variant-solid-warning-foreground: #000000;
  --badge-variant-solid-warning-border: #cd9200;
  --badge-variant-solid-warning-border-width: 1px;
  --badge-variant-solid-warning-shadow: none;
  --badge-variant-solid-warning-subtle: #302005;
  --badge-variant-solid-warning-on-subtle: #dea227;
  --badge-variant-solid-warning-outline: #cd9200;
  --badge-variant-subtle-warning-background: #302005;
  --badge-variant-subtle-warning-foreground: #dea227;
  --badge-variant-subtle-warning-border: transparent;
  --badge-variant-subtle-warning-border-width: 1px;
  --badge-variant-subtle-warning-shadow: none;
  --badge-variant-subtle-warning-subtle: #302005;
  --badge-variant-subtle-warning-on-subtle: #dea227;
  --badge-variant-subtle-warning-outline: transparent;
  --badge-variant-outline-warning-background: #0e0706;
  --badge-variant-outline-warning-foreground: #dea227;
  --badge-variant-outline-warning-border: #ae7c00;
  --badge-variant-outline-warning-border-width: 1px;
  --badge-variant-outline-warning-shadow: none;
  --badge-variant-outline-warning-subtle: #302005;
  --badge-variant-outline-warning-on-subtle: #dea227;
  --badge-variant-outline-warning-outline: #ae7c00;
  --badge-danger-subtle: #371a18;
  --badge-danger-on-subtle: #ff847c;
  --badge-danger-outline: #d35a55;
  --badge-variant-solid-danger-background: #ef736c;
  --badge-variant-solid-danger-foreground: #000000;
  --badge-variant-solid-danger-border: #ef736c;
  --badge-variant-solid-danger-border-width: 1px;
  --badge-variant-solid-danger-shadow: none;
  --badge-variant-solid-danger-subtle: #371a18;
  --badge-variant-solid-danger-on-subtle: #ff847c;
  --badge-variant-solid-danger-outline: #ef736c;
  --badge-variant-subtle-danger-background: #371a18;
  --badge-variant-subtle-danger-foreground: #ff847c;
  --badge-variant-subtle-danger-border: transparent;
  --badge-variant-subtle-danger-border-width: 1px;
  --badge-variant-subtle-danger-shadow: none;
  --badge-variant-subtle-danger-subtle: #371a18;
  --badge-variant-subtle-danger-on-subtle: #ff847c;
  --badge-variant-subtle-danger-outline: transparent;
  --badge-variant-outline-danger-background: #0e0706;
  --badge-variant-outline-danger-foreground: #ff847c;
  --badge-variant-outline-danger-border: #d35a55;
  --badge-variant-outline-danger-border-width: 1px;
  --badge-variant-outline-danger-shadow: none;
  --badge-variant-outline-danger-subtle: #371a18;
  --badge-variant-outline-danger-on-subtle: #ff847c;
  --badge-variant-outline-danger-outline: #d35a55;
  --badge-info-subtle: #1b2332;
  --badge-info-on-subtle: #73b1ff;
  --badge-info-outline: #3d87e1;
  --badge-variant-solid-info-background: #56a0fc;
  --badge-variant-solid-info-foreground: #000000;
  --badge-variant-solid-info-border: #56a0fc;
  --badge-variant-solid-info-border-width: 1px;
  --badge-variant-solid-info-shadow: none;
  --badge-variant-solid-info-subtle: #1b2332;
  --badge-variant-solid-info-on-subtle: #73b1ff;
  --badge-variant-solid-info-outline: #56a0fc;
  --badge-variant-subtle-info-background: #1b2332;
  --badge-variant-subtle-info-foreground: #73b1ff;
  --badge-variant-subtle-info-border: transparent;
  --badge-variant-subtle-info-border-width: 1px;
  --badge-variant-subtle-info-shadow: none;
  --badge-variant-subtle-info-subtle: #1b2332;
  --badge-variant-subtle-info-on-subtle: #73b1ff;
  --badge-variant-subtle-info-outline: transparent;
  --badge-variant-outline-info-background: #0e0706;
  --badge-variant-outline-info-foreground: #73b1ff;
  --badge-variant-outline-info-border: #3d87e1;
  --badge-variant-outline-info-border-width: 1px;
  --badge-variant-outline-info-shadow: none;
  --badge-variant-outline-info-subtle: #1b2332;
  --badge-variant-outline-info-on-subtle: #73b1ff;
  --badge-variant-outline-info-outline: #3d87e1;
  --card-variant-outlined-background: #0e0706;
  --card-variant-outlined-foreground: #ede2de;
  --card-variant-outlined-border: #8e8480;
  --card-variant-outlined-border-width: 1px;
  --card-variant-outlined-shadow: none;
  --card-variant-outlined-description: #aaa09d;
  --card-variant-elevated-background: #0e0706;
  --card-variant-elevated-foreground: #ede2de;
  --card-variant-elevated-border: transparent;
  --card-variant-elevated-border-width: 1px;
  --card-variant-elevated-shadow: var(--ds-shadow-lg);
  --card-variant-elevated-description: #aaa09d;
  --card-variant-filled-background: #201916;
  --card-variant-filled-foreground: #ede2de;
  --card-variant-filled-border: transparent;
  --card-variant-filled-border-width: 1px;
  --card-variant-filled-shadow: none;
  --card-variant-filled-description: #afa6a2;
  --card-description: #aaa09d;
  --card-filled-description: #afa6a2;
}

Preset	Small	Medium	Large
scale 4px	Shared scale	Shared scale	Shared scale
scale 8px	Shared scale	Shared scale	Shared scale
scale 12px	Shared scale	Shared scale	Shared scale

Card

Outlined

Elevated

Filled

Use this system in your project

React usage

Card root

Header header

Title title

Description description

Content content

Footer footer

Icon icon