Back to gallery

Rime

Rime is a cold-operations language for an avalanche patrol console.

Its pictures are drawn in Cryotype.

Download DESIGN.md

Tokens, rules and the paired art style Cryotype.

Preview

Open full page

Typography

Each face set in this language's own words.

headline lgBai Jamjuree, 33px, 700

Rime

headline mdBai Jamjuree, 27px, 600

Rime

body mdMada, 17px, 400

Rime is a cold-operations language for an avalanche patrol console.

label mdUbuntu Mono, 12px, 600

Rime is a cold-operations language for an avalanche patrol console.

Specification

Philosophy

summary

Rime is a cold-operations language for an avalanche patrol console. It reads on a deep glacial navy, with the frozen mountain plate as an open sky above the type, and one cyan thaw-line that marks the single weak layer that decides the route. There are no frosted panes, glows, gradients or card rows: depth is shown the way a snow pit shows it, as strata bars in stacked depth bands, and everything else is ink-white type on dark ground.

It values

  • Mark the single decision, the weak layer, with the one cyan thaw-line.
  • Put the headline on open sky in the hero plate, never over detail and never under a scrim.
  • Show depth as strata bars in a pit, in rows of depth, bar and verdict.
  • Keep one warm ember for the thing that is melting, as a word or a dot, never a fill.
  • Write cold, exact operations copy: depths in centimetres, readings in degrees, times in 24 hours.

It refuses

  • Frosted blur panes and glass cards in rows of three.
  • Glows, gradient scrims and gradient bars.
  • Tracked mono kickers used as ornament.
  • Text laid over detailed image areas.
  • Default traffic-light semantics at full strength.

visual character

  • Deep glacial navy #0A1322 ground with ice-white #EAF4FF type.
  • A full-bleed etched-frost mountain plate whose upper sky is open for the headline.
  • Strata bars in pale rim blue #A7C7FF, one in thaw-line cyan #67E8F9.
  • A surface band #13203A carrying live readings with small square marks.
  • Bai Jamjuree 700 headlines, Mada body at 17px, Ubuntu Mono for depths and readings.
  • One pill button in cyan; every other rectangle is square.

lineage

Generation 3 of Rime, revised in place from arni's approved take rime-i. It keeps the navy ground, the cyan thaw-line, the page order and the one warm ember; it removes the blur panes, glows, gradient fills, mono kickers, the scrim over the image and the rows of cards.

Tokens
colors13
bg
#0A1322
surface
#13203A
text
#EAF4FF
muted
#A3B6D1
border
#2C4063
accent
#67E8F9
on accent
#06121F
success
#63D9B1
warning
#F2C46D
error
#FF8A9B
info
#9BB8FF
ember
#F4B07A
rim
#A7C7FF
typography13
heading font
Bai Jamjuree
body font
Mada
mono font
Ubuntu Mono
heading weight
700
body weight
400
button weight
700
mono weight
400
heading transform
none
letter spacing
-0.02em on display; -0.01em on body; 0 on mono
base size
17px
line height
1.6
scale
14.5px, 17px, 18px, 20px, 22px, 34px, 52px, 64px, 96px
google fonts url
https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500;600;700&family=Mada:wght@400;500;600;700&family=Ubuntu+Mono:wght@400;700&display=swap
radii5
none
0px
sm
0px
md
0px
lg
0px
full
9999px
shadows1
none
flat: no shadows on the page; depth is the dark ground, the surface band and the hero plate
spacing2
base
8px
scale
4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 104px
surfaces3
treatment
open-ground-and-strata
card style
No panes, cards or frames. Text sits on the glacial ground in open columns; the one filled surface is the live strip band under the hero. Depth is read from the strata bars.
bg pattern
none; the frost lives in the hero plate only
borders3
default width
0
style
none
character
No borders or hairlines. Structure is space, column rhythm and the strata bars; the single cyan thaw-line marks the one live layer.
motion3
duration
220ms
easing
cubic-bezier(0.2,0.8,0.2,1)
philosophy
Settled-first: the page renders complete with no JS; hover shifts the button to white; prefers-reduced-motion removes transitions.
controls3
height
48px
radius
9999px on the one button; 0 on everything else
well height
52px
Rules

composition

  • Open the page with one full-bleed mountain plate and set the headline on its open sky, never over frost detail.
  • Follow the hero with a live strip on the surface band: five readings with small square marks.
  • Show the snowpack as a pit: rows of depth, strata bar and verdict, with the weak layer the only cyan row.
  • Lay prose in open columns on the ground; never wrap a block in a pane, card or frame.

hierarchy

  • Headlines in Bai Jamjuree 700 at 52px, 64px in the hero, with -0.02em tracking.
  • Body in Mada 17px in ice white, secondary prose in muted #A3B6D1.
  • Depths, hours and readings in Ubuntu Mono at 18px.
  • Colour carries rank: cyan for the live layer and the one action, ember for what is warm, rim blue for context.

density

Calm and legible: 104px between sections on desktop, 56px on phones, 14px row padding in the pit, prose held to about 56 characters.

signature

The snowpack pit: a stack of depth bands (0 to 40 cm, 40 to 96 cm, 96 to 118 cm, 118 to 214 cm) drawn as pale strata bars of different lengths, with exactly one bar, the weak layer, in thaw-line cyan with its verdict in cyan. The thaw-line is the positional accent and recolours on a palette swap.

signature patterns

  • The snowpack pit: depth, strata bar and verdict in one row, the weak layer alone in cyan.
  • The open sky headline: the hero plate leaves the upper left empty so the title sits on plain dark sky with no scrim.
  • The live strip: a surface band of five readings, each with a small square mark in a state colour and a mono label.
  • The one warm ember: a single warm word or dot where something is melting.
  • The highlighter word: one word per headline in cyan, or one phrase underlined by an inset cyan bar.
Layout

grid

type
single-column console page with open multi-column readouts
max width
1200px content, centred above 1440px; only the hero is full bleed
gutter
clamp(18px,4vw,56px)
column behavior
Readouts use 3 or 4 equal columns at desktop, 2 columns under 1100px and one under 900px; every child has min-width:0.

whitespace

section gap
104px desktop, 56px phone
card gap
no cards; 24 to 72px column gaps
content padding
text aligns to the grid edge
approach
Open ground and space do the grouping. The surface band is the only filled strip.

density

default
comfortable
comfortable
button height 48pxinput height 52pxrow height 46 to 56px pit rows

responsive

Phones (390px) use the portrait pass plate with the headline on its open top half, hide the nav links, stack columns and move each pit verdict under its bar. Tablets use the landscape plate and two-column readouts. Above 1440px the content caps and centres and the plate anchors to the top.

breakpoints

mobile
390px
phone max
600px
tablet
834px
desktop
1280px
ultrawide
2560px
Guidance

Do

  • Put every headline on open sky or plain ground, never over image detail.
  • Spend cyan once per view on the weak layer, the one button and one highlighted word.
  • Draw depth as strata bars with a depth label and a verdict.
  • Keep the single warm ember to one word or dot.
  • Write readings in Ubuntu Mono with units: cm, degrees, 24-hour times.
  • Give every status a word beside its mark.

Avoid

  • Don't use frosted blur panes, glass cards or rows of three cards.
  • Don't add glows, gradients, scrims or tracked mono kickers.
  • Don't put text over detailed image areas.
  • Don't let semantic colours read as primary; they stay small squares beside words.
  • Don't round rectangles; only the button is a pill.
  • Don't put emoji on buttons.
Imagery

pairs with

cryotype

art style id

en-019efd16-a698-7562-b64d-e3647ed7c574

summary

One full-bleed etched frosted-glass mountain pass in near-monochrome glacial blue with fern-frost feathering and one tiny warm spark, with the upper left left as plain dark sky for the headline.

subjects

  • an alpine pass seen across a frozen valley
  • a snowpack ridgeline etched in frost
  • a frosted sensor mast on an open col
  • empty dark sky above the ridge

treatment

Etched into and seen through frosted glass; near-monochrome cold rendering, fern-frost feathering on the slopes, a calm uncluttered sky, no gradient scrim added in CSS.

ground

Deep glacial navy with an open sky region measured to hold the headline at full contrast

usage

One landing hero painted with var(--hero-image); a portrait plate under 600px with the top half empty. Inside pages carry no illustration; the pit is the object.

avoid

Text over frost detail, scrims, warm sunsets, aurora orbs, glow and gradients.

Katagami spec file
# Rime

## Philosophy

Rime is a cold-operations language for an avalanche patrol console. It reads on a deep glacial navy, with the frozen mountain plate as an open sky above the type, and one cyan thaw-line that marks the single weak layer that decides the route. There are no frosted panes, glows, gradients or card rows: depth is shown the way a snow pit shows it, as strata bars in stacked depth bands, and everything else is ink-white type on dark ground.

### Values

- Mark the single decision, the weak layer, with the one cyan thaw-line.
- Put the headline on open sky in the hero plate, never over detail and never under a scrim.
- Show depth as strata bars in a pit, in rows of depth, bar and verdict.
- Keep one warm ember for the thing that is melting, as a word or a dot, never a fill.
- Write cold, exact operations copy: depths in centimetres, readings in degrees, times in 24 hours.

### Anti-Values

- Frosted blur panes and glass cards in rows of three.
- Glows, gradient scrims and gradient bars.
- Tracked mono kickers used as ornament.
- Text laid over detailed image areas.
- Default traffic-light semantics at full strength.

### Visual Character

- Deep glacial navy #0A1322 ground with ice-white #EAF4FF type.
- A full-bleed etched-frost mountain plate whose upper sky is open for the headline.
- Strata bars in pale rim blue #A7C7FF, one in thaw-line cyan #67E8F9.
- A surface band #13203A carrying live readings with small square marks.
- Bai Jamjuree 700 headlines, Mada body at 17px, Ubuntu Mono for depths and readings.
- One pill button in cyan; every other rectangle is square.

### Lineage

> Generation 3 of Rime, revised in place from arni's approved take rime-i. It keeps the navy ground, the cyan thaw-line, the page order and the one warm ember; it removes the blur panes, glows, gradient fills, mono kickers, the scrim over the image and the rows of cards.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0A1322` |
| surface | `#13203A` |
| text | `#EAF4FF` |
| muted | `#A3B6D1` |
| border | `#2C4063` |
| accent | `#67E8F9` |
| on_accent | `#06121F` |
| success | `#63D9B1` |
| warning | `#F2C46D` |
| error | `#FF8A9B` |
| info | `#9BB8FF` |
| ember | `#F4B07A` |
| rim | `#A7C7FF` |

### Typography

- **Heading Font**: Bai Jamjuree
- **Body Font**: Mada
- **Mono Font**: Ubuntu Mono
- **Heading Weight**: 700
- **Body Weight**: 400
- **Button Weight**: 700
- **Mono Weight**: 400
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on display; -0.01em on body; 0 on mono
- **Base Size**: 17px
- **Line Height**: 1.6
- **Scale**: ["14.5px","17px","18px","20px","22px","34px","52px","64px","96px"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500;600;700&family=Mada:wght@400;500;600;700&family=Ubuntu+Mono:wght@400;700&display=swap

### Radii

- **None**: 0px
- **Sm**: 0px
- **Md**: 0px
- **Lg**: 0px
- **Full**: 9999px

### Shadows

- **None**: flat: no shadows on the page; depth is the dark ground, the surface band and the hero plate

### Spacing

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

### Surfaces

- **Treatment**: open-ground-and-strata
- **Card Style**: No panes, cards or frames. Text sits on the glacial ground in open columns; the one filled surface is the live strip band under the hero. Depth is read from the strata bars.
- **Bg Pattern**: none; the frost lives in the hero plate only

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders or hairlines. Structure is space, column rhythm and the strata bars; the single cyan thaw-line marks the one live layer.

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(0.2,0.8,0.2,1)
- **Philosophy**: Settled-first: the page renders complete with no JS; hover shifts the button to white; prefers-reduced-motion removes transitions.

### Controls

- **Height**: 48px
- **Radius**: 9999px on the one button; 0 on everything else
- **Well Height**: 52px

## Rules

### Composition

- Open the page with one full-bleed mountain plate and set the headline on its open sky, never over frost detail.
- Follow the hero with a live strip on the surface band: five readings with small square marks.
- Show the snowpack as a pit: rows of depth, strata bar and verdict, with the weak layer the only cyan row.
- Lay prose in open columns on the ground; never wrap a block in a pane, card or frame.

### Hierarchy

- Headlines in Bai Jamjuree 700 at 52px, 64px in the hero, with -0.02em tracking.
- Body in Mada 17px in ice white, secondary prose in muted #A3B6D1.
- Depths, hours and readings in Ubuntu Mono at 18px.
- Colour carries rank: cyan for the live layer and the one action, ember for what is warm, rim blue for context.

### Density

Calm and legible: 104px between sections on desktop, 56px on phones, 14px row padding in the pit, prose held to about 56 characters.

### Signature

The snowpack pit: a stack of depth bands (0 to 40 cm, 40 to 96 cm, 96 to 118 cm, 118 to 214 cm) drawn as pale strata bars of different lengths, with exactly one bar, the weak layer, in thaw-line cyan with its verdict in cyan. The thaw-line is the positional accent and recolours on a palette swap.

### Signature Patterns

- The snowpack pit: depth, strata bar and verdict in one row, the weak layer alone in cyan.
- The open sky headline: the hero plate leaves the upper left empty so the title sits on plain dark sky with no scrim.
- The live strip: a surface band of five readings, each with a small square mark in a state colour and a mono label.
- The one warm ember: a single warm word or dot where something is melting.
- The highlighter word: one word per headline in cyan, or one phrase underlined by an inset cyan bar.

## Layout

### Grid

- **Type**: single-column console page with open multi-column readouts
- **Max Width**: 1200px content, centred above 1440px; only the hero is full bleed
- **Gutter**: clamp(18px,4vw,56px)
- **Column Behavior**: Readouts use 3 or 4 equal columns at desktop, 2 columns under 1100px and one under 900px; every child has min-width:0.

### Whitespace

- **Section Gap**: 104px desktop, 56px phone
- **Card Gap**: no cards; 24 to 72px column gaps
- **Content Padding**: text aligns to the grid edge
- **Approach**: Open ground and space do the grouping. The surface band is the only filled strip.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"48px","input_height":"52px","row_height":"46 to 56px pit rows"}

### Responsive

Phones (390px) use the portrait pass plate with the headline on its open top half, hide the nav links, stack columns and move each pit verdict under its bar. Tablets use the landscape plate and two-column readouts. Above 1440px the content caps and centres and the plate anchors to the top.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 834px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Guidance

### Do

- Put every headline on open sky or plain ground, never over image detail.
- Spend cyan once per view on the weak layer, the one button and one highlighted word.
- Draw depth as strata bars with a depth label and a verdict.
- Keep the single warm ember to one word or dot.
- Write readings in Ubuntu Mono with units: cm, degrees, 24-hour times.
- Give every status a word beside its mark.

### Don't

- Don't use frosted blur panes, glass cards or rows of three cards.
- Don't add glows, gradients, scrims or tracked mono kickers.
- Don't put text over detailed image areas.
- Don't let semantic colours read as primary; they stay small squares beside words.
- Don't round rectangles; only the button is a pill.
- Don't put emoji on buttons.

### Accessibility

AA and better on #0A1322: text #EAF4FF is about 16:1, muted #A3B6D1 about 8:1, cyan #67E8F9 about 12:1, rim #A7C7FF about 10:1, and the button label #06121F on cyan about 12:1. Status is always a word beside a small mark. Focus is a 3px ice-white outline at 3px offset. The settled page renders with no JavaScript and prefers-reduced-motion removes transitions.

## Imagery Direction

### Pairs With

cryotype

### Art Style Id

en-019efd16-a698-7562-b64d-e3647ed7c574

### Summary

One full-bleed etched frosted-glass mountain pass in near-monochrome glacial blue with fern-frost feathering and one tiny warm spark, with the upper left left as plain dark sky for the headline.

### Subjects

- an alpine pass seen across a frozen valley
- a snowpack ridgeline etched in frost
- a frosted sensor mast on an open col
- empty dark sky above the ridge

### Treatment

Etched into and seen through frosted glass; near-monochrome cold rendering, fern-frost feathering on the slopes, a calm uncluttered sky, no gradient scrim added in CSS.

### Ground

Deep glacial navy with an open sky region measured to hold the headline at full contrast

### Usage

One landing hero painted with var(--hero-image); a portrait plate under 600px with the top half empty. Inside pages carry no illustration; the pit is the object.

### Avoid

Text over frost detail, scrims, warm sunsets, aurora orbs, glow and gradients.
DESIGN.md file
---
version: "alpha"
name: "Rime"
description: "Rime is a cold-operations language for an avalanche patrol console. It reads on a deep glacial navy, with the frozen mountain plate as an open sky above the type, and one cyan thaw-line that marks the single weak layer that decides the r..."
colors:
  bg: "#0A1322"
  surface: "#13203A"
  text: "#EAF4FF"
  muted: "#A3B6D1"
  border: "#2C4063"
  accent: "#67E8F9"
  on_accent: "#06121F"
  success: "#63D9B1"
  warning: "#F2C46D"
  error: "#FF8A9B"
  info: "#9BB8FF"
  ember: "#F4B07A"
  rim: "#A7C7FF"
typography:
  headline-lg:
    fontFamily: "Bai Jamjuree"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Bai Jamjuree"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Mada"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Ubuntu Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  lg: "0px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "104px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-ember:
    backgroundColor: "{colors.ember}"
  color-reference-rim:
    backgroundColor: "{colors.rim}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    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"
---

# Rime

## Overview

Rime is a cold-operations language for an avalanche patrol console. It reads on a deep glacial navy, with the frozen mountain plate as an open sky above the type, and one cyan thaw-line that marks the single weak layer that decides the route. There are no frosted panes, glows, gradients or card rows: depth is shown the way a snow pit shows it, as strata bars in stacked depth bands, and everything else is ink-white type on dark ground.

### Values

- Mark the single decision, the weak layer, with the one cyan thaw-line.
- Put the headline on open sky in the hero plate, never over detail and never under a scrim.
- Show depth as strata bars in a pit, in rows of depth, bar and verdict.
- Keep one warm ember for the thing that is melting, as a word or a dot, never a fill.
- Write cold, exact operations copy: depths in centimetres, readings in degrees, times in 24 hours.

### Anti-Values

- Frosted blur panes and glass cards in rows of three.
- Glows, gradient scrims and gradient bars.
- Tracked mono kickers used as ornament.
- Text laid over detailed image areas.
- Default traffic-light semantics at full strength.

### Visual Character

- Deep glacial navy #0A1322 ground with ice-white #EAF4FF type.
- A full-bleed etched-frost mountain plate whose upper sky is open for the headline.
- Strata bars in pale rim blue #A7C7FF, one in thaw-line cyan #67E8F9.
- A surface band #13203A carrying live readings with small square marks.
- Bai Jamjuree 700 headlines, Mada body at 17px, Ubuntu Mono for depths and readings.
- One pill button in cyan; every other rectangle is square.

### Lineage

> Generation 3 of Rime, revised in place from arni's approved take rime-i. It keeps the navy ground, the cyan thaw-line, the page order and the one warm ember; it removes the blur panes, glows, gradient fills, mono kickers, the scrim over the image and the rows of cards.

## Colors

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

| Token | Value |
|-------|-------|
| bg | `#0A1322` |
| surface | `#13203A` |
| text | `#EAF4FF` |
| muted | `#A3B6D1` |
| border | `#2C4063` |
| accent | `#67E8F9` |
| on_accent | `#06121F` |
| success | `#63D9B1` |
| warning | `#F2C46D` |
| error | `#FF8A9B` |
| info | `#9BB8FF` |
| ember | `#F4B07A` |
| rim | `#A7C7FF` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500;600;700&family=Mada:wght@400;500;600;700&family=Ubuntu+Mono:wght@400;700&display=swap

- **Headline-Lg**: Bai Jamjuree, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Bai Jamjuree, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Mada, 17px, weight 400, line-height 1.6.
- **Label-Md**: Ubuntu 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`
- **Step-8**: `104px`

### Grid

- **Type**: single-column console page with open multi-column readouts
- **Max Width**: 1200px content, centred above 1440px; only the hero is full bleed
- **Gutter**: clamp(18px,4vw,56px)
- **Column Behavior**: Readouts use 3 or 4 equal columns at desktop, 2 columns under 1100px and one under 900px; every child has min-width:0.

### Whitespace

- **Section Gap**: 104px desktop, 56px phone
- **Card Gap**: no cards; 24 to 72px column gaps
- **Content Padding**: text aligns to the grid edge
- **Approach**: Open ground and space do the grouping. The surface band is the only filled strip.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"48px","input_height":"52px","row_height":"46 to 56px pit rows"}

### Responsive

Phones (390px) use the portrait pass plate with the headline on its open top half, hide the nav links, stack columns and move each pit verdict under its bar. Tablets use the landscape plate and two-column readouts. Above 1440px the content caps and centres and the plate anchors to the top.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 834px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **None**: flat: no shadows on the page; depth is the dark ground, the surface band and the hero plate

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: open-ground-and-strata
- **Card Style**: No panes, cards or frames. Text sits on the glacial ground in open columns; the one filled surface is the live strip band under the hero. Depth is read from the strata bars.
- **Bg Pattern**: none; the frost lives in the hero plate only

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders or hairlines. Structure is space, column rhythm and the strata bars; the single cyan thaw-line marks the one live layer.

## Components

### Composition

- Open the page with one full-bleed mountain plate and set the headline on its open sky, never over frost detail.
- Follow the hero with a live strip on the surface band: five readings with small square marks.
- Show the snowpack as a pit: rows of depth, strata bar and verdict, with the weak layer the only cyan row.
- Lay prose in open columns on the ground; never wrap a block in a pane, card or frame.

### Hierarchy

- Headlines in Bai Jamjuree 700 at 52px, 64px in the hero, with -0.02em tracking.
- Body in Mada 17px in ice white, secondary prose in muted #A3B6D1.
- Depths, hours and readings in Ubuntu Mono at 18px.
- Colour carries rank: cyan for the live layer and the one action, ember for what is warm, rim blue for context.

### Density

Calm and legible: 104px between sections on desktop, 56px on phones, 14px row padding in the pit, prose held to about 56 characters.

### Signature

The snowpack pit: a stack of depth bands (0 to 40 cm, 40 to 96 cm, 96 to 118 cm, 118 to 214 cm) drawn as pale strata bars of different lengths, with exactly one bar, the weak layer, in thaw-line cyan with its verdict in cyan. The thaw-line is the positional accent and recolours on a palette swap.

### Signature Patterns

- The snowpack pit: depth, strata bar and verdict in one row, the weak layer alone in cyan.
- The open sky headline: the hero plate leaves the upper left empty so the title sits on plain dark sky with no scrim.
- The live strip: a surface band of five readings, each with a small square mark in a state colour and a mono label.
- The one warm ember: a single warm word or dot where something is melting.
- The highlighter word: one word per headline in cyan, or one phrase underlined by an inset cyan bar.

## 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-01a11415-fae2-7373-b654-405e7057607e/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a11415-fae2-7373-b654-405e7057607e/shadcn.json` (registry theme), `/language/en-01a11415-fae2-7373-b654-405e7057607e/shadcn-components.md` (component recipes) and `/language/en-01a11415-fae2-7373-b654-405e7057607e/shadcn-shots.json` (preview shots). The human-facing handoff is still 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 Put every headline on open sky or plain ground, never over image detail.
- Do Spend cyan once per view on the weak layer, the one button and one highlighted word.
- Do Draw depth as strata bars with a depth label and a verdict.
- Do Keep the single warm ember to one word or dot.
- Do Write readings in Ubuntu Mono with units: cm, degrees, 24-hour times.
- Do Give every status a word beside its mark.
- Don't Don't use frosted blur panes, glass cards or rows of three cards.
- Don't Don't add glows, gradients, scrims or tracked mono kickers.
- Don't Don't put text over detailed image areas.
- Don't Don't let semantic colours read as primary; they stay small squares beside words.
- Don't Don't round rectangles; only the button is a pill.
- Don't Don't put emoji on buttons.

### Accessibility

AA and better on #0A1322: text #EAF4FF is about 16:1, muted #A3B6D1 about 8:1, cyan #67E8F9 about 12:1, rim #A7C7FF about 10:1, and the button label #06121F on cyan about 12:1. Status is always a word beside a small mark. Focus is a 3px ice-white outline at 3px offset. The settled page renders with no JavaScript and prefers-reduced-motion removes transitions.

## Imagery Direction

### Pairs With

cryotype

### Art Style Id

en-019efd16-a698-7562-b64d-e3647ed7c574

### Summary

One full-bleed etched frosted-glass mountain pass in near-monochrome glacial blue with fern-frost feathering and one tiny warm spark, with the upper left left as plain dark sky for the headline.

### Subjects

- an alpine pass seen across a frozen valley
- a snowpack ridgeline etched in frost
- a frosted sensor mast on an open col
- empty dark sky above the ridge

### Treatment

Etched into and seen through frosted glass; near-monochrome cold rendering, fern-frost feathering on the slopes, a calm uncluttered sky, no gradient scrim added in CSS.

### Ground

Deep glacial navy with an open sky region measured to hold the headline at full contrast

### Usage

One landing hero painted with var(--hero-image); a portrait plate under 600px with the top half empty. Inside pages carry no illustration; the pit is the object.

### Avoid

Text over frost detail, scrims, warm sunsets, aurora orbs, glow and gradients.
shadcn/ui theme file
```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rime",
  "type": "registry:theme",
  "title": "Rime shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0A1322",
      "foreground": "#EAF4FF",
      "card": "#13203A",
      "card-foreground": "#EAF4FF",
      "popover": "#13203A",
      "popover-foreground": "#EAF4FF",
      "primary": "#EAF4FF",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#A3B6D1",
      "muted-foreground": "#EAF4FF",
      "accent": "#67E8F9",
      "accent-foreground": "#111111",
      "destructive": "#FF8A9B",
      "border": "#2C4063",
      "input": "#2C4063",
      "ring": "#67E8F9",
      "chart-1": "#EAF4FF",
      "chart-2": "#f4f4f5",
      "chart-3": "#67E8F9",
      "chart-4": "#63D9B1",
      "chart-5": "#F2C46D",
      "sidebar": "#13203A",
      "sidebar-foreground": "#EAF4FF",
      "sidebar-primary": "#EAF4FF",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#9BB8FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#2C4063",
      "sidebar-ring": "#67E8F9",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#EAF4FF",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#67E8F9",
      "accent-foreground": "#111111",
      "destructive": "#FF8A9B",
      "border": "#303642",
      "input": "#303642",
      "ring": "#67E8F9",
      "chart-1": "#EAF4FF",
      "chart-2": "#f4f4f5",
      "chart-3": "#67E8F9",
      "chart-4": "#63D9B1",
      "chart-5": "#F2C46D",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#EAF4FF",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#67E8F9",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#67E8F9",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a11415-fae2-7373-b654-405e7057607e",
    "slug": "rime",
    "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": {
      "colors": [
        "accent",
        "bg",
        "border",
        "ember",
        "error",
        "info",
        "muted",
        "on_accent",
        "rim",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "mono_weight",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "controls": [
        "height",
        "radius",
        "well_height"
      ]
    }
  }
}
```

shadcn/ui kit