Floe

# Floe

## Philosophy

Floe is a bright high-key reimagining of frost. Instead of dark glass, the interface is a frozen white field read in cold daylight: content sits on luminous frosted panes etched as ice-core depth strata, one diagonal cleave-line marks where the record changes, and one tiny warm ember spark flags the single thing that needs a hand. It is the console of a sub-zero ice-core lab.

### Values

- Read every surface as etched ice-core strata on a bright frost pane
- Mark where the record changes with exactly one diagonal cleave-line per pane
- Reserve a single warm ember spark for the one thing that needs attention
- Keep precise readouts perfectly legible in full cold daylight
- Choose high-key light deliberately as the lab's true working ground

### Anti-Values

- A muddy grey wash standing in for frost
- A single accent edge or a full frame around a card
- More than three accents, or an ember that spreads into a fill
- Strata stamped everywhere until it is wallpaper rather than depth
- The generic SaaS hero: eyebrow tag, button pair, three-stat row

### Visual Character

- bright high-key frosted-white panes on a cool frost field, lifted by soft cold shadow, never bordered
- ice-core depth strata etched as fine hairline bands that stack from firn to bedrock across cards, charts and tables
- one sharp diagonal cleave-line (glacier cyan to cryo teal) crossing a pane to mark where the record breaks
- exactly one tiny warm ember spark inside the cold, reserved for the single flagged metre, never spreading
- segmented controls in inset frosted rails with a thaw-underline on the active segment, readouts in tracked mono

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#EAF2F8` |
| surface | `#FFFFFF` |
| surface-2 | `#F2F7FB` |
| text | `#0E2233` |
| muted | `#50708A` |
| border | `#CFE0EC` |
| accent | `#0C8FCF` |
| accent-2 | `#1FBFD6` |
| accent-3 | `#E06A2C` |
| on-accent | `#FFFFFF` |
| success | `#1FA871` |
| warning | `#E0A52C` |
| error | `#E25563` |
| info | `#0C8FCF` |

### Typography

- **Base Size**: 17px
- **Body Font**: Manrope, 'Helvetica Neue', Arial, sans-serif
- **Heading Font**: Sora, 'Helvetica Neue', Arial, sans-serif
- **Mono Font**: 'IBM Plex Mono', ui-monospace, monospace
- **Heading Weight**: 800
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700;800&display=swap

### Radii

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

### Shadows

- **Sm**: 0 14px 38px rgba(20,60,90,0.08)
- **Md**: 0 18px 50px rgba(20,60,90,0.10)
- **Lg**: 0 26px 70px rgba(20,60,90,0.14)

### Spacing

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

### Surfaces

- **Treatment**: bright-frosted-pane
- **Card Style**: luminous high-key frosted-white pane lifted by soft cold shadow, read as ice-core strata, no border and no single accent edge
- **Bg Pattern**: ice-core-strata

### Borders

- **Default Width**: 1px
- **Style**: solid
- **Character**: hairline cold rules used only between dense table rows; structure comes from the diagonal cleave-line and depth shadow, never from frames

### Motion

- **Duration**: 220ms
- **Fast**: 140ms
- **Easing**: cubic-bezier(0.2,0.8,0.2,1)
- **Philosophy**: settled-first; the finished page renders with no JS, then panes rise and reveals fade up behind an html.js gate; honours prefers-reduced-motion

## Rules

### Composition

Lay content on bright frosted panes separated by generous whitespace and cleave-line dividers, never boxes inside boxes. Each surface reads as ice-core depth strata; one diagonal cleave-line per pane marks where the record changes.

### Hierarchy

Hierarchy comes from pane scale, weight, the strata depth bands, and the single cleave-line. Headlines are large and quiet; labels and figures are tracked mono; the ember spark marks only the one flag.

### Density

Medium density, high legibility: architectural whitespace between panes, tightly ordered ruled readouts inside them, no decorative padding in controls.

### Signature

The interface is a bright frozen field read as ice-core strata: depth bands etched on high-key frost panes, one diagonal cleave-line marking where the record breaks, and one warm ember spark for the single flag. The cleave-line is the positional accent and recolours on palette swap.

### Signature Patterns

- every surface is a bright frosted pane read as etched ice-core depth strata, lifted by soft cold shadow, never bordered
- one diagonal cleave-line (glacier cyan to cryo teal) crosses a pane to mark where the record breaks
- exactly one warm ember spark marks the single flagged metre, never spreading into a fill
- segmented controls and tabs sit in inset frosted rails, the active segment lifting with a thaw-underline
- the live row, tile, or band carries a faint cyan wash and a cleave-mark inset, never a filled chip

## Layout

### Grid

Desktop: a fluid grid where panes span flexible columns and read as stacked strata; the dashboard pairs a deep-core sidebar with a bright frost main. Tablet narrows to a single content column; phone collapses to one column with controls full-width.

### Whitespace

Whitespace is structural and atmospheric: large outer margins, 48-64px between pane clusters on desktop, an 8px baseline grid. Titles are always padded from pane tops.

### Responsive

390px mobile to 2560px+ ultra-wide. Ultra-wide caps and centres content; only the hero spans 100vw. Mobile stacks to one column, drops non-essential table columns, and shrinks the hero headline with clamp() so it wraps and never clips the 390px edge.

### Breakpoints

- **Xl**: 1280
- **Lg**: 1080
- **Md**: 920
- **Sm**: 680
- **Xs**: 430

## Guidance

### Do

- Read each surface as etched ice-core strata on a bright frost pane
- Keep exactly one cleave-line per pane and one ember spark for the single flag
- Hold readouts in tracked mono and right-align figures
- Use the two cold accents like highlighters and keep the ember rare

### Don't

- Do not default to a grey wash; frost is pure white on a cold field, never muddy
- Do not give a card a single accent edge or wrap it in a frame
- Do not let the ember spread into a fill or use more than three accents
- Do not stamp the strata everywhere until it becomes wallpaper

### Accessibility

High contrast deep-core text (#0E2233) on bright frost; body 17px+, table rows 14.5px+; focus states lift to white with a glacier-cyan ring; motion respects prefers-reduced-motion; the cleave-line and ember are paired with text labels, never colour alone.

## Imagery Direction

### Pairs With

cryotype

### Summary

Bright high-key etched-frost scenes of cold mountain country - a sunlit glacier field, a frozen lake at dawn, ice-core depth strata - rendered as if incised into and seen through layered frosted glass, near-monochrome glacial blue and frost-white with fern-frost feathering along the edges, one cold rim-light along a diagonal cleave, and exactly one tiny warm spark deep in the ice. Open bright sky for an overlaid headline.

### Subjects

- a sunlit glacier field split by a diagonal crystalline cleave
- a frozen lake at clear blue dawn below frosted peaks
- an ice-core depth profile etched as stacked strata
- a frosted sensor mast on an open snow col

### Treatment

Etched into and seen through layered frosted glass, near-monochrome bright cold rendering, fern-frost dendrites along edges, one luminous cold rim-light on a diagonal cleave, one tiny warm spark; high-key not dark; atmospheric and stratified.

### Ground

Bright frozen white field under cold daylight, with open lighter sky for an overlaid headline

### Usage

Hero is one full-bleed bright etched-frost glacier field split by a crystalline cleave with the headline overlaid in the open upper space; feature and scene slots use restrained etched-frost vignettes.

### Engine Hints

- **Model**: gpt-image-2
- **Provider**: openai
- **Tool**: openai-image MCP
- **Size**: 1536x1024
- **Quality**: high

---
version: "alpha"
name: "Floe"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#EAF2F8"
  surface: "#FFFFFF"
  surface-2: "#F2F7FB"
  text: "#0E2233"
  muted: "#50708A"
  border: "#CFE0EC"
  accent: "#0C8FCF"
  accent-2: "#1FBFD6"
  accent-3: "#E06A2C"
  on-accent: "#FFFFFF"
  success: "#1FA871"
  warning: "#E0A52C"
  error: "#E25563"
  info: "#0C8FCF"
typography:
  headline-lg:
    fontFamily: "Sora, 'Helvetica Neue', Arial, sans-serif"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Sora, 'Helvetica Neue', Arial, sans-serif"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Manrope, 'Helvetica Neue', Arial, sans-serif"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "'IBM Plex Mono', ui-monospace, monospace"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "16px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface-2:
    backgroundColor: "{colors.surface-2}"
  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-accent-2:
    backgroundColor: "{colors.accent-2}"
  color-reference-accent-3:
    backgroundColor: "{colors.accent-3}"
  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}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "#000000"
    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"
---

# Floe

## Overview

Floe is a bright high-key reimagining of frost. Instead of dark glass, the interface is a frozen white field read in cold daylight: content sits on luminous frosted panes etched as ice-core depth strata, one diagonal cleave-line marks where the record changes, and one tiny warm ember spark flags the single thing that needs a hand. It is the console of a sub-zero ice-core lab.

### Values

- Read every surface as etched ice-core strata on a bright frost pane
- Mark where the record changes with exactly one diagonal cleave-line per pane
- Reserve a single warm ember spark for the one thing that needs attention
- Keep precise readouts perfectly legible in full cold daylight
- Choose high-key light deliberately as the lab's true working ground

### Anti-Values

- A muddy grey wash standing in for frost
- A single accent edge or a full frame around a card
- More than three accents, or an ember that spreads into a fill
- Strata stamped everywhere until it is wallpaper rather than depth
- The generic SaaS hero: eyebrow tag, button pair, three-stat row

### Visual Character

- bright high-key frosted-white panes on a cool frost field, lifted by soft cold shadow, never bordered
- ice-core depth strata etched as fine hairline bands that stack from firn to bedrock across cards, charts and tables
- one sharp diagonal cleave-line (glacier cyan to cryo teal) crossing a pane to mark where the record breaks
- exactly one tiny warm ember spark inside the cold, reserved for the single flagged metre, never spreading
- segmented controls in inset frosted rails with a thaw-underline on the active segment, readouts in tracked mono

## 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 | `#EAF2F8` |
| surface | `#FFFFFF` |
| surface-2 | `#F2F7FB` |
| text | `#0E2233` |
| muted | `#50708A` |
| border | `#CFE0EC` |
| accent | `#0C8FCF` |
| accent-2 | `#1FBFD6` |
| accent-3 | `#E06A2C` |
| on-accent | `#FFFFFF` |
| success | `#1FA871` |
| warning | `#E0A52C` |
| error | `#E25563` |
| info | `#0C8FCF` |

## Typography

- **Headline-Lg**: Sora, 'Helvetica Neue', Arial, sans-serif, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Sora, 'Helvetica Neue', Arial, sans-serif, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Manrope, 'Helvetica Neue', Arial, sans-serif, 17px, weight 400, line-height 1.5.
- **Label-Md**: 'IBM Plex Mono', ui-monospace, monospace, 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`

### Grid

Desktop: a fluid grid where panes span flexible columns and read as stacked strata; the dashboard pairs a deep-core sidebar with a bright frost main. Tablet narrows to a single content column; phone collapses to one column with controls full-width.

### Whitespace

Whitespace is structural and atmospheric: large outer margins, 48-64px between pane clusters on desktop, an 8px baseline grid. Titles are always padded from pane tops.

### Responsive

390px mobile to 2560px+ ultra-wide. Ultra-wide caps and centres content; only the hero spans 100vw. Mobile stacks to one column, drops non-essential table columns, and shrinks the hero headline with clamp() so it wraps and never clips the 390px edge.

### Breakpoints

- **Xl**: 1280
- **Lg**: 1080
- **Md**: 920
- **Sm**: 680
- **Xs**: 430

## Elevation & Depth

### Shadows

- **Sm**: 0 14px 38px rgba(20,60,90,0.08)
- **Md**: 0 18px 50px rgba(20,60,90,0.10)
- **Lg**: 0 26px 70px rgba(20,60,90,0.14)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: bright-frosted-pane
- **Card Style**: luminous high-key frosted-white pane lifted by soft cold shadow, read as ice-core strata, no border and no single accent edge
- **Bg Pattern**: ice-core-strata

### Borders

- **Default Width**: 1px
- **Style**: solid
- **Character**: hairline cold rules used only between dense table rows; structure comes from the diagonal cleave-line and depth shadow, never from frames

## Components

### Composition

Lay content on bright frosted panes separated by generous whitespace and cleave-line dividers, never boxes inside boxes. Each surface reads as ice-core depth strata; one diagonal cleave-line per pane marks where the record changes.

### Hierarchy

Hierarchy comes from pane scale, weight, the strata depth bands, and the single cleave-line. Headlines are large and quiet; labels and figures are tracked mono; the ember spark marks only the one flag.

### Density

Medium density, high legibility: architectural whitespace between panes, tightly ordered ruled readouts inside them, no decorative padding in controls.

### Signature

The interface is a bright frozen field read as ice-core strata: depth bands etched on high-key frost panes, one diagonal cleave-line marking where the record breaks, and one warm ember spark for the single flag. The cleave-line is the positional accent and recolours on palette swap.

### Signature Patterns

- every surface is a bright frosted pane read as etched ice-core depth strata, lifted by soft cold shadow, never bordered
- one diagonal cleave-line (glacier cyan to cryo teal) crosses a pane to mark where the record breaks
- exactly one warm ember spark marks the single flagged metre, never spreading into a fill
- segmented controls and tabs sit in inset frosted rails, the active segment lifting with a thaw-underline
- the live row, tile, or band carries a faint cyan wash and a cleave-mark inset, never a filled chip

## 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-019efd3a-bb1c-7122-8b29-8b20a8e37ae1/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 Read each surface as etched ice-core strata on a bright frost pane
- Do Keep exactly one cleave-line per pane and one ember spark for the single flag
- Do Hold readouts in tracked mono and right-align figures
- Do Use the two cold accents like highlighters and keep the ember rare
- Don't Do not default to a grey wash; frost is pure white on a cold field, never muddy
- Don't Do not give a card a single accent edge or wrap it in a frame
- Don't Do not let the ember spread into a fill or use more than three accents
- Don't Do not stamp the strata everywhere until it becomes wallpaper

### Accessibility

High contrast deep-core text (#0E2233) on bright frost; body 17px+, table rows 14.5px+; focus states lift to white with a glacier-cyan ring; motion respects prefers-reduced-motion; the cleave-line and ember are paired with text labels, never colour alone.

## Imagery Direction

### Pairs With

cryotype

### Summary

Bright high-key etched-frost scenes of cold mountain country - a sunlit glacier field, a frozen lake at dawn, ice-core depth strata - rendered as if incised into and seen through layered frosted glass, near-monochrome glacial blue and frost-white with fern-frost feathering along the edges, one cold rim-light along a diagonal cleave, and exactly one tiny warm spark deep in the ice. Open bright sky for an overlaid headline.

### Subjects

- a sunlit glacier field split by a diagonal crystalline cleave
- a frozen lake at clear blue dawn below frosted peaks
- an ice-core depth profile etched as stacked strata
- a frosted sensor mast on an open snow col

### Treatment

Etched into and seen through layered frosted glass, near-monochrome bright cold rendering, fern-frost dendrites along edges, one luminous cold rim-light on a diagonal cleave, one tiny warm spark; high-key not dark; atmospheric and stratified.

### Ground

Bright frozen white field under cold daylight, with open lighter sky for an overlaid headline

### Usage

Hero is one full-bleed bright etched-frost glacier field split by a crystalline cleave with the headline overlaid in the open upper space; feature and scene slots use restrained etched-frost vignettes.

### Engine Hints

- **Model**: gpt-image-2
- **Provider**: openai
- **Tool**: openai-image MCP
- **Size**: 1536x1024
- **Quality**: high

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floe",
  "type": "registry:theme",
  "title": "Floe shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#EAF2F8",
      "foreground": "#0E2233",
      "card": "#FFFFFF",
      "card-foreground": "#0E2233",
      "popover": "#FFFFFF",
      "popover-foreground": "#0E2233",
      "primary": "#0E2233",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#50708A",
      "muted-foreground": "#0E2233",
      "accent": "#0C8FCF",
      "accent-foreground": "#ffffff",
      "destructive": "#E25563",
      "border": "#CFE0EC",
      "input": "#CFE0EC",
      "ring": "#0C8FCF",
      "chart-1": "#0E2233",
      "chart-2": "#f4f4f5",
      "chart-3": "#0C8FCF",
      "chart-4": "#1FA871",
      "chart-5": "#E0A52C",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#0E2233",
      "sidebar-primary": "#0E2233",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0C8FCF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#CFE0EC",
      "sidebar-ring": "#0C8FCF",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0E2233",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#0C8FCF",
      "accent-foreground": "#ffffff",
      "destructive": "#E25563",
      "border": "#303642",
      "input": "#303642",
      "ring": "#0C8FCF",
      "chart-1": "#0E2233",
      "chart-2": "#f4f4f5",
      "chart-3": "#0C8FCF",
      "chart-4": "#1FA871",
      "chart-5": "#E0A52C",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0E2233",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0C8FCF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#0C8FCF",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efd3a-bb1c-7122-8b29-8b20a8e37ae1",
    "slug": "floe",
    "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",
        "accent-2",
        "accent-3",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on-accent",
        "success",
        "surface",
        "surface-2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "fast",
        "philosophy"
      ]
    }
  }
}
```