Launch

# Launch

## Philosophy

The expensive white launch page, played straight. The version number is the hero, set huge in a tight neo-grotesk on pure white; one blue means new; one yellow sticker is slapped across the headline at an angle for the one claim; one black pill is the one action; and a prompt box, a soft pill with a round send button, is the first input on the page. Cards are white with soft layered shadows and 24px corners, pills are fully round, and nothing on the page is cheap enough to be the joke: the jokes live in the copy.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FFFFFF` |
| surface | `#FFFFFF` |
| soft | `#F5F6F8` |
| text | `#0B0B0C` |
| muted | `#5E636B` |
| faint | `#8A8F98` |
| line | `#E9EAEE` |
| accent | `#2F5BFF` |
| accent_press | `#1E44E6` |
| on_accent | `#FFFFFF` |
| sticker | `#FFE14D` |
| on_sticker | `#0B0B0C` |
| success | `#12805C` |
| warning | `#FFE14D` |
| error | `#D52B1E` |
| info | `#2F5BFF` |

### Typography

- **Heading Font**: Stack Sans Headline
- **Body Font**: Stack Sans Text
- **Mono Font**: Red Hat Mono
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@500;600;700&family=Stack+Sans+Text:wght@400;500;600&family=Red+Hat+Mono:wght@400;500;600&display=swap

### Radii

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

### Spacing

- **Base**: 8px
- **Xs**: 4px
- **Sm**: 8px
- **Md**: 16px
- **Lg**: 24px
- **Xl**: 48px
- **Xxl**: 96px
- **Section**: 144px

## Rules

### Components

- **Navigation.** A plain ring (one ellipse, 2.5px ink stroke) and the wordmark in Stack Sans Headline 600 at 24px; links in Stack Sans Text 500 at 16px in `muted` with ink on hover; Log in in ink; a `soft` pill on the right, because the black pill belongs to the hero.
- **Eyebrow pill.** Blue fill, white Red Hat Mono 500 capitals at 13px with `0.06em` tracking, 28px tall: `NEW · TODAY`. Last week's version gets a `soft` pill with `muted` text: `LAST WEEK`.
- **Version number.** As set in Typography. In a list the current version is a blue mono tag; past versions are `muted`.
- **Sticker.** A yellow pill with ink Stack Sans Headline 700 at 28px to 40px, a 6px white edge and a short shadow, set right after the headline's last word, raised a little and rotated -4deg, as if pressed on over the line. One per view, carrying one claim of four words or fewer. It slaps on once in 180ms (scale 1.6 to 1 with a small overshoot).
- **Buttons.** Primary: ink pill, white Stack Sans Text 600 at 17px, 52px tall, 26px side padding, a trailing arrow; one per view. Secondary: `soft` pill with ink text. Tertiary: an ink text link with an arrow. Hover lifts 1px with a small shadow; active scales to 0.97 and the ink pill lightens to `#2A2C30`; focus draws a 2px blue ring 2px outside; disabled is `soft` with `faint` text. Labels never wrap.
- **Prompt box.** A white pill 64px tall on the layered shadow, with a `soft` well 4px inside it, Stack Sans Text 18px in ink, the hint in `muted`, and a 44px round send button on the right: ink with a white arrow when there is text, `line` with a `faint` arrow when empty. It is a real form that submits with Enter.
- **Inputs and selects.** A `soft` well 52px tall, 16px radius, no border, Stack Sans Text 17px; the label above in Stack Sans Text 500 at 15px; focus adds the blue ring; an error adds a 2px red inset ring and one sentence in red under the field. Selects draw their own chevron.
- **Checkboxes, radios, toggles and segments.** Checkboxes and radios are 22px circles with a 1.5px `faint` ring; on, a checkbox fills ink with a white tick and a radio shows an ink dot. Toggles are 44 by 26px pills, `faint` when off and ink when on, with a white knob. The segmented control is a `soft` pill track whose chosen segment is a white pill on a small shadow.
- **Cards.** White, 24px radius, layered shadow, 40px padding; a Red Hat Mono tag at the top, a 24px to 26px title in Stack Sans Headline 600, body in `muted` for supporting copy, and the price or the key figure in ink.
- **Tables.** Hairline rows in `line`, headers in Red Hat Mono 500 capitals in `muted`, cells in Stack Sans Text 500 at 16px. The current version's column is a `soft` band with its numbers in ink 600; past versions are in `muted`.
- **Changelog.** One row per release: the version tag in mono (blue if current), a relative date, the headline of the release in Stack Sans Text 600, and nothing else.
- **Code block.** A `soft` well, 16px radius, Red Hat Mono 15px with a 1.75 line height, the model id in blue and comments in `muted`.
- **Status and toasts.** A 10px green dot with "All systems normal" in `muted`; toasts are ink pills at the bottom centre with white text.

## Layout

### Summary

- **The hero is a split on white.** The navigation runs across the top on white. Below it the hero is one full-bleed picture in the paired art style, a single figure standing on the same white as the page; the left seven of twelve columns hold the eyebrow pill, the version, the headline with its sticker, one line of copy, the actions and the prompt box, set directly on the picture's empty white. Under 1280px the picture comes first, cropped to the figure, and the words follow.
- **Container.** A 1200px content column on marketing pages and 1296px in a product, with 24px gutters and outer margins of 96px from 1280px up (72px in a product), 48px on tablets and 20px on phones. Grid children carry `min-width: 0`; columns use `minmax(0, 1fr)`.
- **Rhythm.** Sections sit 144px apart (96px on phones). Cards sit in grids of three or four with 24px gaps and pad 40px (28px on phones), with room above every title.
- **One of each per view.** One version number, one sticker, one black pill, one prompt box. In a product the black pill belongs to the screen's own task (Create key on the keys screen), and an announcement on that screen uses the `soft` pill. A second launch on the same page (last week's) is shown smaller and in `muted`, never as a rival.
- **Phones (390px).** One column; the version drops to 34vw; the sticker keeps its tilt and moves under the headline; the prompt box runs full width; tables keep their first column, the current version and the one before it.

## Guidance

### Do

- make the version number the largest thing on a launch page.
- keep blue for what is new, and the black pill for the one action.
- slap on exactly one sticker per view, carrying one short claim.
- put a working prompt box near the top: let people try it before they read.
- write the copy straight: real numbers, real dates, real prices. The page never winks.
- style every control, from the round checkbox to the select chevron.

### Don't

- use gradients, glows, glass, purple, or a dark hero.
- use a second accent colour or a second sticker.
- box the hero figure in a card or put a scene behind it.
- show logos of real companies as customers or partners.
- put grey borders around cards, inputs or code; use shadows and wells.
- put emoji on buttons or in headlines.

## Imagery Direction

### Pairs With

cel-couture

### Art Style Id

en-01a1173c-a0d6-7781-8a8f-5cd0f2c0f52b

---
version: "alpha"
name: "Launch"
description: "The expensive white launch page, played straight. The version number is the hero, set huge in a tight neo-grotesk on pure white; one blue means new; one yellow sticker is slapped across the headline at an angle for the one claim; one bla..."
colors:
  bg: "#FFFFFF"
  surface: "#FFFFFF"
  soft: "#F5F6F8"
  text: "#0B0B0C"
  muted: "#5E636B"
  faint: "#8A8F98"
  line: "#E9EAEE"
  accent: "#2F5BFF"
  accent_press: "#1E44E6"
  on_accent: "#FFFFFF"
  sticker: "#FFE14D"
  on_sticker: "#0B0B0C"
  success: "#12805C"
  warning: "#FFE14D"
  error: "#D52B1E"
  info: "#2F5BFF"
typography:
  headline-lg:
    fontFamily: "Stack Sans Headline"
    fontSize: "1.953rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Stack Sans Headline"
    fontSize: "1.563rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Stack Sans Text"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Red Hat Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "48px"
  xxl: "96px"
  section: "144px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-soft:
    backgroundColor: "{colors.soft}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-faint:
    backgroundColor: "{colors.faint}"
  color-reference-line:
    backgroundColor: "{colors.line}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_press:
    backgroundColor: "{colors.accent_press}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-sticker:
    backgroundColor: "{colors.sticker}"
  color-reference-on_sticker:
    backgroundColor: "{colors.on_sticker}"
  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: "{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"
---

# Launch

## Overview

The expensive white launch page, played straight. The version number is the hero, set huge in a tight neo-grotesk on pure white; one blue means new; one yellow sticker is slapped across the headline at an angle for the one claim; one black pill is the one action; and a prompt box, a soft pill with a round send button, is the first input on the page. Cards are white with soft layered shadows and 24px corners, pills are fully round, and nothing on the page is cheap enough to be the joke: the jokes live in the copy.

## 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 | `#FFFFFF` |
| surface | `#FFFFFF` |
| soft | `#F5F6F8` |
| text | `#0B0B0C` |
| muted | `#5E636B` |
| faint | `#8A8F98` |
| line | `#E9EAEE` |
| accent | `#2F5BFF` |
| accent_press | `#1E44E6` |
| on_accent | `#FFFFFF` |
| sticker | `#FFE14D` |
| on_sticker | `#0B0B0C` |
| success | `#12805C` |
| warning | `#FFE14D` |
| error | `#D52B1E` |
| info | `#2F5BFF` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@500;600;700&family=Stack+Sans+Text:wght@400;500;600&family=Red+Hat+Mono:wght@400;500;600&display=swap

- **Headline-Lg**: Stack Sans Headline, 1.953rem, weight 700, line-height 1.1.
- **Headline-Md**: Stack Sans Headline, 1.563rem, weight 600, line-height 1.15.
- **Body-Md**: Stack Sans Text, 16px, weight 400, line-height 1.5.
- **Label-Md**: Red Hat Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `16px`
- **Lg**: `24px`
- **Xl**: `48px`
- **Xxl**: `96px`
- **Section**: `144px`

### Summary

- **The hero is a split on white.** The navigation runs across the top on white. Below it the hero is one full-bleed picture in the paired art style, a single figure standing on the same white as the page; the left seven of twelve columns hold the eyebrow pill, the version, the headline with its sticker, one line of copy, the actions and the prompt box, set directly on the picture's empty white. Under 1280px the picture comes first, cropped to the figure, and the words follow.
- **Container.** A 1200px content column on marketing pages and 1296px in a product, with 24px gutters and outer margins of 96px from 1280px up (72px in a product), 48px on tablets and 20px on phones. Grid children carry `min-width: 0`; columns use `minmax(0, 1fr)`.
- **Rhythm.** Sections sit 144px apart (96px on phones). Cards sit in grids of three or four with 24px gaps and pad 40px (28px on phones), with room above every title.
- **One of each per view.** One version number, one sticker, one black pill, one prompt box. In a product the black pill belongs to the screen's own task (Create key on the keys screen), and an announcement on that screen uses the `soft` pill. A second launch on the same page (last week's) is shown smaller and in `muted`, never as a rival.
- **Phones (390px).** One column; the version drops to 34vw; the sticker keeps its tilt and moves under the headline; the prompt box runs full width; tables keep their first column, the current version and the one before it.

## Shapes

### Rounded

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

## Components

### Components

- **Navigation.** A plain ring (one ellipse, 2.5px ink stroke) and the wordmark in Stack Sans Headline 600 at 24px; links in Stack Sans Text 500 at 16px in `muted` with ink on hover; Log in in ink; a `soft` pill on the right, because the black pill belongs to the hero.
- **Eyebrow pill.** Blue fill, white Red Hat Mono 500 capitals at 13px with `0.06em` tracking, 28px tall: `NEW · TODAY`. Last week's version gets a `soft` pill with `muted` text: `LAST WEEK`.
- **Version number.** As set in Typography. In a list the current version is a blue mono tag; past versions are `muted`.
- **Sticker.** A yellow pill with ink Stack Sans Headline 700 at 28px to 40px, a 6px white edge and a short shadow, set right after the headline's last word, raised a little and rotated -4deg, as if pressed on over the line. One per view, carrying one claim of four words or fewer. It slaps on once in 180ms (scale 1.6 to 1 with a small overshoot).
- **Buttons.** Primary: ink pill, white Stack Sans Text 600 at 17px, 52px tall, 26px side padding, a trailing arrow; one per view. Secondary: `soft` pill with ink text. Tertiary: an ink text link with an arrow. Hover lifts 1px with a small shadow; active scales to 0.97 and the ink pill lightens to `#2A2C30`; focus draws a 2px blue ring 2px outside; disabled is `soft` with `faint` text. Labels never wrap.
- **Prompt box.** A white pill 64px tall on the layered shadow, with a `soft` well 4px inside it, Stack Sans Text 18px in ink, the hint in `muted`, and a 44px round send button on the right: ink with a white arrow when there is text, `line` with a `faint` arrow when empty. It is a real form that submits with Enter.
- **Inputs and selects.** A `soft` well 52px tall, 16px radius, no border, Stack Sans Text 17px; the label above in Stack Sans Text 500 at 15px; focus adds the blue ring; an error adds a 2px red inset ring and one sentence in red under the field. Selects draw their own chevron.
- **Checkboxes, radios, toggles and segments.** Checkboxes and radios are 22px circles with a 1.5px `faint` ring; on, a checkbox fills ink with a white tick and a radio shows an ink dot. Toggles are 44 by 26px pills, `faint` when off and ink when on, with a white knob. The segmented control is a `soft` pill track whose chosen segment is a white pill on a small shadow.
- **Cards.** White, 24px radius, layered shadow, 40px padding; a Red Hat Mono tag at the top, a 24px to 26px title in Stack Sans Headline 600, body in `muted` for supporting copy, and the price or the key figure in ink.
- **Tables.** Hairline rows in `line`, headers in Red Hat Mono 500 capitals in `muted`, cells in Stack Sans Text 500 at 16px. The current version's column is a `soft` band with its numbers in ink 600; past versions are in `muted`.
- **Changelog.** One row per release: the version tag in mono (blue if current), a relative date, the headline of the release in Stack Sans Text 600, and nothing else.
- **Code block.** A `soft` well, 16px radius, Red Hat Mono 15px with a 1.75 line height, the model id in blue and comments in `muted`.
- **Status and toasts.** A 10px green dot with "All systems normal" in `muted`; toasts are ink pills at the bottom centre with white text.

## 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-01a11748-7537-75e3-a03e-3c4529c47b79/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a11748-7537-75e3-a03e-3c4529c47b79/shadcn.json` (registry theme), `/language/en-01a11748-7537-75e3-a03e-3c4529c47b79/shadcn-components.md` (component recipes) and `/language/en-01a11748-7537-75e3-a03e-3c4529c47b79/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 make the version number the largest thing on a launch page.
- Do keep blue for what is new, and the black pill for the one action.
- Do slap on exactly one sticker per view, carrying one short claim.
- Do put a working prompt box near the top: let people try it before they read.
- Do write the copy straight: real numbers, real dates, real prices. The page never winks.
- Do style every control, from the round checkbox to the select chevron.
- Don't use gradients, glows, glass, purple, or a dark hero.
- Don't use a second accent colour or a second sticker.
- Don't box the hero figure in a card or put a scene behind it.
- Don't show logos of real companies as customers or partners.
- Don't put grey borders around cards, inputs or code; use shadows and wells.
- Don't put emoji on buttons or in headlines.

## Imagery Direction

### Pairs With

cel-couture

### Art Style Id

en-01a1173c-a0d6-7781-8a8f-5cd0f2c0f52b

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "launch",
  "type": "registry:theme",
  "title": "Launch shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#0B0B0C",
      "card": "#FFFFFF",
      "card-foreground": "#0B0B0C",
      "popover": "#FFFFFF",
      "popover-foreground": "#0B0B0C",
      "primary": "#0B0B0C",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#5E636B",
      "muted-foreground": "#0B0B0C",
      "accent": "#2F5BFF",
      "accent-foreground": "#ffffff",
      "destructive": "#D52B1E",
      "border": "#e4e4e7",
      "input": "#e4e4e7",
      "ring": "#2F5BFF",
      "chart-1": "#0B0B0C",
      "chart-2": "#f4f4f5",
      "chart-3": "#2F5BFF",
      "chart-4": "#12805C",
      "chart-5": "#FFE14D",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#0B0B0C",
      "sidebar-primary": "#0B0B0C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F5BFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#e4e4e7",
      "sidebar-ring": "#2F5BFF",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0B0B0C",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#2F5BFF",
      "accent-foreground": "#ffffff",
      "destructive": "#D52B1E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#2F5BFF",
      "chart-1": "#0B0B0C",
      "chart-2": "#f4f4f5",
      "chart-3": "#2F5BFF",
      "chart-4": "#12805C",
      "chart-5": "#FFE14D",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0B0B0C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F5BFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#2F5BFF",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a11748-7537-75e3-a03e-3c4529c47b79",
    "slug": "launch",
    "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_press",
        "bg",
        "error",
        "faint",
        "info",
        "line",
        "muted",
        "on_accent",
        "on_sticker",
        "soft",
        "sticker",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "body_font",
        "google_fonts_url",
        "heading_font",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "spacing": [
        "base",
        "lg",
        "md",
        "section",
        "sm",
        "xl",
        "xs",
        "xxl"
      ]
    }
  }
}
```