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
Typography
Each face set in this language's own words.
Amikake Console
Amikake Console
Amikake Console is a manga volume of handheld software.
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
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"
]
}
}
}
```