Frosted Steel Tints

# Frosted Steel Tints

## Philosophy

A production-ready palette language for creative interfaces that uses airy frosted blue, mint, lilac, blush, and pearl only as atmosphere, while steel and ink neutrals carry structure, text, controls, focus, and data legibility.

### Values

- frosted freshness with enterprise discipline
- semantic token readiness before decoration
- accessible ink anchors for every interactive state
- warm and cool tints balanced by neutral steel

### Anti-Values

- pastel text on white surfaces
- cotton-candy gradients without hierarchy
- decorative tint overload in dense data
- unstructured glassmorphism blur

### Visual Character

- Layer pale tint panels over a charcoal-to-pearl neutral field using inset one-pixel steel borders and non-blurred translucent fills.
- Use ink text blocks, dark steel header rails, and high-contrast focus outlines so every frosted surface has a hard structural anchor.
- Compose cards as stepped elevation slabs with tiny OKLCH-like tint chips along the top edge rather than full-panel rainbow gradients.
- Reserve mint, lilac, blush, and frosted blue for status glazes, chart accents, and hover halos while body copy remains ink or steel.

## Tokens

### Borders

- **Accent Width**: 3px
- **Character**: cool steel lines define hierarchy; focus rings are 3px ink-blue outside outlines
- **Default Width**: 1px
- **Style**: solid with occasional double-rail separators

### Colors

| Name | Value |
|------|-------|
| accent | `#BDEDDC` |
| background | `#F7FAFC` |
| border | `#9AA8B8` |
| error | `#B4233A` |
| info | `#2563A8` |
| muted | `#5B6675` |
| primary | `#1E3A5F` |
| secondary | `#CFE9F4` |
| success | `#12785F` |
| surface | `#FFFFFF` |
| text | `#111827` |
| warning | `#9A5B00` |

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(.2,.8,.2,1)
- **Philosophy**: short material confirmations only: tint halo appears, steel edge darkens, elevation lifts by two pixels

### Radii

- **Full**: 9999px
- **Lg**: 18px
- **Md**: 10px
- **None**: 0
- **Sm**: 6px

### Shadows

- **Lg**: 0 34px 80px rgba(17,24,39,.18)
- **Md**: 0 16px 42px rgba(30,58,95,.12)
- **Sm**: 0 1px 2px rgba(17,24,39,.08)

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Surfaces

- **Bg Pattern**: subtle 24px calibration grid with large desaturated blue and lilac glazes clipped behind content
- **Card Style**: white or pearl cards with inset steel borders, slim tint cap strips, and one sharp dark anchor edge
- **Treatment**: pearl and frost tint slabs over steel-neutral foundations; tints are translucent surfaces, never text colors

### Typography

- **Base Size**: 16px
- **Body Font**: Inter
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@500;650;750&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap
- **Heading Font**: Afacad Flux
- **Letter Spacing**: -0.01em
- **Line Height**: 1.5
- **Mono Font**: IBM Plex Mono
- **Scale Ratio**: 1.22

## Rules

### Composition

Build screens as steel-framed workbenches: a dark ink command rail, a broad pearl canvas, and frosted tint modules that step down in density from left navigation to data detail.

### Density

Medium-high product density with generous row height, compact metadata, and enough whitespace around tinted panels to keep the pale palette from becoming foggy.

### Hierarchy

The darkest ink and steel roles identify primary navigation, headings, active states, and focus; pale tints provide grouping, status, and editorial freshness only after contrast is solved.

### Signature Patterns

- Tint cap strips: each major card receives a 3px segmented top border in frosted blue, mint, lilac, or blush to signal category without flooding the surface.
- Steel clamp rails: selected controls and table headers use a dark left or top rail that visually locks translucent panels to the grid.
- Pearl-grid underlay: backgrounds use a nearly invisible steel calibration grid with large clipped tint glazes behind content, not over text.
- Ink focus halo: interactive focus combines a 3px ink-blue outline with a pale mint outer glow so accessibility and softness coexist.

## Layout

### Breakpoints

desktop 1200px+, tablet 768-1199px with collapsible rail, mobile below 640px with stacked modules and persistent command bar

### Grid

12-column desktop workbench grid with a fixed 280px navigation rail, 24px gutters, and nested 4-column analysis cards.

### Whitespace

Whitespace is used as frost separation: 24-32px between surface groups, 12-16px within dense rows, and no floating tint without a steel edge.

## Guidance

### Do

- Use pale tints as surfaces, status chips, chart fills, and hover glazes paired with ink labels.
- Maintain WCAG 2.2 contrast by setting body copy in ink or dark steel on every light tint.
- Create primitive ramps for blue, mint, lilac, blush, pearl, steel, and ink, then map them to semantic roles.
- In dark mode, place luminous desaturated glazes over charcoal while preserving white or near-white text.

### Don't

- Do not set primary text in blush, mint, or lilac on white or pearl backgrounds.
- Do not use cotton-candy diagonal gradients as primary panels or behind dense data.
- Do not let glass blur, transparency, or pale borders replace clear structural hierarchy.
- Do not assign adjacent chart categories to indistinguishable pale tints without dark strokes or labels.

---
version: "alpha"
name: "Frosted Steel Tints"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#BDEDDC"
  background: "#F7FAFC"
  border: "#9AA8B8"
  error: "#B4233A"
  info: "#2563A8"
  muted: "#5B6675"
  primary: "#1E3A5F"
  secondary: "#CFE9F4"
  success: "#12785F"
  surface: "#FFFFFF"
  text: "#111827"
  warning: "#9A5B00"
typography:
  headline-lg:
    fontFamily: "Afacad Flux"
    fontSize: "1.816rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "Afacad Flux"
    fontSize: "1.488rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "18px"
  md: "10px"
  none: "0px"
  sm: "6px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
components:
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Frosted Steel Tints

## Overview

A production-ready palette language for creative interfaces that uses airy frosted blue, mint, lilac, blush, and pearl only as atmosphere, while steel and ink neutrals carry structure, text, controls, focus, and data legibility.

### Values

- frosted freshness with enterprise discipline
- semantic token readiness before decoration
- accessible ink anchors for every interactive state
- warm and cool tints balanced by neutral steel

### Anti-Values

- pastel text on white surfaces
- cotton-candy gradients without hierarchy
- decorative tint overload in dense data
- unstructured glassmorphism blur

### Visual Character

- Layer pale tint panels over a charcoal-to-pearl neutral field using inset one-pixel steel borders and non-blurred translucent fills.
- Use ink text blocks, dark steel header rails, and high-contrast focus outlines so every frosted surface has a hard structural anchor.
- Compose cards as stepped elevation slabs with tiny OKLCH-like tint chips along the top edge rather than full-panel rainbow gradients.
- Reserve mint, lilac, blush, and frosted blue for status glazes, chart accents, and hover halos while body copy remains ink or steel.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| accent | `#BDEDDC` |
| background | `#F7FAFC` |
| border | `#9AA8B8` |
| error | `#B4233A` |
| info | `#2563A8` |
| muted | `#5B6675` |
| primary | `#1E3A5F` |
| secondary | `#CFE9F4` |
| success | `#12785F` |
| surface | `#FFFFFF` |
| text | `#111827` |
| warning | `#9A5B00` |

## Typography

- **Headline-Lg**: Afacad Flux, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Afacad Flux, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 16px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`

### Breakpoints

desktop 1200px+, tablet 768-1199px with collapsible rail, mobile below 640px with stacked modules and persistent command bar

### Grid

12-column desktop workbench grid with a fixed 280px navigation rail, 24px gutters, and nested 4-column analysis cards.

### Whitespace

Whitespace is used as frost separation: 24-32px between surface groups, 12-16px within dense rows, and no floating tint without a steel edge.

## Elevation & Depth

### Shadows

- **Lg**: 0 34px 80px rgba(17,24,39,.18)
- **Md**: 0 16px 42px rgba(30,58,95,.12)
- **Sm**: 0 1px 2px rgba(17,24,39,.08)

## Shapes

### Rounded

- **Full**: `9999px`
- **Lg**: `18px`
- **Md**: `10px`
- **None**: `0px`
- **Sm**: `6px`

### Surfaces

- **Bg Pattern**: subtle 24px calibration grid with large desaturated blue and lilac glazes clipped behind content
- **Card Style**: white or pearl cards with inset steel borders, slim tint cap strips, and one sharp dark anchor edge
- **Treatment**: pearl and frost tint slabs over steel-neutral foundations; tints are translucent surfaces, never text colors

### Borders

- **Accent Width**: 3px
- **Character**: cool steel lines define hierarchy; focus rings are 3px ink-blue outside outlines
- **Default Width**: 1px
- **Style**: solid with occasional double-rail separators

## Components

### Composition

Build screens as steel-framed workbenches: a dark ink command rail, a broad pearl canvas, and frosted tint modules that step down in density from left navigation to data detail.

### Density

Medium-high product density with generous row height, compact metadata, and enough whitespace around tinted panels to keep the pale palette from becoming foggy.

### Hierarchy

The darkest ink and steel roles identify primary navigation, headings, active states, and focus; pale tints provide grouping, status, and editorial freshness only after contrast is solved.

### Signature Patterns

- Tint cap strips: each major card receives a 3px segmented top border in frosted blue, mint, lilac, or blush to signal category without flooding the surface.
- Steel clamp rails: selected controls and table headers use a dark left or top rail that visually locks translucent panels to the grid.
- Pearl-grid underlay: backgrounds use a nearly invisible steel calibration grid with large clipped tint glazes behind content, not over text.
- Ink focus halo: interactive focus combines a 3px ink-blue outline with a pale mint outer glow so accessibility and softness coexist.

## shadcn/ui Usage

When the target app uses shadcn/ui, copy DESIGN.md with shadcn instead of the plain DESIGN.md. It contains the same Katagami design-language source plus the shadcn/ui primitives, imports, theme variables, component recipes, and preview-shot guidance.

DESIGN.md with shadcn: `/language/en-019ea9b1-6b38-7993-8963-ce5193525fd5/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Use pale tints as surfaces, status chips, chart fills, and hover glazes paired with ink labels.
- Do Maintain WCAG 2.2 contrast by setting body copy in ink or dark steel on every light tint.
- Do Create primitive ramps for blue, mint, lilac, blush, pearl, steel, and ink, then map them to semantic roles.
- Do In dark mode, place luminous desaturated glazes over charcoal while preserving white or near-white text.
- Don't Do not set primary text in blush, mint, or lilac on white or pearl backgrounds.
- Don't Do not use cotton-candy diagonal gradients as primary panels or behind dense data.
- Don't Do not let glass blur, transparency, or pale borders replace clear structural hierarchy.
- Don't Do not assign adjacent chart categories to indistinguishable pale tints without dark strokes or labels.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "frosted-steel-tints",
  "type": "registry:theme",
  "title": "Frosted Steel Tints shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7FAFC",
      "foreground": "#111827",
      "card": "#FFFFFF",
      "card-foreground": "#111827",
      "popover": "#FFFFFF",
      "popover-foreground": "#111827",
      "primary": "#1E3A5F",
      "primary-foreground": "#ffffff",
      "secondary": "#CFE9F4",
      "secondary-foreground": "#111111",
      "muted": "#5B6675",
      "muted-foreground": "#111827",
      "accent": "#BDEDDC",
      "accent-foreground": "#111111",
      "destructive": "#B4233A",
      "border": "#9AA8B8",
      "input": "#9AA8B8",
      "ring": "#BDEDDC",
      "chart-1": "#1E3A5F",
      "chart-2": "#CFE9F4",
      "chart-3": "#BDEDDC",
      "chart-4": "#12785F",
      "chart-5": "#9A5B00",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#111827",
      "sidebar-primary": "#1E3A5F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2563A8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#9AA8B8",
      "sidebar-ring": "#BDEDDC",
      "radius": "10px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1E3A5F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#BDEDDC",
      "accent-foreground": "#111111",
      "destructive": "#B4233A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#BDEDDC",
      "chart-1": "#1E3A5F",
      "chart-2": "#CFE9F4",
      "chart-3": "#BDEDDC",
      "chart-4": "#12785F",
      "chart-5": "#9A5B00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1E3A5F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#BDEDDC",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#BDEDDC",
      "radius": "10px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b1-6b38-7993-8963-ce5193525fd5",
    "slug": "frosted-steel-tints",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}
```