Capsule

# Capsule

## Philosophy

Capsule is an interface language for fictional cybernetic consoles that keep one person inside them. The console boots as one manga page: pearl panels of black ink and 60 lpi screentone, weighted by size and set on a near-black ground whose gutters carry the elapsed time. Controls are flat capsule keys in one ink rack, each with a single bead. The whole system is two inks and one light: black on pearl, and electric blue printed only where something is on.

### Values

- One light: blue marks only a light that is on, whether the stage in progress, a seated bead, the lit console or the one action. Lime is the one diagnostic.
- Panels, not modules: every stage of the boot is a panel sized by its weight, and the black gutter between panels is where time passes.
- Ink before interface: the pilot, the pod and the keys are drawn in manga ink and screentone; the CSS stays flat and quiet around them.
- Keys that seat: every control you press is a capsule key with one bead, and pulling or seating it changes the readout, the shell and the log together.
- Mono only for data: Share Tech Mono is reserved for times, codes, addresses and the shell, never for decoration.

### Anti-Values

- No chrome gradients, glossy pills, radial glints or bloom in CSS; chrome lives only in the drawing.
- No decorative LED beads on buttons; a bead appears only on a rack key and means seated.
- No faint background grid, pixel wallpaper or floating chips over the art.
- No generic dashboard cards, KPI tiles or three equal modules.
- No borders or outline boxes; the gutter separates.

### Visual Character

- A near-black ground #06070B with flat pearl #F7F4EA panels set on it like a manga page, each captioned in the gutter with its stage number and time in Share Tech Mono.
- A huge Barlow Condensed 700 wordmark with -0.03em tracking on solid ground, never over the art.
- Six flat capsule keys (9999px) seated in one ink rack; a seated key carries a blue bead, the Diag key a lime one, and a pulled key rises and dims.
- Shell lines in Share Tech Mono on pearl with a block cursor, and the memory address 0x2A as eight squares spelling 0010 1010.
- A boot log table with a time column where the current stage is the only tinted row.
- Black manga ink with benday screentone in the drawings, and blue printed flat only where the console is lit.

### Lineage

> In-place revision of Capsule (generation 2, formerly Y2K Chrome Manga Console). Keeps the near-black ground, pearl chambers, electric blue signal, the one lime diagnostic, the pilot and pod, the six capsule keys, the shell verse, memory 0x2A, Barlow Condensed and Share Tech Mono. Replaces chrome rails, glossy pills and pixel-glyph wallpaper with a panel sequence on black gutters.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#06070B` |
| surface | `#F7F4EA` |
| surface_solid | `#FBF9F2` |
| text | `#F2EFE6` |
| text_soft | `#C9CCD3` |
| muted | `#8E96A3` |
| border | `#FFFFFF17` |
| accent | `#4C8FD8` |
| accent_2 | `#AAD24A` |
| accent_soft | `#132438` |
| on_accent | `#06070B` |
| ink | `#06070B` |
| ink_2 | `#545B68` |
| well | `#E3DFD3` |
| tone | `#DCD8CB` |
| bead_off | `#C4C1B6` |
| shell_blue | `#1F5FA8` |
| success | `#A6C64A` |
| warning | `#D0A24A` |
| error | `#B84A55` |
| info | `#4C8FD8` |

### Typography

- **Heading Font**: Barlow Condensed
- **Body Font**: M PLUS 1p
- **Mono Font**: Share Tech Mono
- **Base Size**: 17px
- **Heading Weight**: 600
- **Display Weight**: 700
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on headings, -0.03em on the display wordmark, -0.01em on body, 0.04 to 0.06em on mono data
- **Line Height**: 1.55
- **Scale**: {"desktop":"xs max(13px, 1.1cqi), body max(17px, 1.406cqi), h3 1.8cqi, h2 3.77cqi, display 16.6cqi of a page capped at 1320px (14, 18, 23, 48 and 212px at 1280)","tablet":"xs 13px, body 17px, h3 22px, h2 38px, display 19cqi (601 to 1100px)","phone":"xs 3.6cqi, body 4.36cqi, h3 5.9cqi, h2 8.4cqi, display 27cqi (14, 17, 23, 33 and 105px at 390)"}
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=M+PLUS+1p:wght@400;500&family=Share+Tech+Mono&display=swap

### Radii

- **None**: 0px
- **Full**: 9999px

### Shadows

- **None**: none

### Spacing

- **Base**: 8px
- **Gutter**: 1.875cqi desktop, 3cqi tablet, 4.1cqi phone
- **Scale**: [4,8,12,16,24,32,48,64,96]

### Surfaces

- **Treatment**: Flat pearl panels on a near-black ground. The ground between panels is the gutter and carries the stage number and elapsed time; no chrome, gloss, gradient or grid in CSS.
- **Card Style**: Square pearl panels weighted by size, never boxed with a line; separation is the black gutter.
- **Bg Pattern**: none; screentone lives only in the drawings

### Borders

- **Default Width**: 0
- **Style**: none; the black gutter separates panels
- **Character**: Borderless. A panel is pearl against black, and the ink rack inside it is the only nested tone.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(.2,.8,.2,1)
- **Philosophy**: Motion is a key seating: a pulled key rises and dims, a pressed key seats and its bead lights. Boot the console replays the seating key by key. Nothing moves at rest; reduced motion seats every key at once.

## Rules

### Composition

- Build a view as one page of panels on the black ground, weighted by size: one large establishing panel, mid panels for the working parts, and one full-width climax.
- Caption each panel in the gutter below it: the stage number and time in mono on the left, one line of body copy beside it.
- Keep controls small at the top edge; the one interactive panel is the key rack.
- The title sits on solid ground beside or below the hero panel, never over the drawing.

### Hierarchy

- Scale carries hierarchy: the Barlow Condensed wordmark, then h2 panel heads, then body, then mono data.
- Body is M PLUS 1p 400 at 17 to 18px; mid-tier copy stays near body scale.
- Blue is the only emphasis colour, and only for something that is on.

### Density

Dense inside a panel (rack, shell, table rows at 8 to 16px), quiet between panels (one gutter, then 48 to 96px before a new sequence).

### Signature Patterns

- Panel sequence on black gutters: pearl panels weighted by size, each captioned in the gutter with its stage number and elapsed time.
- Capsule key rack: six flat capsule keys in one ink rack, one bead each; blue when seated, lime on Diag, a pulled key rises and dims, and the readout, shell and log update together.
- Boot log: a stage table with a time column where the current stage is the only row tinted accent_soft, its name and state in blue.
- Shell verse with memory 0x2A: mono shell lines on pearl ending in a block cursor, and the address 0x2A spelled as eight squares.
- Stage index: a vertical mono index 01 to 07 beside the hero panel, the current stage in blue.

## Layout

### Grid

A 12-column grid of minmax(0,1fr) columns inside a page capped at 1320px and centred on the black ground; gutter 1.875cqi. The hero is a 7.2cqi stage index plus the image panel; the sheet splits 4 and 8 columns.

### Breakpoints

>1100px: the full panel page, type in cqi with 17px and 13px floors; 601 to 1100px: its own tablet band, 5 and 7 column sheet, captions stacked, the rack in two rows of three, the log full width; 600px and below: one column, the index runs as a row under the hero, the rack in two rows of three, the log hides its signal column.

### Whitespace

Panels pad 2.4 to 2.6cqi; one gutter between panels in a sequence; 5 to 6.5cqi above a new sequence heading.

### Responsive

Every grid child has min-width:0; the hero panel and climax panel crop by background-position rather than shrinking; nothing scrolls sideways at 390px.

### Density

Dense panels, quiet gutters; never a crowded cluster beside an empty panel.

## Guidance

### Do

- Set every stage as a pearl panel on the black ground and caption it in the gutter with its number and time.
- Make every pressable control a flat capsule key; give rack keys one bead that lights blue when seated.
- Spend blue only on something that is on: the current stage, a seated bead, the one primary action, the lit console.
- Keep lime to the one diagnostic key or state.
- Use Share Tech Mono only for times, codes, addresses and shell lines.
- Keep the title on solid ground next to or below the art.

### Don't

- Don't draw chrome, gloss, glints or gradients in CSS.
- Don't put a bead on a button that is not a rack key.
- Don't lay a background grid, pixel wallpaper or chips over the drawing.
- Don't frame panels with lines or nest a panel in a panel; the ink rack is the only tone inside a panel.
- Don't tint more than one row of the log.
- Don't use radius values other than 0 for panels and wells and 9999 for keys and buttons.

### Accessibility

Body is 17px or larger at every width. Off-white #F2EFE6 on #06070B is 17.5:1, ink #06070B on pearl #F7F4EA is 18.3:1, muted #8E96A3 on the ground is 6.75:1, ink_2 #545B68 on pearl is 6.2:1, error #B84A55 on pearl is 4.6:1. Blue #4C8FD8 is 6.0:1 on the ground but only 3.1:1 on pearl, so blue is never text on pearl; shell commands on pearl use shell_blue #1F5FA8 (5.9:1). Status is never colour alone: every bead has a label. Focus is a 2px blue outline offset 3px. The page settles fully without script, and reduced motion seats every key at once.

### Usage Context

Fictional cybernetic consoles, anime-inspired developer tools, boot and deploy sequences, memory archives, terminal shells and identity pages that need Y2K anime hardware told as a manga page.

## Imagery Direction

### Pairs With

screentone-press

### Art Style Id

en-019ef811-0466-7690-98bd-ce69ccd935e0

### Summary

Black manga ink with benday screentone, drawn as the same pilot and pod throughout: the establishing hero in the pod, a close face panel, and the climax facing the reader through the open canopy. Two inks only: black on pearl, and electric blue #4C8FD8 printed flat where the console is lit. Surrounds are flat near-black #06070B so a panel meets the ground with no seam.

### Subjects

- the pilot seated in an open white pod, one blue light on the nose
- a close three-quarter face under the raised visor
- the pilot facing out through the canopy, hands on a rail of six capsule keys lit blue

### Usage

One hero panel per landing painted by var(--hero-image), one face panel and one climax panel. No text in the art, no borders, no glow.

### Palette

near-black #06070B, pearl #F7F4EA, black ink, electric blue #4C8FD8, rare lime #AAD24A

### Credits

- {"name":"1990s to 2000s shonen and mecha manga screentone","kind":"tradition","note":"benday halftone shading and bold ink contour"}
- {"name":"Y2K consumer electronics industrial design","kind":"movement","note":"capsule hardware keys and blue status lights"}

---
version: "alpha"
name: "Capsule"
description: "Capsule is an interface language for fictional cybernetic consoles that keep one person inside them. The console boots as one manga page: pearl panels of black ink and 60 lpi screentone, weighted by size and set on a near-black ground wh..."
colors:
  bg: "#06070B"
  surface: "#F7F4EA"
  surface_solid: "#FBF9F2"
  text: "#F2EFE6"
  text_soft: "#C9CCD3"
  muted: "#8E96A3"
  border: "#FFFFFF17"
  accent: "#4C8FD8"
  accent_2: "#AAD24A"
  accent_soft: "#132438"
  on_accent: "#06070B"
  ink: "#06070B"
  ink_2: "#545B68"
  well: "#E3DFD3"
  tone: "#DCD8CB"
  bead_off: "#C4C1B6"
  shell_blue: "#1F5FA8"
  success: "#A6C64A"
  warning: "#D0A24A"
  error: "#B84A55"
  info: "#4C8FD8"
typography:
  headline-lg:
    fontFamily: "Barlow Condensed"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Barlow Condensed"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "M PLUS 1p"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Share Tech Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
  gutter: "1.875cqi desktop, 3cqi tablet, 4.1cqi phone"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_solid:
    backgroundColor: "{colors.surface_solid}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-text_soft:
    backgroundColor: "{colors.text_soft}"
  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_soft:
    backgroundColor: "{colors.accent_soft}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-ink:
    backgroundColor: "{colors.ink}"
  color-reference-ink_2:
    backgroundColor: "{colors.ink_2}"
  color-reference-well:
    backgroundColor: "{colors.well}"
  color-reference-tone:
    backgroundColor: "{colors.tone}"
  color-reference-bead_off:
    backgroundColor: "{colors.bead_off}"
  color-reference-shell_blue:
    backgroundColor: "{colors.shell_blue}"
  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.none}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    height: "44px"
---

# Capsule

## Overview

Capsule is an interface language for fictional cybernetic consoles that keep one person inside them. The console boots as one manga page: pearl panels of black ink and 60 lpi screentone, weighted by size and set on a near-black ground whose gutters carry the elapsed time. Controls are flat capsule keys in one ink rack, each with a single bead. The whole system is two inks and one light: black on pearl, and electric blue printed only where something is on.

### Values

- One light: blue marks only a light that is on, whether the stage in progress, a seated bead, the lit console or the one action. Lime is the one diagnostic.
- Panels, not modules: every stage of the boot is a panel sized by its weight, and the black gutter between panels is where time passes.
- Ink before interface: the pilot, the pod and the keys are drawn in manga ink and screentone; the CSS stays flat and quiet around them.
- Keys that seat: every control you press is a capsule key with one bead, and pulling or seating it changes the readout, the shell and the log together.
- Mono only for data: Share Tech Mono is reserved for times, codes, addresses and the shell, never for decoration.

### Anti-Values

- No chrome gradients, glossy pills, radial glints or bloom in CSS; chrome lives only in the drawing.
- No decorative LED beads on buttons; a bead appears only on a rack key and means seated.
- No faint background grid, pixel wallpaper or floating chips over the art.
- No generic dashboard cards, KPI tiles or three equal modules.
- No borders or outline boxes; the gutter separates.

### Visual Character

- A near-black ground #06070B with flat pearl #F7F4EA panels set on it like a manga page, each captioned in the gutter with its stage number and time in Share Tech Mono.
- A huge Barlow Condensed 700 wordmark with -0.03em tracking on solid ground, never over the art.
- Six flat capsule keys (9999px) seated in one ink rack; a seated key carries a blue bead, the Diag key a lime one, and a pulled key rises and dims.
- Shell lines in Share Tech Mono on pearl with a block cursor, and the memory address 0x2A as eight squares spelling 0010 1010.
- A boot log table with a time column where the current stage is the only tinted row.
- Black manga ink with benday screentone in the drawings, and blue printed flat only where the console is lit.

### Lineage

> In-place revision of Capsule (generation 2, formerly Y2K Chrome Manga Console). Keeps the near-black ground, pearl chambers, electric blue signal, the one lime diagnostic, the pilot and pod, the six capsule keys, the shell verse, memory 0x2A, Barlow Condensed and Share Tech Mono. Replaces chrome rails, glossy pills and pixel-glyph wallpaper with a panel sequence on black gutters.

## 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 | `#06070B` |
| surface | `#F7F4EA` |
| surface_solid | `#FBF9F2` |
| text | `#F2EFE6` |
| text_soft | `#C9CCD3` |
| muted | `#8E96A3` |
| border | `#FFFFFF17` |
| accent | `#4C8FD8` |
| accent_2 | `#AAD24A` |
| accent_soft | `#132438` |
| on_accent | `#06070B` |
| ink | `#06070B` |
| ink_2 | `#545B68` |
| well | `#E3DFD3` |
| tone | `#DCD8CB` |
| bead_off | `#C4C1B6` |
| shell_blue | `#1F5FA8` |
| success | `#A6C64A` |
| warning | `#D0A24A` |
| error | `#B84A55` |
| info | `#4C8FD8` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=M+PLUS+1p:wght@400;500&family=Share+Tech+Mono&display=swap

- **Headline-Lg**: Barlow Condensed, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Barlow Condensed, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: M PLUS 1p, 17px, weight 400, line-height 1.55.
- **Label-Md**: Share Tech 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**: `96px`
- **Gutter**: `1.875cqi desktop, 3cqi tablet, 4.1cqi phone`

### Grid

A 12-column grid of minmax(0,1fr) columns inside a page capped at 1320px and centred on the black ground; gutter 1.875cqi. The hero is a 7.2cqi stage index plus the image panel; the sheet splits 4 and 8 columns.

### Breakpoints

>1100px: the full panel page, type in cqi with 17px and 13px floors; 601 to 1100px: its own tablet band, 5 and 7 column sheet, captions stacked, the rack in two rows of three, the log full width; 600px and below: one column, the index runs as a row under the hero, the rack in two rows of three, the log hides its signal column.

### Whitespace

Panels pad 2.4 to 2.6cqi; one gutter between panels in a sequence; 5 to 6.5cqi above a new sequence heading.

### Responsive

Every grid child has min-width:0; the hero panel and climax panel crop by background-position rather than shrinking; nothing scrolls sideways at 390px.

### Density

Dense panels, quiet gutters; never a crowded cluster beside an empty panel.

## Elevation & Depth

### Shadows

- **None**: none

## Shapes

### Rounded

- **None**: `0px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: Flat pearl panels on a near-black ground. The ground between panels is the gutter and carries the stage number and elapsed time; no chrome, gloss, gradient or grid in CSS.
- **Card Style**: Square pearl panels weighted by size, never boxed with a line; separation is the black gutter.
- **Bg Pattern**: none; screentone lives only in the drawings

### Borders

- **Default Width**: 0
- **Style**: none; the black gutter separates panels
- **Character**: Borderless. A panel is pearl against black, and the ink rack inside it is the only nested tone.

## Components

### Composition

- Build a view as one page of panels on the black ground, weighted by size: one large establishing panel, mid panels for the working parts, and one full-width climax.
- Caption each panel in the gutter below it: the stage number and time in mono on the left, one line of body copy beside it.
- Keep controls small at the top edge; the one interactive panel is the key rack.
- The title sits on solid ground beside or below the hero panel, never over the drawing.

### Hierarchy

- Scale carries hierarchy: the Barlow Condensed wordmark, then h2 panel heads, then body, then mono data.
- Body is M PLUS 1p 400 at 17 to 18px; mid-tier copy stays near body scale.
- Blue is the only emphasis colour, and only for something that is on.

### Density

Dense inside a panel (rack, shell, table rows at 8 to 16px), quiet between panels (one gutter, then 48 to 96px before a new sequence).

### Signature Patterns

- Panel sequence on black gutters: pearl panels weighted by size, each captioned in the gutter with its stage number and elapsed time.
- Capsule key rack: six flat capsule keys in one ink rack, one bead each; blue when seated, lime on Diag, a pulled key rises and dims, and the readout, shell and log update together.
- Boot log: a stage table with a time column where the current stage is the only row tinted accent_soft, its name and state in blue.
- Shell verse with memory 0x2A: mono shell lines on pearl ending in a block cursor, and the address 0x2A spelled as eight squares.
- Stage index: a vertical mono index 01 to 07 beside the hero panel, the current stage in blue.

## 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-01a0ee7f-0882-7732-8766-482a22b203ea/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a0ee7f-0882-7732-8766-482a22b203ea/shadcn.json` (registry theme), `/language/en-01a0ee7f-0882-7732-8766-482a22b203ea/shadcn-components.md` (component recipes) and `/language/en-01a0ee7f-0882-7732-8766-482a22b203ea/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 Set every stage as a pearl panel on the black ground and caption it in the gutter with its number and time.
- Do Make every pressable control a flat capsule key; give rack keys one bead that lights blue when seated.
- Do Spend blue only on something that is on: the current stage, a seated bead, the one primary action, the lit console.
- Do Keep lime to the one diagnostic key or state.
- Do Use Share Tech Mono only for times, codes, addresses and shell lines.
- Do Keep the title on solid ground next to or below the art.
- Don't Don't draw chrome, gloss, glints or gradients in CSS.
- Don't Don't put a bead on a button that is not a rack key.
- Don't Don't lay a background grid, pixel wallpaper or chips over the drawing.
- Don't Don't frame panels with lines or nest a panel in a panel; the ink rack is the only tone inside a panel.
- Don't Don't tint more than one row of the log.
- Don't Don't use radius values other than 0 for panels and wells and 9999 for keys and buttons.

### Accessibility

Body is 17px or larger at every width. Off-white #F2EFE6 on #06070B is 17.5:1, ink #06070B on pearl #F7F4EA is 18.3:1, muted #8E96A3 on the ground is 6.75:1, ink_2 #545B68 on pearl is 6.2:1, error #B84A55 on pearl is 4.6:1. Blue #4C8FD8 is 6.0:1 on the ground but only 3.1:1 on pearl, so blue is never text on pearl; shell commands on pearl use shell_blue #1F5FA8 (5.9:1). Status is never colour alone: every bead has a label. Focus is a 2px blue outline offset 3px. The page settles fully without script, and reduced motion seats every key at once.

### Usage Context

Fictional cybernetic consoles, anime-inspired developer tools, boot and deploy sequences, memory archives, terminal shells and identity pages that need Y2K anime hardware told as a manga page.

## Imagery Direction

### Pairs With

screentone-press

### Art Style Id

en-019ef811-0466-7690-98bd-ce69ccd935e0

### Summary

Black manga ink with benday screentone, drawn as the same pilot and pod throughout: the establishing hero in the pod, a close face panel, and the climax facing the reader through the open canopy. Two inks only: black on pearl, and electric blue #4C8FD8 printed flat where the console is lit. Surrounds are flat near-black #06070B so a panel meets the ground with no seam.

### Subjects

- the pilot seated in an open white pod, one blue light on the nose
- a close three-quarter face under the raised visor
- the pilot facing out through the canopy, hands on a rail of six capsule keys lit blue

### Usage

One hero panel per landing painted by var(--hero-image), one face panel and one climax panel. No text in the art, no borders, no glow.

### Palette

near-black #06070B, pearl #F7F4EA, black ink, electric blue #4C8FD8, rare lime #AAD24A

### Credits

- {"name":"1990s to 2000s shonen and mecha manga screentone","kind":"tradition","note":"benday halftone shading and bold ink contour"}
- {"name":"Y2K consumer electronics industrial design","kind":"movement","note":"capsule hardware keys and blue status lights"}

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "capsule",
  "type": "registry:theme",
  "title": "Capsule shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#06070B",
      "foreground": "#F2EFE6",
      "card": "#F7F4EA",
      "card-foreground": "#F2EFE6",
      "popover": "#F7F4EA",
      "popover-foreground": "#F2EFE6",
      "primary": "#F2EFE6",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#8E96A3",
      "muted-foreground": "#F2EFE6",
      "accent": "#4C8FD8",
      "accent-foreground": "#ffffff",
      "destructive": "#B84A55",
      "border": "#FFFFFF17",
      "input": "#FFFFFF17",
      "ring": "#4C8FD8",
      "chart-1": "#F2EFE6",
      "chart-2": "#f4f4f5",
      "chart-3": "#4C8FD8",
      "chart-4": "#A6C64A",
      "chart-5": "#D0A24A",
      "sidebar": "#F7F4EA",
      "sidebar-foreground": "#F2EFE6",
      "sidebar-primary": "#F2EFE6",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#4C8FD8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#FFFFFF17",
      "sidebar-ring": "#4C8FD8",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#F2EFE6",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#4C8FD8",
      "accent-foreground": "#ffffff",
      "destructive": "#B84A55",
      "border": "#303642",
      "input": "#303642",
      "ring": "#4C8FD8",
      "chart-1": "#F2EFE6",
      "chart-2": "#f4f4f5",
      "chart-3": "#4C8FD8",
      "chart-4": "#A6C64A",
      "chart-5": "#D0A24A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#F2EFE6",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#4C8FD8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#4C8FD8",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a0ee7f-0882-7732-8766-482a22b203ea",
    "slug": "capsule",
    "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_soft",
        "bead_off",
        "bg",
        "border",
        "error",
        "info",
        "ink",
        "ink_2",
        "muted",
        "on_accent",
        "shell_blue",
        "success",
        "surface",
        "surface_solid",
        "text",
        "text_soft",
        "tone",
        "warning",
        "well"
      ],
      "typography": [
        "base_size",
        "body_font",
        "display_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale"
      ],
      "radii": [
        "full",
        "none"
      ],
      "shadows": [
        "none"
      ],
      "spacing": [
        "base",
        "gutter",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```