Back to gallery

Amikake Console

Amikake Console is a manga volume of handheld software.

Its pictures are drawn in Screentone Press.

Download DESIGN.md

Tokens, rules and the paired art style Screentone Press.

Preview

Open full page

Typography

Each face set in this language's own words.

headline lgTeko, 33px, 700

Amikake Console

headline mdTeko, 27px, 600

Amikake Console

body mdZen Kaku Gothic New, 17px, 400

Amikake Console is a manga volume of handheld software.

label mdReddit Mono, 12px, 600

Amikake Console is a manga volume of handheld software.

Specification

Philosophy

summary

Amikake Console is a manga volume of handheld software. A full-bleed screentone drawing of a hand gripping a debug console opens the page, and below it the product speaks on warm paper in black ink: clipped panels with a halftone corner, a grey console rail with screws and battery chips, and terminal labels that confirm every input. One acid-lime mark belongs to the one live thing in a view, and every status carries a word and a shape before it carries a colour.

It values

  • The drawing leads: the hero is a real gekiga plate and the headline sits on paper below it, never on a scrim
  • One acid-lime mark for the one live thing; everything else is ink and paper
  • Status is a word and a shape first, colour second
  • Panels crop, overlap and notch like a printed page; never three equal cards
  • Small text behaves like device metadata: each label is a promise the interface keeps
  • Generous paper: blank space is part of the design, not a gap to fill

It refuses

  • Gradients, chrome sheen and scrims over the drawing
  • Mono eyebrow labels over every heading, numbered cards and invented stat bands
  • A second accent colour or a multi-neon cyberpunk palette
  • Soft rounded SaaS cards and glass blurs
  • Colour-only status

visual character

  • Warm paper #F2EDE3 with pure ink #11110F and one acid lime #B7D23A
  • Teko uppercase at huge scale for display, Zen Kaku Gothic New 17px for prose, Reddit Mono for metadata
  • Clipped panels with an inset 4px ink rule and a 20px notch
  • An 84px halftone triangle in each panel's top-right corner
  • A flat grey console rail with two screws and battery-style chips
  • Deeper semantic inks (olive, ochre, brick, ink-teal) that can carry words on paper

lineage

In-place revision of the live Amikake Console. It keeps the name, the warm paper, ink and one acid lime, Teko and Reddit Mono, and the page order. It moves the headline below a hero-first drawing, retires the gradients, chrome sheen and diagonal wash for flat rails and an SVG halftone, retunes the semantics to deeper inks and replaces IBM Plex Sans JP with Zen Kaku Gothic New.

Tokens
colors13
bg
#F2EDE3
surface
#FFFDF6
text
#11110F
muted
#55534C
border
#11110F
accent
#B7D23A
on accent
#11110F
accent ink
#3A4A0E
rail
#D6D3CA
success
#4C6A00
warning
#8A5A00
error
#A82C22
info
#2F5F6E
typography12
heading font
Teko
body font
Zen Kaku Gothic New
mono font
Reddit Mono
heading weight
600
display weight
700
body weight
400
heading transform
uppercase
letter spacing
-0.02em on display and headings; 0 on Reddit Mono
base size
17px
line height
1.65
scale
15px, 16px, 17px, 19px, 24px, 30px, 42px, 58px, 72px, 136px
google fonts url
https://fonts.googleapis.com/css2?family=Teko:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Reddit+Mono:wght@400;500;700&display=swap
radii5
none
0px
sm
0px
md
0px
lg
0px
full
9999px
shadows3
press
4px 4px 0 #11110F on button hover only
panel
none; panels are flat ink-ruled paper
none
everything else is flat
spacing2
base
8px
scale
4px, 8px, 12px, 16px, 24px, 40px, 64px, 96px, 112px
surfaces5
treatment
hero-drawing-then-warm-paper
card style
Clipped manga panels: an inset 4px ink rule drawn as box-shadow, a 20px notch cut from the bottom-right corner, and an 84px halftone triangle in the top-right corner at 40% opacity. Variants: paper, ink, lime.
rail
A flat #D6D3CA pill strip with a 10px ink screw dot at each end and mono chips inside; the live chip is lime.
bg pattern
none; the paper is flat. Halftone appears only as the one corner block, drawn as an SVG dot tile.
screen
Ink #11110F terminal block with a clipped bottom-right corner; dim lines in #A8A599, the one live line in lime.
borders3
default width
0
style
none
character
No borders. The ink panel rule is an inset 4px box-shadow on a clipped panel, table rows take a 3px ink top rule, and the flow columns a 4px ink top rule. Never grey, never decorative.
motion3
duration
150ms
easing
ease
philosophy
Firmware confirming input: buttons lift 2px with a hard 4px ink shadow on hover. The settled page renders with no JavaScript and prefers-reduced-motion removes the transition.
controls2
height
54px
radius
0px
Rules

composition

  • Open with the full-bleed hero drawing; the nav sits on it as flat paper chips, and the headline and two buttons sit on the paper below it.
  • Build the deck on a 12-column grid with 24px gutters: a 7 and a 5 span, then a 5 and a 7, so no two rows match.
  • Keep panels clipped: a 20px notch at the bottom right and a halftone triangle at the top right, with an inset 4px ink rule.
  • Leave real blank paper between sections: 56px on phones to 112px on desktop.
  • Cap content at 1320px and centre it; only the hero and the closing band run full width.

hierarchy

  • Display in Teko 700 uppercase at 58 to 136px with 0.84 line height; section titles in Teko 600 at 42 to 72px.
  • Panel titles in Teko 600 at 30 to 40px; prose at 17 to 19px; mono metadata at 15 to 16px.
  • Ink weight second: the 4px panel rule and the 3px table rule.
  • Lime only on the one live marker, the primary button and the live chip.

density

Calm page density with tight console clusters: 12px gaps inside rails, 24px between panels, 56 to 112px between sections.

signature patterns

  • Hero-first drawing: a full-bleed screentone plate with the one lime mark on the screen, painted through var(--hero-image).
  • Clipped manga panel: inset ink rule, notched corner, halftone triangle; paper, ink and lime variants.
  • Console rail: a flat grey pill with two screw dots and mono chips; the one live chip is lime and round.
  • Live tag: a skewed lime stroke behind the one phrase that is live in a view.
  • Terminal screen: an ink block with a clipped corner, dim ok lines and one lime live line.
Layout

grid

type
hero drawing, then a 12-column manga deck
max width
1320px content, centred above 1440px
gutter
24px between panels, 40px page gutter on desktop and 20px on phones
column behavior
Deck spans 7+5 then 5+7; the split is 1.05fr and 1fr; every grid child has min-width:0.

whitespace

section gap
112px desktop, 56px phone
card gap
24px desktop, 18px phone
content padding
24 to 40px inside panels
approach
Blank paper is part of the design; the drawing above and the ink band below hold the page.

density

default
comfortable
comfortable
button height 54pxrow height 48 to 60px table rowsrail height about 44px

responsive

Phones (390px) stack every grid to one column, shorten the hero to 56svh and keep only the Get the kit link in the nav. Tablets (601 to 1199px) use a 6-column deck with two-column flow, and the last flow step spans both. Above 1440px the content caps and centres.

breakpoints

mobile
390px
phone max
600px
tablet
601 to 1199px
desktop
1280px
wide
1441px
ultrawide
2560px
Guidance

Do

  • Lead with the drawing and put the headline on paper below it.
  • Spend lime on the one live thing in a view and nowhere else.
  • Pair every status with a word and a shape before its colour.
  • Make one panel visibly hardware: a rail with screws and a battery chip.
  • Vary the panel spans so no two rows match.
  • Use #3A4A0E for lime-family text on paper.
  • Write microcopy as confirmations: what happened, in how long.

Avoid

  • Don't add gradients, chrome sheen, scrims or diagonal washes.
  • Don't put mono eyebrows over headings or number the cards.
  • Don't add a second accent, and don't use pastel or neon status colours.
  • Don't round a rectangle; only the rail and the live chip are round.
  • Don't invent stat bands or equal cards.
  • Don't set text over busy drawing.
Imagery

pairs with

screentone-press

art style id

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

summary

Bold black manga ink and gekiga halftone screentone on warm off-white paper with exactly one acid-lime hand-drawn accent. The hero is a frame-filling plate of a hand gripping a portable console, the lime mark on its screen.

subjects

  • a hand gripping a portable debug console
  • a circuit-dense device underside
  • a courier on a bicycle with a handheld console
  • a rider crossing a halftone-shaded street

usage

One full-bleed hero per landing at the very top, painted with var(--hero-image); the nav sits on it as flat paper chips and the headline sits on the paper below, never over the drawing. Reserve the single lime mark for the live element in the image.

avoid

Scrims or gradients over the plate, text on the drawing, a second spot colour, panel borders and white margins in the plate.

Katagami spec file
# Amikake Console

## Philosophy

Amikake Console is a manga volume of handheld software. A full-bleed screentone drawing of a hand gripping a debug console opens the page, and below it the product speaks on warm paper in black ink: clipped panels with a halftone corner, a grey console rail with screws and battery chips, and terminal labels that confirm every input. One acid-lime mark belongs to the one live thing in a view, and every status carries a word and a shape before it carries a colour.

### Values

- The drawing leads: the hero is a real gekiga plate and the headline sits on paper below it, never on a scrim
- One acid-lime mark for the one live thing; everything else is ink and paper
- Status is a word and a shape first, colour second
- Panels crop, overlap and notch like a printed page; never three equal cards
- Small text behaves like device metadata: each label is a promise the interface keeps
- Generous paper: blank space is part of the design, not a gap to fill

### Anti-Values

- Gradients, chrome sheen and scrims over the drawing
- Mono eyebrow labels over every heading, numbered cards and invented stat bands
- A second accent colour or a multi-neon cyberpunk palette
- Soft rounded SaaS cards and glass blurs
- Colour-only status

### Visual Character

- Warm paper #F2EDE3 with pure ink #11110F and one acid lime #B7D23A
- Teko uppercase at huge scale for display, Zen Kaku Gothic New 17px for prose, Reddit Mono for metadata
- Clipped panels with an inset 4px ink rule and a 20px notch
- An 84px halftone triangle in each panel's top-right corner
- A flat grey console rail with two screws and battery-style chips
- Deeper semantic inks (olive, ochre, brick, ink-teal) that can carry words on paper

### Lineage

> In-place revision of the live Amikake Console. It keeps the name, the warm paper, ink and one acid lime, Teko and Reddit Mono, and the page order. It moves the headline below a hero-first drawing, retires the gradients, chrome sheen and diagonal wash for flat rails and an SVG halftone, retunes the semantics to deeper inks and replaces IBM Plex Sans JP with Zen Kaku Gothic New.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F2EDE3` |
| surface | `#FFFDF6` |
| text | `#11110F` |
| muted | `#55534C` |
| border | `#11110F` |
| accent | `#B7D23A` |
| on_accent | `#11110F` |
| accent_ink | `#3A4A0E` |
| rail | `#D6D3CA` |
| success | `#4C6A00` |
| warning | `#8A5A00` |
| error | `#A82C22` |
| info | `#2F5F6E` |

### Typography

- **Heading Font**: Teko
- **Body Font**: Zen Kaku Gothic New
- **Mono Font**: Reddit Mono
- **Heading Weight**: 600
- **Display Weight**: 700
- **Body Weight**: 400
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em on display and headings; 0 on Reddit Mono
- **Base Size**: 17px
- **Line Height**: 1.65
- **Scale**: ["15px","16px","17px","19px","24px","30px","42px","58px","72px","136px"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Teko:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Reddit+Mono:wght@400;500;700&display=swap

### Radii

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

### Shadows

- **Press**: 4px 4px 0 #11110F on button hover only
- **Panel**: none; panels are flat ink-ruled paper
- **None**: everything else is flat

### Spacing

- **Base**: 8px
- **Scale**: ["4px","8px","12px","16px","24px","40px","64px","96px","112px"]

### Surfaces

- **Treatment**: hero-drawing-then-warm-paper
- **Card Style**: Clipped manga panels: an inset 4px ink rule drawn as box-shadow, a 20px notch cut from the bottom-right corner, and an 84px halftone triangle in the top-right corner at 40% opacity. Variants: paper, ink, lime.
- **Rail**: A flat #D6D3CA pill strip with a 10px ink screw dot at each end and mono chips inside; the live chip is lime.
- **Bg Pattern**: none; the paper is flat. Halftone appears only as the one corner block, drawn as an SVG dot tile.
- **Screen**: Ink #11110F terminal block with a clipped bottom-right corner; dim lines in #A8A599, the one live line in lime.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders. The ink panel rule is an inset 4px box-shadow on a clipped panel, table rows take a 3px ink top rule, and the flow columns a 4px ink top rule. Never grey, never decorative.

### Motion

- **Duration**: 150ms
- **Easing**: ease
- **Philosophy**: Firmware confirming input: buttons lift 2px with a hard 4px ink shadow on hover. The settled page renders with no JavaScript and prefers-reduced-motion removes the transition.

### Controls

- **Height**: 54px
- **Radius**: 0px

## Rules

### Composition

- Open with the full-bleed hero drawing; the nav sits on it as flat paper chips, and the headline and two buttons sit on the paper below it.
- Build the deck on a 12-column grid with 24px gutters: a 7 and a 5 span, then a 5 and a 7, so no two rows match.
- Keep panels clipped: a 20px notch at the bottom right and a halftone triangle at the top right, with an inset 4px ink rule.
- Leave real blank paper between sections: 56px on phones to 112px on desktop.
- Cap content at 1320px and centre it; only the hero and the closing band run full width.

### Hierarchy

- Display in Teko 700 uppercase at 58 to 136px with 0.84 line height; section titles in Teko 600 at 42 to 72px.
- Panel titles in Teko 600 at 30 to 40px; prose at 17 to 19px; mono metadata at 15 to 16px.
- Ink weight second: the 4px panel rule and the 3px table rule.
- Lime only on the one live marker, the primary button and the live chip.

### Density

Calm page density with tight console clusters: 12px gaps inside rails, 24px between panels, 56 to 112px between sections.

### Signature Patterns

- Hero-first drawing: a full-bleed screentone plate with the one lime mark on the screen, painted through var(--hero-image).
- Clipped manga panel: inset ink rule, notched corner, halftone triangle; paper, ink and lime variants.
- Console rail: a flat grey pill with two screw dots and mono chips; the one live chip is lime and round.
- Live tag: a skewed lime stroke behind the one phrase that is live in a view.
- Terminal screen: an ink block with a clipped corner, dim ok lines and one lime live line.

## Layout

### Grid

- **Type**: hero drawing, then a 12-column manga deck
- **Max Width**: 1320px content, centred above 1440px
- **Gutter**: 24px between panels, 40px page gutter on desktop and 20px on phones
- **Column Behavior**: Deck spans 7+5 then 5+7; the split is 1.05fr and 1fr; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 112px desktop, 56px phone
- **Card Gap**: 24px desktop, 18px phone
- **Content Padding**: 24 to 40px inside panels
- **Approach**: Blank paper is part of the design; the drawing above and the ink band below hold the page.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"54px","row_height":"48 to 60px table rows","rail_height":"about 44px"}

### Responsive

Phones (390px) stack every grid to one column, shorten the hero to 56svh and keep only the Get the kit link in the nav. Tablets (601 to 1199px) use a 6-column deck with two-column flow, and the last flow step spans both. Above 1440px the content caps and centres.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 601 to 1199px
- **Desktop**: 1280px
- **Wide**: 1441px
- **Ultrawide**: 2560px

## Guidance

### Do

- Lead with the drawing and put the headline on paper below it.
- Spend lime on the one live thing in a view and nowhere else.
- Pair every status with a word and a shape before its colour.
- Make one panel visibly hardware: a rail with screws and a battery chip.
- Vary the panel spans so no two rows match.
- Use #3A4A0E for lime-family text on paper.
- Write microcopy as confirmations: what happened, in how long.

### Don't

- Don't add gradients, chrome sheen, scrims or diagonal washes.
- Don't put mono eyebrows over headings or number the cards.
- Don't add a second accent, and don't use pastel or neon status colours.
- Don't round a rectangle; only the rail and the live chip are round.
- Don't invent stat bands or equal cards.
- Don't set text over busy drawing.

### Accessibility

Ink #11110F on paper #F2EDE3 is 16.5:1, muted #55534C 6.9:1, lime text on paper uses #3A4A0E, semantic inks all clear 4.5:1. Every status has a word and a shape. Focus is a 3px ink outline offset 3px. Reduced motion removes the hover transition.

### Usage Context

Developer tools, device and firmware consoles, dispatch and logistics dashboards, youth-tech products

## Imagery Direction

### Pairs With

screentone-press

### Art Style Id

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

### Summary

Bold black manga ink and gekiga halftone screentone on warm off-white paper with exactly one acid-lime hand-drawn accent. The hero is a frame-filling plate of a hand gripping a portable console, the lime mark on its screen.

### Subjects

- a hand gripping a portable debug console
- a circuit-dense device underside
- a courier on a bicycle with a handheld console
- a rider crossing a halftone-shaded street

### Usage

One full-bleed hero per landing at the very top, painted with var(--hero-image); the nav sits on it as flat paper chips and the headline sits on the paper below, never over the drawing. Reserve the single lime mark for the live element in the image.

### Avoid

Scrims or gradients over the plate, text on the drawing, a second spot colour, panel borders and white margins in the plate.
DESIGN.md file
---
version: "alpha"
name: "Amikake Console"
description: "Amikake Console is a manga volume of handheld software. A full-bleed screentone drawing of a hand gripping a debug console opens the page, and below it the product speaks on warm paper in black ink: clipped panels with a halftone corner,..."
colors:
  bg: "#F2EDE3"
  surface: "#FFFDF6"
  text: "#11110F"
  muted: "#55534C"
  border: "#11110F"
  accent: "#B7D23A"
  on_accent: "#11110F"
  accent_ink: "#3A4A0E"
  rail: "#D6D3CA"
  success: "#4C6A00"
  warning: "#8A5A00"
  error: "#A82C22"
  info: "#2F5F6E"
typography:
  headline-lg:
    fontFamily: "Teko"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Teko"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Zen Kaku Gothic New"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Reddit 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: "40px"
  3xl: "64px"
  4xl: "96px"
  step-8: "112px"
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-accent_ink:
    backgroundColor: "{colors.accent_ink}"
  color-reference-rail:
    backgroundColor: "{colors.rail}"
  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"
---

# Amikake Console

## Overview

Amikake Console is a manga volume of handheld software. A full-bleed screentone drawing of a hand gripping a debug console opens the page, and below it the product speaks on warm paper in black ink: clipped panels with a halftone corner, a grey console rail with screws and battery chips, and terminal labels that confirm every input. One acid-lime mark belongs to the one live thing in a view, and every status carries a word and a shape before it carries a colour.

### Values

- The drawing leads: the hero is a real gekiga plate and the headline sits on paper below it, never on a scrim
- One acid-lime mark for the one live thing; everything else is ink and paper
- Status is a word and a shape first, colour second
- Panels crop, overlap and notch like a printed page; never three equal cards
- Small text behaves like device metadata: each label is a promise the interface keeps
- Generous paper: blank space is part of the design, not a gap to fill

### Anti-Values

- Gradients, chrome sheen and scrims over the drawing
- Mono eyebrow labels over every heading, numbered cards and invented stat bands
- A second accent colour or a multi-neon cyberpunk palette
- Soft rounded SaaS cards and glass blurs
- Colour-only status

### Visual Character

- Warm paper #F2EDE3 with pure ink #11110F and one acid lime #B7D23A
- Teko uppercase at huge scale for display, Zen Kaku Gothic New 17px for prose, Reddit Mono for metadata
- Clipped panels with an inset 4px ink rule and a 20px notch
- An 84px halftone triangle in each panel's top-right corner
- A flat grey console rail with two screws and battery-style chips
- Deeper semantic inks (olive, ochre, brick, ink-teal) that can carry words on paper

### Lineage

> In-place revision of the live Amikake Console. It keeps the name, the warm paper, ink and one acid lime, Teko and Reddit Mono, and the page order. It moves the headline below a hero-first drawing, retires the gradients, chrome sheen and diagonal wash for flat rails and an SVG halftone, retunes the semantics to deeper inks and replaces IBM Plex Sans JP with Zen Kaku Gothic New.

## 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 | `#F2EDE3` |
| surface | `#FFFDF6` |
| text | `#11110F` |
| muted | `#55534C` |
| border | `#11110F` |
| accent | `#B7D23A` |
| on_accent | `#11110F` |
| accent_ink | `#3A4A0E` |
| rail | `#D6D3CA` |
| success | `#4C6A00` |
| warning | `#8A5A00` |
| error | `#A82C22` |
| info | `#2F5F6E` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Teko:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Reddit+Mono:wght@400;500;700&display=swap

- **Headline-Lg**: Teko, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Teko, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Zen Kaku Gothic New, 17px, weight 400, line-height 1.5.
- **Label-Md**: Reddit Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `40px`
- **3xl**: `64px`
- **4xl**: `96px`
- **Step-8**: `112px`

### Grid

- **Type**: hero drawing, then a 12-column manga deck
- **Max Width**: 1320px content, centred above 1440px
- **Gutter**: 24px between panels, 40px page gutter on desktop and 20px on phones
- **Column Behavior**: Deck spans 7+5 then 5+7; the split is 1.05fr and 1fr; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 112px desktop, 56px phone
- **Card Gap**: 24px desktop, 18px phone
- **Content Padding**: 24 to 40px inside panels
- **Approach**: Blank paper is part of the design; the drawing above and the ink band below hold the page.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"54px","row_height":"48 to 60px table rows","rail_height":"about 44px"}

### Responsive

Phones (390px) stack every grid to one column, shorten the hero to 56svh and keep only the Get the kit link in the nav. Tablets (601 to 1199px) use a 6-column deck with two-column flow, and the last flow step spans both. Above 1440px the content caps and centres.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 601 to 1199px
- **Desktop**: 1280px
- **Wide**: 1441px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Press**: 4px 4px 0 #11110F on button hover only
- **Panel**: none; panels are flat ink-ruled paper
- **None**: everything else is flat

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: hero-drawing-then-warm-paper
- **Card Style**: Clipped manga panels: an inset 4px ink rule drawn as box-shadow, a 20px notch cut from the bottom-right corner, and an 84px halftone triangle in the top-right corner at 40% opacity. Variants: paper, ink, lime.
- **Rail**: A flat #D6D3CA pill strip with a 10px ink screw dot at each end and mono chips inside; the live chip is lime.
- **Bg Pattern**: none; the paper is flat. Halftone appears only as the one corner block, drawn as an SVG dot tile.
- **Screen**: Ink #11110F terminal block with a clipped bottom-right corner; dim lines in #A8A599, the one live line in lime.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders. The ink panel rule is an inset 4px box-shadow on a clipped panel, table rows take a 3px ink top rule, and the flow columns a 4px ink top rule. Never grey, never decorative.

## Components

### Composition

- Open with the full-bleed hero drawing; the nav sits on it as flat paper chips, and the headline and two buttons sit on the paper below it.
- Build the deck on a 12-column grid with 24px gutters: a 7 and a 5 span, then a 5 and a 7, so no two rows match.
- Keep panels clipped: a 20px notch at the bottom right and a halftone triangle at the top right, with an inset 4px ink rule.
- Leave real blank paper between sections: 56px on phones to 112px on desktop.
- Cap content at 1320px and centre it; only the hero and the closing band run full width.

### Hierarchy

- Display in Teko 700 uppercase at 58 to 136px with 0.84 line height; section titles in Teko 600 at 42 to 72px.
- Panel titles in Teko 600 at 30 to 40px; prose at 17 to 19px; mono metadata at 15 to 16px.
- Ink weight second: the 4px panel rule and the 3px table rule.
- Lime only on the one live marker, the primary button and the live chip.

### Density

Calm page density with tight console clusters: 12px gaps inside rails, 24px between panels, 56 to 112px between sections.

### Signature Patterns

- Hero-first drawing: a full-bleed screentone plate with the one lime mark on the screen, painted through var(--hero-image).
- Clipped manga panel: inset ink rule, notched corner, halftone triangle; paper, ink and lime variants.
- Console rail: a flat grey pill with two screw dots and mono chips; the one live chip is lime and round.
- Live tag: a skewed lime stroke behind the one phrase that is live in a view.
- Terminal screen: an ink block with a clipped corner, dim ok lines and one lime live line.

## 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-01a101b0-f43d-7b50-a07a-54b81c69891a/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a101b0-f43d-7b50-a07a-54b81c69891a/shadcn.json` (registry theme), `/language/en-01a101b0-f43d-7b50-a07a-54b81c69891a/shadcn-components.md` (component recipes) and `/language/en-01a101b0-f43d-7b50-a07a-54b81c69891a/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 Lead with the drawing and put the headline on paper below it.
- Do Spend lime on the one live thing in a view and nowhere else.
- Do Pair every status with a word and a shape before its colour.
- Do Make one panel visibly hardware: a rail with screws and a battery chip.
- Do Vary the panel spans so no two rows match.
- Do Use #3A4A0E for lime-family text on paper.
- Do Write microcopy as confirmations: what happened, in how long.
- Don't Don't add gradients, chrome sheen, scrims or diagonal washes.
- Don't Don't put mono eyebrows over headings or number the cards.
- Don't Don't add a second accent, and don't use pastel or neon status colours.
- Don't Don't round a rectangle; only the rail and the live chip are round.
- Don't Don't invent stat bands or equal cards.
- Don't Don't set text over busy drawing.

### Accessibility

Ink #11110F on paper #F2EDE3 is 16.5:1, muted #55534C 6.9:1, lime text on paper uses #3A4A0E, semantic inks all clear 4.5:1. Every status has a word and a shape. Focus is a 3px ink outline offset 3px. Reduced motion removes the hover transition.

### Usage Context

Developer tools, device and firmware consoles, dispatch and logistics dashboards, youth-tech products

## Imagery Direction

### Pairs With

screentone-press

### Art Style Id

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

### Summary

Bold black manga ink and gekiga halftone screentone on warm off-white paper with exactly one acid-lime hand-drawn accent. The hero is a frame-filling plate of a hand gripping a portable console, the lime mark on its screen.

### Subjects

- a hand gripping a portable debug console
- a circuit-dense device underside
- a courier on a bicycle with a handheld console
- a rider crossing a halftone-shaded street

### Usage

One full-bleed hero per landing at the very top, painted with var(--hero-image); the nav sits on it as flat paper chips and the headline sits on the paper below, never over the drawing. Reserve the single lime mark for the live element in the image.

### Avoid

Scrims or gradients over the plate, text on the drawing, a second spot colour, panel borders and white margins in the plate.
shadcn/ui theme file
```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "amikake-console",
  "type": "registry:theme",
  "title": "Amikake Console shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F2EDE3",
      "foreground": "#11110F",
      "card": "#FFFDF6",
      "card-foreground": "#11110F",
      "popover": "#FFFDF6",
      "popover-foreground": "#11110F",
      "primary": "#11110F",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#55534C",
      "muted-foreground": "#11110F",
      "accent": "#B7D23A",
      "accent-foreground": "#111111",
      "destructive": "#A82C22",
      "border": "#11110F",
      "input": "#11110F",
      "ring": "#B7D23A",
      "chart-1": "#11110F",
      "chart-2": "#f4f4f5",
      "chart-3": "#B7D23A",
      "chart-4": "#4C6A00",
      "chart-5": "#8A5A00",
      "sidebar": "#FFFDF6",
      "sidebar-foreground": "#11110F",
      "sidebar-primary": "#11110F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F5F6E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#11110F",
      "sidebar-ring": "#B7D23A",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#11110F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B7D23A",
      "accent-foreground": "#111111",
      "destructive": "#A82C22",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B7D23A",
      "chart-1": "#11110F",
      "chart-2": "#f4f4f5",
      "chart-3": "#B7D23A",
      "chart-4": "#4C6A00",
      "chart-5": "#8A5A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#11110F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B7D23A",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B7D23A",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a101b0-f43d-7b50-a07a-54b81c69891a",
    "slug": "amikake-console",
    "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_ink",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "rail",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "display_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "none",
        "panel",
        "press"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "rail",
        "screen",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "controls": [
        "height",
        "radius"
      ]
    }
  }
}
```

shadcn/ui kit

katagami ✦ Amikake Console