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
Typography
Each face set in this language's own words.
Rime
Rime
Rime is a cold-operations language for an avalanche patrol console.
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
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"
]
}
}
}
```