---
version: alpha
name: "Glass / Frost"
description: "Translucent panels, soft borders, depth through blur and layering rather than hard edges."
colors:
  primary: "{colors.accent}"
  bg: "#f7f7f8"
  surface: "#ffffff"
  surfaceElevated: "#f0f0f2"
  fg: "#121214"
  fgMuted: "#5c5c66"
  fgSubtle: "#8a8a96"
  border: "rgba(18, 18, 20, 0.12)"
  accent: "#2a2a32"
  accentFg: "#f7f7f8"
  bg-dark: "#0b101e"
  surface-dark: "rgba(232, 232, 232, 0.172)"
  surfaceElevated-dark: "rgba(232, 232, 233, 0.226)"
  fg-dark: "#f4f6fa"
  fgMuted-dark: "#b6bdd0"
  fgSubtle-dark: "#858ea6"
  border-dark: "rgba(254, 254, 254, 0.174)"
  accent-dark: "#a3c7fb"
  accentFg-dark: "#0b101e"
typography:
  h1:
    fontFamily: "\"Segoe UI\", system-ui, sans-serif"
    fontSize: 31.25px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: "-0.011em"
  body-md:
    fontFamily: "\"Segoe UI\", system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-sm:
    fontFamily: "\"Segoe UI\", system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.011em"
rounded:
  sm: 9.6px
  md: 15.6px
  lg: 23.6px
spacing:
  base: 8.8px
  sm: 8.8px
  md: 17.6px
  lg: 26.4px
  xl: 35.2px
components:
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accentFg}"
    rounded: "{rounded.md}"
    borderWidth: 1px
    padding: 8.8px
motion:
  duration:
    fast: 150ms
    instant: 0ms
    normal: 250ms
    slow: 400ms
  easing:
    emphasized: "cubic-bezier(0.3, 0, 0, 1)"
    entrance: "cubic-bezier(0, 0, 0.2, 1)"
    exit: "cubic-bezier(0.4, 0, 1, 1)"
    standard: "cubic-bezier(0.2, 0, 0, 1)"
  transition:
    color: "color 150ms cubic-bezier(0.2, 0, 0, 1), background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1)"
    fade: "opacity 250ms cubic-bezier(0.2, 0, 0, 1)"
    transform: "transform 250ms cubic-bezier(0.3, 0, 0, 1)"
icon:
  catalog: lucide
  size:
    lg: 24px
    md: 20px
    sm: 16px
  stroke: 2
  color: currentColor
  aliases:
    add: plus
    check: check
    close: x
    delete: trash
    edit: pencil
    home: house
    menu: menu
    search: search
    settings: settings
    user: user
---

# Glass / Frost

## Overview

Translucent panels, soft borders, depth through blur and layering rather than hard edges.

## Colors

Light appearance is the canonical color token set. Dark appearance values are the same token names with a `-dark` suffix.

- **bg (#f7f7f8):** Selected `bg` token.
- **surface (#ffffff):** Selected `surface` token.
- **surfaceElevated (#f0f0f2):** Selected `surfaceElevated` token.
- **fg (#121214):** Selected `fg` token.
- **fgMuted (#5c5c66):** Selected `fgMuted` token.
- **fgSubtle (#8a8a96):** Selected `fgSubtle` token.
- **border (rgba(18, 18, 20, 0.12)):** Selected `border` token.
- **accent (#2a2a32):** Selected `accent` token.
- **accentFg (#f7f7f8):** Selected `accentFg` token.

Dark appearance:
- **bg-dark (#0b101e):** Selected dark `bg` token.
- **surface-dark (rgba(232, 232, 232, 0.172)):** Selected dark `surface` token.
- **surfaceElevated-dark (rgba(232, 232, 233, 0.226)):** Selected dark `surfaceElevated` token.
- **fg-dark (#f4f6fa):** Selected dark `fg` token.
- **fgMuted-dark (#b6bdd0):** Selected dark `fgMuted` token.
- **fgSubtle-dark (#858ea6):** Selected dark `fgSubtle` token.
- **border-dark (rgba(254, 254, 254, 0.174)):** Selected dark `border` token.
- **accent-dark (#a3c7fb):** Selected dark `accent` token.
- **accentFg-dark (#0b101e):** Selected dark `accentFg` token.

## Typography

Type steps use the selected `typeScale` against a 16px desktop base (`sm` = base × 0.875; `lg` / `xl` / `2xl` are successive powers of the ratio).

- **Display:** "Segoe UI", system-ui, sans-serif
- **Body:** "Segoe UI", system-ui, sans-serif
- **Display weight:** 600
- **Body weight:** 400
- **Scale ratio:** 1.25
- **Tracking:** -0.011em
- **Line height:** 1.5

## Layout

Spacing uses the selected `spaceUnit` (8.8px) as the base step. Larger steps are whole multiples of that unit. Prefer this scale over ad-hoc padding.

## Elevation & Depth

Elevation comes from the selected shadow tokens, not extra drop shadows.

- **Light:** `0 8px 24px rgba(18,18,20,0.08)`
- **Dark:** `0 11.6px 38.4px rgba(0, 0, 0, 0.35)`

## Shapes

Corner radii are the selected tokens: SM 9.6px, MD 15.6px, LG 23.6px. Border width is the selected token: 1px.

## Components

Primary actions use `button-primary` (accent fill, accent foreground). Do not introduce a second primary button style.

## Motion

Motion tokens are duration, easing, and transition shorthands. Honor `prefers-reduced-motion`; do not invent a parallel animation scale.

**Duration**

- **fast (150ms):** Selected `fast` motion token.
- **instant (0ms):** Selected `instant` motion token.
- **normal (250ms):** Selected `normal` motion token.
- **slow (400ms):** Selected `slow` motion token.

**Easing**

- **emphasized (cubic-bezier(0.3, 0, 0, 1)):** Selected `emphasized` motion token.
- **entrance (cubic-bezier(0, 0, 0.2, 1)):** Selected `entrance` motion token.
- **exit (cubic-bezier(0.4, 0, 1, 1)):** Selected `exit` motion token.
- **standard (cubic-bezier(0.2, 0, 0, 1)):** Selected `standard` motion token.

**Transition**

- **color (color 150ms cubic-bezier(0.2, 0, 0, 1), background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1)):** Selected `color` motion token.
- **fade (opacity 250ms cubic-bezier(0.2, 0, 0, 1)):** Selected `fade` motion token.
- **transform (transform 250ms cubic-bezier(0.3, 0, 0, 1)):** Selected `transform` motion token.

## Icon

Icon tokens are size, stroke, and color. Lucide is the default catalog seed. Import named glyphs and tree-shake; do not paste SVGs. Color reuses `currentColor` / `fg` / `fgMuted` — do not invent a parallel palette.

- **Catalog:** `lucide`

**Size**

- **lg (24px):** `--lab-icon-size-lg`
- **md (20px):** `--lab-icon-size-md`
- **sm (16px):** `--lab-icon-size-sm`

- **Stroke (2):** `--lab-icon-stroke`
- **Color (currentColor):** `--lab-icon-color`

**Aliases**

- **icon.add → plus:** Lucide `plus`.
- **icon.check → check:** Lucide `check`.
- **icon.close → x:** Lucide `x`.
- **icon.delete → trash:** Lucide `trash`.
- **icon.edit → pencil:** Lucide `pencil`.
- **icon.home → house:** Lucide `house`.
- **icon.menu → menu:** Lucide `menu`.
- **icon.search → search:** Lucide `search`.
- **icon.settings → settings:** Lucide `settings`.
- **icon.user → user:** Lucide `user`.

## Do's and Don'ts

- Do use this selected system's tokens as the source of truth
- Don't invent a parallel palette, type scale, spacing, or motion system
- Do maintain WCAG AA contrast for `fg` on `bg` / `surface` in both appearances
- Don't mix this system with another installed design in the same view