---
version: alpha
name: Clarity Workspace
description: A practical design system for a focused web application workspace.
colors:
  background: "#F8FAFC"
  foreground: "#0F172A"
  card: "#FFFFFF"
  card-foreground: "#0F172A"
  popover: "#FFFFFF"
  popover-foreground: "#0F172A"
  primary: "#2563EB"
  primary-foreground: "#FFFFFF"
  secondary: "#E2E8F0"
  secondary-foreground: "#0F172A"
  muted: "#F1F5F9"
  muted-foreground: "#475569"
  accent: "#DBEAFE"
  accent-foreground: "#1E3A8A"
  destructive: "#DC2626"
  destructive-foreground: "#FFFFFF"
  border: "#CBD5E1"
  input: "#CBD5E1"
  ring: "#2563EB"
  success: "#16A34A"
  success-foreground: "#FFFFFF"
  warning: "#D97706"
  warning-foreground: "#FFFFFF"
  info: "#0284C7"
  info-foreground: "#FFFFFF"
  sidebar: "#0F172A"
  sidebar-foreground: "#F8FAFC"
  chart1: "#2563EB"
  chart2: "#16A34A"
  chart3: "#D97706"
  chart4: "#7C3AED"
  chart5: "#DB2777"
  light-background: "#F8FAFC"
  light-foreground: "#0F172A"
  light-card: "#FFFFFF"
  light-card-foreground: "#0F172A"
  light-popover: "#FFFFFF"
  light-popover-foreground: "#0F172A"
  light-primary: "#2563EB"
  light-primary-foreground: "#FFFFFF"
  light-secondary: "#E2E8F0"
  light-secondary-foreground: "#0F172A"
  light-muted: "#F1F5F9"
  light-muted-foreground: "#475569"
  light-accent: "#DBEAFE"
  light-accent-foreground: "#1E3A8A"
  light-destructive: "#DC2626"
  light-destructive-foreground: "#FFFFFF"
  light-border: "#CBD5E1"
  light-input: "#CBD5E1"
  light-ring: "#2563EB"
  light-success: "#16A34A"
  light-success-foreground: "#FFFFFF"
  light-warning: "#D97706"
  light-warning-foreground: "#FFFFFF"
  light-info: "#0284C7"
  light-info-foreground: "#FFFFFF"
  light-sidebar: "#0F172A"
  light-sidebar-foreground: "#F8FAFC"
  light-chart1: "#2563EB"
  light-chart2: "#16A34A"
  light-chart3: "#D97706"
  light-chart4: "#7C3AED"
  light-chart5: "#DB2777"
  dark-background: "#0F172A"
  dark-foreground: "#F8FAFC"
  dark-card: "#172033"
  dark-card-foreground: "#F8FAFC"
  dark-popover: "#172033"
  dark-popover-foreground: "#F8FAFC"
  dark-primary: "#60A5FA"
  dark-primary-foreground: "#0F172A"
  dark-secondary: "#273449"
  dark-secondary-foreground: "#F8FAFC"
  dark-muted: "#1E293B"
  dark-muted-foreground: "#CBD5E1"
  dark-accent: "#1E3A8A"
  dark-accent-foreground: "#DBEAFE"
  dark-destructive: "#F87171"
  dark-destructive-foreground: "#0F172A"
  dark-border: "#334155"
  dark-input: "#475569"
  dark-ring: "#60A5FA"
  dark-success: "#4ADE80"
  dark-success-foreground: "#052E16"
  dark-warning: "#FBBF24"
  dark-warning-foreground: "#451A03"
  dark-info: "#38BDF8"
  dark-info-foreground: "#082F49"
  dark-sidebar: "#020617"
  dark-sidebar-foreground: "#E2E8F0"
  dark-chart1: "#60A5FA"
  dark-chart2: "#4ADE80"
  dark-chart3: "#FBBF24"
  dark-chart4: "#A78BFA"
  dark-chart5: "#F472B6"
typography:
  display:
    fontFamily: ui-sans-serif, system-ui, sans-serif
    fontSize: 3rem
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.03em
    fontFeature: normal
    fontVariation: normal
  h1:
    fontFamily: ui-sans-serif, system-ui, sans-serif
    fontSize: 2.25rem
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.02em
    fontFeature: normal
    fontVariation: normal
  h2:
    fontFamily: ui-sans-serif, system-ui, sans-serif
    fontSize: 1.875rem
    fontWeight: 650
    lineHeight: 1.2
    letterSpacing: -0.015em
    fontFeature: normal
    fontVariation: normal
  h3:
    fontFamily: ui-sans-serif, system-ui, sans-serif
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
    fontFeature: normal
    fontVariation: normal
  body-lg:
    fontFamily: ui-sans-serif, system-ui, sans-serif
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0em
    fontFeature: normal
    fontVariation: normal
  body-md:
    fontFamily: ui-sans-serif, system-ui, sans-serif
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0em
    fontFeature: normal
    fontVariation: normal
  body-sm:
    fontFamily: ui-sans-serif, system-ui, sans-serif
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
    fontFeature: normal
    fontVariation: normal
  label-lg:
    fontFamily: ui-sans-serif, system-ui, sans-serif
    fontSize: 0.875rem
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0em
    fontFeature: normal
    fontVariation: normal
  label-md:
    fontFamily: ui-sans-serif, system-ui, sans-serif
    fontSize: 0.75rem
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.01em
    fontFeature: normal
    fontVariation: normal
  label-sm:
    fontFamily: ui-sans-serif, system-ui, sans-serif
    fontSize: 0.625rem
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.02em
    fontFeature: normal
    fontVariation: normal
  code:
    fontFamily: ui-monospace, "SFMono-Regular", Consolas, monospace
    fontSize: 0.875rem
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0em
    fontFeature: normal
    fontVariation: normal
rounded:
  none: 0px
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  2xl: 32px
  section-gap: 24px
  card-padding: 16px
  control-padding: 8px
  max-content-width: 1120px
  page-margin: 16px
  sidebar-width: 240px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.md}"
    padding: "{spacing.control-padding}"
    height: 36px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.control-padding}"
    height: 36px
---

## Overview

A practical design system for a focused web application workspace. Clear, pragmatic, and purposeful.

**Audience:** Product teams building and maintaining a modern web application.

**Visual reference:** A well-organized studio desk: calm surfaces, clear hierarchy, precise tools, and one confident accent for important work.

### Design principles

- Make the current task and its next action immediately clear.
- Use color to communicate meaning before decoration.
- Keep supporting information quiet so primary work can lead.

## Colors

The default theme is **light**. Use semantic color roles rather than one-off values; primary is reserved for the most important action in a context.

| Token | Default value | Role |
| --- | --- | --- |
| background | #F8FAFC | Default background role |
| foreground | #0F172A | Default foreground role |
| card | #FFFFFF | Default card role |
| card-foreground | #0F172A | Default card-foreground role |
| popover | #FFFFFF | Default popover role |
| popover-foreground | #0F172A | Default popover-foreground role |
| primary | #2563EB | Default primary role |
| primary-foreground | #FFFFFF | Default primary-foreground role |
| secondary | #E2E8F0 | Default secondary role |
| secondary-foreground | #0F172A | Default secondary-foreground role |
| muted | #F1F5F9 | Default muted role |
| muted-foreground | #475569 | Default muted-foreground role |
| accent | #DBEAFE | Default accent role |
| accent-foreground | #1E3A8A | Default accent-foreground role |
| destructive | #DC2626 | Default destructive role |
| destructive-foreground | #FFFFFF | Default destructive-foreground role |
| border | #CBD5E1 | Default border role |
| input | #CBD5E1 | Default input role |
| ring | #2563EB | Default ring role |
| success | #16A34A | Default success role |
| success-foreground | #FFFFFF | Default success-foreground role |
| warning | #D97706 | Default warning role |
| warning-foreground | #FFFFFF | Default warning-foreground role |
| info | #0284C7 | Default info role |
| info-foreground | #FFFFFF | Default info-foreground role |
| sidebar | #0F172A | Default sidebar role |
| sidebar-foreground | #F8FAFC | Default sidebar-foreground role |
| chart1 | #2563EB | Default chart1 role |
| chart2 | #16A34A | Default chart2 role |
| chart3 | #D97706 | Default chart3 role |
| chart4 | #7C3AED | Default chart4 role |
| chart5 | #DB2777 | Default chart5 role |

## Typography

Use system-sans for headings, system-sans for body copy, and system-mono for code and data.

| Role | Configured family | Resolved fallback stack |
| --- | --- | --- |
| Headings | system-sans | ui-sans-serif, system-ui, sans-serif |
| Body | system-sans | ui-sans-serif, system-ui, sans-serif |
| Code | system-mono | ui-monospace, "SFMono-Regular", Consolas, monospace |

The local-variable option bundles Geist Sans with a wght axis from 100 to 900. It does not advertise an optical-size axis. Use the normal OpenType preset and normal variation preset.

| Role | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- |
| display | 3rem | 700 | 1.1 | -0.03em |
| h1 | 2.25rem | 700 | 1.15 | -0.02em |
| h2 | 1.875rem | 650 | 1.2 | -0.015em |
| h3 | 1.5rem | 600 | 1.3 | -0.01em |
| body-lg | 1.125rem | 400 | 1.6 | 0em |
| body-md | 1rem | 400 | 1.6 | 0em |
| body-sm | 0.875rem | 400 | 1.5 | 0em |
| label-lg | 0.875rem | 600 | 1.3 | 0em |
| label-md | 0.75rem | 600 | 1.3 | 0.01em |
| label-sm | 0.625rem | 600 | 1.2 | 0.02em |
| code | 0.875rem | 500 | 1.5 | 0em |

## Layout

Use a **sidebar** navigation model with a maximum content width of 1120px, page margins of 16px, and a 240px sidebar when sidebar navigation is active. Below the 768px tablet breakpoint, render compact mobile navigation; at or above that breakpoint, apply the configured navigation mode. Preserve the named spacing scale to group related work consistently.

Direct spacing, card padding, control padding, radius, border, and shadow tokens take precedence over density. Density only derives the preview form gap (4px) and table cell padding (2px) from the named scale.

| Viewport | Minimum width | Columns |
| --- | --- | --- |
| Mobile | 0px | 1 |
| Tablet | 768px | 2 |
| Desktop | 1024px | 3 |

## Elevation & Depth

Use borders at 1px and apply shadow tokens to establish hierarchy without obscuring content.

| Token | Value | Use |
| --- | --- | --- |
| none | none | none elevation |
| sm | 0 1px 2px 0 rgb(15 23 42 / 0.05) | sm elevation |
| md | 0 8px 16px -4px rgb(15 23 42 / 0.12) | md elevation |
| lg | 0 20px 28px -8px rgb(15 23 42 / 0.18) | lg elevation |

## Shapes

Use the 4px medium radius for standard cards and controls. Preserve the full radius only for pills and circular indicators.

| Radius token | Value |
| --- | --- |
| none | 0px |
| sm | 2px |
| md | 4px |
| lg | 8px |
| xl | 12px |
| full | 9999px |

## Components

Default buttons use the md default treatment. Cards use the outlined style. Controls are 36px high, use compact density, and keep overlays at the sm radius.

Buttons, inputs, textareas, selects, checkboxes, radio groups, switches, sliders, and labels share the configured control height, control padding, medium radius, border width, focus ring, and relevant typography tokens. Form validation is local to the preview and uses the configured feedback copy; it does not make network requests.

Navigation, data, and overlay examples are local preview scenarios. Tables use the configured density, cards use the selected hierarchy treatment, and menus, dialogs, sheets, tooltips, alerts, toasts, skeletons, progress, empty states, and SVG chart samples share the active theme tokens.

### Composition rules

- Keep the primary action visible without competing with supporting controls.
- Group related work in clear sections with consistent spacing.

| State | Behavior |
| --- | --- |
| Hover | Use 0.92 opacity. |
| Active | Use 0.85 opacity. |
| Disabled | Use 0.5 opacity. |
| Loading | Use the spinner indicator. |
| Error | We could not complete that action. Please try again. |
| Success | Your changes were saved. |
| Empty | There is nothing here yet. |

## Do's and Don'ts

### Do

- Use semantic color roles consistently across screens.
- Preserve keyboard focus and clear feedback for every interaction.

### Don't

- Do not use decorative color where it can be mistaken for a status.
- Do not hide essential actions behind hover-only interactions.

## Themes

The default theme is **light**. Light and dark values are independently defined; changing the preview theme does not change the default exported tokens.

### Light

| Token | Value |
| --- | --- |
| background | #F8FAFC |
| foreground | #0F172A |
| card | #FFFFFF |
| card-foreground | #0F172A |
| popover | #FFFFFF |
| popover-foreground | #0F172A |
| primary | #2563EB |
| primary-foreground | #FFFFFF |
| secondary | #E2E8F0 |
| secondary-foreground | #0F172A |
| muted | #F1F5F9 |
| muted-foreground | #475569 |
| accent | #DBEAFE |
| accent-foreground | #1E3A8A |
| destructive | #DC2626 |
| destructive-foreground | #FFFFFF |
| border | #CBD5E1 |
| input | #CBD5E1 |
| ring | #2563EB |
| success | #16A34A |
| success-foreground | #FFFFFF |
| warning | #D97706 |
| warning-foreground | #FFFFFF |
| info | #0284C7 |
| info-foreground | #FFFFFF |
| sidebar | #0F172A |
| sidebar-foreground | #F8FAFC |
| chart1 | #2563EB |
| chart2 | #16A34A |
| chart3 | #D97706 |
| chart4 | #7C3AED |
| chart5 | #DB2777 |

### Dark

| Token | Value |
| --- | --- |
| background | #0F172A |
| foreground | #F8FAFC |
| card | #172033 |
| card-foreground | #F8FAFC |
| popover | #172033 |
| popover-foreground | #F8FAFC |
| primary | #60A5FA |
| primary-foreground | #0F172A |
| secondary | #273449 |
| secondary-foreground | #F8FAFC |
| muted | #1E293B |
| muted-foreground | #CBD5E1 |
| accent | #1E3A8A |
| accent-foreground | #DBEAFE |
| destructive | #F87171 |
| destructive-foreground | #0F172A |
| border | #334155 |
| input | #475569 |
| ring | #60A5FA |
| success | #4ADE80 |
| success-foreground | #052E16 |
| warning | #FBBF24 |
| warning-foreground | #451A03 |
| info | #38BDF8 |
| info-foreground | #082F49 |
| sidebar | #020617 |
| sidebar-foreground | #E2E8F0 |
| chart1 | #60A5FA |
| chart2 | #4ADE80 |
| chart3 | #FBBF24 |
| chart4 | #A78BFA |
| chart5 | #F472B6 |

## Iconography

Use the lucide icon library at 20px with a 2px stroke width. Icons support recognition and should not replace clear labels for essential actions.

## Motion

Use 100ms, 140ms, and 200ms durations with the standard easing. Non-essential animations are enabled. The respect-system reduced-motion policy takes precedence where applicable.

## Accessibility

Use a 2px focus ring with a 2px offset. Interactive controls must be at least 40px. Apply the warn contrast policy and preserve visible keyboard focus.

### Applied contrast findings

The following ratios cover known color pairs used by the preview. They are review findings, not automatic certification, and do not change configured colors.

| Theme | Component | Pair | Ratio | Result |
| --- | --- | --- | --- | --- |
| light | Application surface | foreground on background | 17.06:1 | Meets AA normal-text threshold |
| light | Primary action | primaryForeground on primary | 5.17:1 | Meets AA normal-text threshold |
| light | Theme switcher | secondaryForeground on secondary | 14.48:1 | Meets AA normal-text threshold |
| light | Application navigation | sidebarForeground on sidebar | 17.06:1 | Meets AA normal-text threshold |
| light | Success feedback | successForeground on success | 3.30:1 | Below AA normal-text threshold — review required |
| light | Warning feedback | warningForeground on warning | 3.19:1 | Below AA normal-text threshold — review required |
| light | Information feedback | infoForeground on info | 4.10:1 | Below AA normal-text threshold — review required |
| light | Error feedback | destructiveForeground on destructive | 4.83:1 | Meets AA normal-text threshold |
| dark | Application surface | foreground on background | 17.06:1 | Meets AA normal-text threshold |
| dark | Primary action | primaryForeground on primary | 7.02:1 | Meets AA normal-text threshold |
| dark | Theme switcher | secondaryForeground on secondary | 11.99:1 | Meets AA normal-text threshold |
| dark | Application navigation | sidebarForeground on sidebar | 16.36:1 | Meets AA normal-text threshold |
| dark | Success feedback | successForeground on success | 8.55:1 | Meets AA normal-text threshold |
| dark | Warning feedback | warningForeground on warning | 8.97:1 | Meets AA normal-text threshold |
| dark | Information feedback | infoForeground on info | 6.48:1 | Meets AA normal-text threshold |
| dark | Error feedback | destructiveForeground on destructive | 6.45:1 | Meets AA normal-text threshold |

## Implementation Notes

### Guidance

- Prefer semantic design tokens over one-off visual values.

### Category rationales

These rationales are text-only guidance for agents. They explain intent and do not add automatic preview behavior.

| Category | Rationale |
| --- | --- |
| identity | Keep the product context clear so agents can make decisions in the intended voice. |
| colors | Use semantic color roles to make hierarchy and status understandable across screens. |
| typography | Use the named type roles to preserve a readable, calm information hierarchy. |
| spacing | Use the spacing scale to group related work and keep scan paths predictable. |
| geometry | Use restrained radii, borders, and shadows to distinguish structure without decoration. |
| layout | Keep primary work visible within a stable application shell and navigation model. |
| responsive | Reflow content at the configured breakpoints while preserving task priority. |
| components | Reuse component defaults so actions, data, and overlays behave consistently. |
| states | Show clear local feedback for interaction states without hiding essential information. |
| icons | Use familiar icons as supporting cues and retain text for essential actions. |
| motion | Use brief non-essential motion only to clarify feedback and state changes. |
| accessibility | Preserve visible focus, usable targets, and reviewable contrast in every interaction. |

### Resolved preview CSS

```css

--background: #F8FAFC;
--foreground: #0F172A;
--card: #FFFFFF;
--card-foreground: #0F172A;
--popover: #FFFFFF;
--popover-foreground: #0F172A;
--primary: #2563EB;
--primary-foreground: #FFFFFF;
--secondary: #E2E8F0;
--secondary-foreground: #0F172A;
--muted: #F1F5F9;
--muted-foreground: #475569;
--accent: #DBEAFE;
--accent-foreground: #1E3A8A;
--destructive: #DC2626;
--destructive-foreground: #FFFFFF;
--border: #CBD5E1;
--input: #CBD5E1;
--ring: #2563EB;
--success: #16A34A;
--success-foreground: #FFFFFF;
--warning: #D97706;
--warning-foreground: #FFFFFF;
--info: #0284C7;
--info-foreground: #FFFFFF;
--sidebar: #0F172A;
--sidebar-foreground: #F8FAFC;
--chart1: #2563EB;
--chart2: #16A34A;
--chart3: #D97706;
--chart4: #7C3AED;
--chart5: #DB2777;
--font-body: ui-sans-serif, system-ui, sans-serif;
--font-heading: ui-sans-serif, system-ui, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
--font-feature-settings: normal;
--font-variation-settings: normal;
--type-display-size: 3rem;
--type-display-weight: 700;
--type-display-line-height: 1.1;
--type-display-letter-spacing: -0.03em;
--type-h1-size: 2.25rem;
--type-h1-weight: 700;
--type-h1-line-height: 1.15;
--type-h1-letter-spacing: -0.02em;
--type-h2-size: 1.875rem;
--type-h2-weight: 650;
--type-h2-line-height: 1.2;
--type-h2-letter-spacing: -0.015em;
--type-h3-size: 1.5rem;
--type-h3-weight: 600;
--type-h3-line-height: 1.3;
--type-h3-letter-spacing: -0.01em;
--type-body-lg-size: 1.125rem;
--type-body-lg-weight: 400;
--type-body-lg-line-height: 1.6;
--type-body-lg-letter-spacing: 0em;
--type-body-md-size: 1rem;
--type-body-md-weight: 400;
--type-body-md-line-height: 1.6;
--type-body-md-letter-spacing: 0em;
--type-body-sm-size: 0.875rem;
--type-body-sm-weight: 400;
--type-body-sm-line-height: 1.5;
--type-body-sm-letter-spacing: 0em;
--type-label-lg-size: 0.875rem;
--type-label-lg-weight: 600;
--type-label-lg-line-height: 1.3;
--type-label-lg-letter-spacing: 0em;
--type-label-md-size: 0.75rem;
--type-label-md-weight: 600;
--type-label-md-line-height: 1.3;
--type-label-md-letter-spacing: 0.01em;
--type-label-sm-size: 0.625rem;
--type-label-sm-weight: 600;
--type-label-sm-line-height: 1.2;
--type-label-sm-letter-spacing: 0.02em;
--type-code-size: 0.875rem;
--type-code-weight: 500;
--type-code-line-height: 1.5;
--type-code-letter-spacing: 0em;
--radius: 4px;
--radius-none: 0px;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-full: 9999px;
--border-width: 1px;
--shadow-none: none;
--shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05);
--shadow-md: 0 8px 16px -4px rgb(15 23 42 / 0.12);
--shadow-lg: 0 20px 28px -8px rgb(15 23 42 / 0.18);
--space-xs: 2px;
--space-sm: 4px;
--space-md: 8px;
--space-lg: 16px;
--space-xl: 24px;
--space-2xl: 32px;
--section-gap: 24px;
--card-padding: 16px;
--control-padding: 8px;
--density-form-gap: 4px;
--density-table-cell-padding: 2px;
--content-max-width: 1120px;
--page-margin: 16px;
--sidebar-width: 240px;
--control-height: 36px;
--overlay-radius: 2px;
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
--minimum-control-size: 40px;
--motion-fast: 100ms;
--motion-normal: 140ms;
--motion-slow: 200ms;
--motion-easing: cubic-bezier(0.2, 0, 0, 1);
--icon-size: 20px;
--icon-stroke-width: 2;
--button-default-size: md;
--button-default-variant: default;
--button-padding-inline: var(--control-padding);
--button-text-size: var(--type-label-md-size);
--table-cell-padding: 2px;
--state-active-opacity: 0.85;
--state-disabled-opacity: 0.5;
--state-hover-opacity: 0.92;

```