name: kamibora-design
version: alpha
description: >
  KAMIBORA is an editorial e-commerce page for modular-origami sculpture kits,
  styled as a Kyoto papercraft blueprint. The surface is warm washi cream
  (#F4F1E8) inverted to near-black ink (#1E1C18) for manifesto and footer
  sections, with a single vermillion voltage (#C44030) for mountain-fold lines,
  prices, and CTAs and a quiet forest green (#3A6040) as the valley-fold
  secondary. Type pairs Space Grotesk display (tight -0.04em tracking) with
  Inter body and ubiquitous Space Mono technical captions in uppercase. The
  signature moves are dashed fold-rule hairlines, dog-eared paper cards, an
  animated SVG fold-sequence hero, and a mono-annotated blueprint aesthetic.
  Geometry is uniformly sharp — zero border-radius everywhere.
colors:
  # Brand / Voltage
  vermillion: '#C44030'        # primary accent: CTAs, prices, mountain-fold lines, eyebrows, hover
  vermillion-hover: '#a5352a'  # darker vermillion on button hover
  forest: '#3A6040'            # secondary accent: valley-fold lines, green tiles, "YES" specs
  # Surface
  bg-primary: '#F4F1E8'        # page surface — warm washi cream
  bg-dark: '#1E1C18'           # inverted sections (manifesto, footer, dark cards), also ink text
  surface-card: '#F8F6EE'      # card fill, slightly lighter than page
  paper-fill: '#FAF5E6'        # SVG paper square fill (lightest)
  paper-fill-2: '#F0EBDA'      # SVG folded-panel mid tone
  paper-fill-3: '#E8E0CC'      # SVG folded-panel darker tone
  paper-fill-4: '#D8CFB6'      # SVG gradient darkest panel
  # Text
  text-primary: '#1E1C18'      # headings + body ink on cream
  text-muted: '#8A8878'        # mono captions, labels, secondary text
  text-dark-body: '#C8C5B8'    # body text on dark sections
  text-on-cream-body: '#4A4840' # hero description body on cream (one-off)
  # Hairlines
  border-muted: 'rgba(138,136,120,0.35)'  # default 1px borders, dashed fold rules
  border-light: 'rgba(244,241,232,0.2)'   # hairlines on dark surfaces (subscribe box)
  border-light-faint: 'rgba(244,241,232,0.1)' # footer-top divider on dark
typography:
  display:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: clamp(48px, 6vw, 80px)
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.04em
  hero-h1:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: clamp(36px, 5vw, 64px)
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: -0.035em
  card-name:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 26px
    fontWeight: 500
    letterSpacing: -0.03em
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.7
  mono-caption:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.1em
    textTransform: uppercase
  eyebrow:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.1em
    textTransform: uppercase
rounded:                       # uniformly sharp — no radius anywhere
  none: 0
spacing:                       # base unit 4px; layout rhythm on 4/8
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  xxl: 24px
  section-x: 40px              # inner horizontal padding
  section-y: 120px             # section vertical padding
components:
  btn-primary:
    backgroundColor: '{colors.vermillion}'
    textColor: '{colors.bg-primary}'
    typography: "'Space Grotesk' 14px / 500"
    rounded: '{rounded.none}'
    padding: '14px 28px'
    # hover: background -> {colors.bg-dark}
  btn-ghost:
    backgroundColor: 'transparent'
    textColor: '{colors.text-primary}'
    border: '1.5px solid {colors.text-primary}'
    typography: "'Space Grotesk' 14px / 500"
    rounded: '{rounded.none}'
    padding: '12px 24px'
    # hover: invert to bg-dark fill, cream text
  kit-card:
    backgroundColor: '{colors.surface-card}'
    textColor: '{colors.text-primary}'
    border: '1px solid {colors.border-muted}'
    rounded: '{rounded.none}'
    # dog-ear corner; hover box-shadow 0 16px 48px rgba(30,28,24,0.12)
  kit-card-price:
    backgroundColor: '{colors.vermillion}'
    textColor: '{colors.bg-primary}'
    typography: "'Space Mono' 15px / 700"
    padding: '6px 12px'
  kit-card-cta:
    backgroundColor: '{colors.bg-dark}'
    textColor: '{colors.bg-primary}'
    typography: "'Space Grotesk' 14px / 500"
    padding: '16px'
    # hover: background -> {colors.vermillion}
  fold-rule:
    # dashed repeating-linear-gradient hairline, 1px, vermillion 6px on / 6px off, opacity 0.5
    backgroundColor: '{colors.vermillion}'
  dog-ear:
    # 36x36 absolute triangle, folded-corner cut filling {colors.bg-primary}
    backgroundColor: '{colors.bg-primary}'
motion:
  fold-stage-reveal: 'fade + translateY(12px) staggered by --i * 110ms after page load (.55s ease)'
  hero-char-rotate: 'per-char rotateX(-90deg)->0, 35ms stagger, .55s cubic-bezier(.2,.8,.2,1)'
  crease-draw: 'SVG stroke-dashoffset 200->0 over 1.8s cubic-bezier(.6,0,.2,1), staged delays'
  icosa-wobble: 'rotate -2deg..2deg over 8s ease-in-out infinite (spin variant 360deg/36s linear)'
  reveal: 'opacity + translateY(32px)->0, .7s cubic-bezier(.2,.8,.2,1) on IntersectionObserver'
  skew-settle: 'opacity + translateY(40px) skewY(6deg)->0 on enter'
  line-wipe: 'clip-path inset(0 100% 0 0)->0, .85s cubic-bezier(.77,0,.18,1)'
  ls-windup: 'letter-spacing 0.35em->-0.04em + opacity 0.3->1, .9s'
  kits-grid-tilt: 'mouse-driven rotateX/rotateY +/-4deg, perspective 1200px, .08s linear'
  shop-parallax: 'shop photo translateY scaled by scroll progress (* -60px)'
  bento-hover-expand: 'siblings dim to 0.55 + scale 0.98; hovered tile scale 1.04, saturate 0.5->1'
icons:
  library: inline SVG
  style: outline (some solid for play/heart glyphs); also Space Mono arrow glyphs (⟶ → ↓ ⇌)
  stroke: 1.5–2px
  sizes: { sm: 13px, md: 14px, lg: 18px, nav: 26px }
  color: '{colors.text-primary}'

KAMIBORA

kamibora-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

KAMIBORA dresses a modular-origami kit shop as a Kyoto folding blueprint. The page rests on a warm washi cream #F4F1E8 with near-black ink #1E1C18 text, and flips to a near-black surface for the "Fold Vocabulary" manifesto and the footer — those inverted blocks carry cream #F4F1E8 type and muted body #C8C5B8. A single vermillion #C44030 is the voltage: it draws every mountain-fold dashed line, fills price chips and the primary button, colors eyebrows, and is the hover state for cards and links. A quiet forest green #3A6040 plays the valley-fold secondary — accent tiles, "YES" spec values, and the green crease lines. Type is a three-face system: Space Grotesk drives all display and headings with very tight -0.04em tracking and sub-1.0 line-heights; Inter handles body copy at 15px/1.7; and Space Mono saturates the page as uppercase technical captions, specs, eyebrows, and annotations (0.1em–0.22em tracking). Signature moves: dashed fold-rule hairlines built from repeating linear gradients, dog-ear folded corners on paper cards, an animated SVG fold-sequence hero (flat square → diagonal → quarter → Sonobè module → assembled icosahedron) with self-drawing crease strokes, and a blueprint SVG overlay with mono dimension annotations. Geometry is unwaveringly sharp — there is no border-radius anywhere in the document.

Colors

Brand / voltage. vermillion #C44030 is the one true accent — btn-primary fill, kit-card__price and CTA-hover background, all mountain-fold dashed lines, eyebrows, and link/nav hover. Its hover-darken #a5352a appears on the video CTA and subscribe button. forest #3A6040 is the valley-fold secondary: green bento and product tiles, "YES" pre-scored spec values, and the green crease strokes in diagrams.

Surface. bg-primary #F4F1E8 is the page (warm washi cream); bg-dark #1E1C18 inverts the Fold Vocabulary and Footer sections and fills dark cards and the kit CTA. surface-card #F8F6EE is the card fill, a hair lighter than the page. The SVG paper graphics use a small cream ladder — #FAF5E6, #F0EBDA, #E8E0CC, #D8CFB6 — to fake folded-panel shading.

Text. text-primary #1E1C18 is ink for headings and body on cream; text-muted #8A8878 is the workhorse for all mono captions, labels, and secondary text; text-dark-body #C8C5B8 is body copy on dark sections. The hero description uses a one-off #4A4840.

Hairlines. border-muted rgba(138,136,120,0.35) is the default 1px border and the color of dashed fold rules; on dark surfaces, rgba(244,241,232,0.2) and a fainter rgba(244,241,232,0.1) divide content. Dashed dividers throughout use 1px dashed border-muted.

Typography

Loaded from Google Fonts in one request: Space Grotesk (400–700), Inter (400–600), Space Mono (400/700). All three are open-source, so no substitution is needed. Space Grotesk is the display/heading face (weight 500, tight negative tracking), Inter the body, Space Mono the technical/caption voice (uppercase, positive tracking).

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(48px,6vw,80px)	500	1.0	-0.04em	Section H2s ("The Kits.", "In the Wild.", "Paper Shop.")
hero-h1	clamp(36px,5vw,64px)	500	0.95	-0.035em	Hero headline (char-rotate animated)
card-name	26px	500	—	-0.03em	Kit card names; smaller variants 18–28px
body	15px	400	1.7	—	Inter body copy, descriptions
mono-caption	11px	400	1.5	0.1em	Space Mono specs, prices, labels (uppercase)
eyebrow	11px	400	—	0.1em	Space Mono section eyebrows (uppercase, vermillion or muted)

Footer statement lines run large: Space Grotesk clamp(48px,6vw,80px), weight 500, line-height 1.05. Mono labels go as small as 9–10px with up to 0.22em tracking for blueprint annotations.

Layout

Base unit is 4px; section rhythm runs on 4/8 with 120px vertical section padding and 40px inner horizontal padding, content centered in a 1400px max-width. The page is a sticky-nav-over-stacked-sections composition: a full-viewport hero (min-height 100vh) holding a horizontal flex fold-sequence diagram and a two-column bottom row; a 2-column kit-card grid under a giant outlined "02" number bleed; a 40/60 manifesto split with a sticky left rail and stacked technique articles; an 8-tile asymmetric bento gallery (5-col × 4-row); a 50/50 photo-meets-type Paper Shop with a featured dark block and a 2×2 product grid; and an inverted footer with a 5/2/2/3 column grid. Whitespace is generous and editorial, punctuated by dashed rules and mono annotations that read like draftsman's notes.

Elevation & Depth

The system is overwhelmingly flat — depth comes from borders, dashed hairlines, and inversion rather than shadows. The only real shadow is the kit-card hover: 0 16px 48px rgba(30,28,24,0.12). 3D is suggested through CSS perspective: the kits grid tilts ±4deg on mouse-move within a 1200px perspective, the hero headline uses perspective: 600px for its char rotateX, and the legacy hero card stack used transform-style: preserve-3d. No glass/blur. Dog-ear folded corners and the layered SVG paper gradients fake physical paper depth.

Shapes

Strictly rectilinear. Every surface — buttons, cards, chips, inputs, tiles — has border-radius: 0. The only curves are inside icon SVGs and the polygonal paper diagrams. The recurring decorative shape is the dog-ear: a 36×36px folded paper corner cut from each card's top-right via a CSS triangle border. Dashed lines (fold rules, spec dividers, blueprint overlay) are the dominant motif, echoing mountain/valley crease notation.

Components

• btn-primary — vermillion #C44030 fill, cream text, Space Grotesk 14px/500, 14px 28px padding, sharp; hover → bg-dark. Label e.g. "Order Kit №014 ↗".
• btn-ghost — transparent, 1.5px solid text-primary border, cream-on-dark inverse on hover, 12px 24px. A btn-ghost-light variant uses a translucent cream border for dark surfaces.
• kit-card — surface-card fill, 1px border-muted, sharp, with a dog-ear corner, thumbnail, mono spec <dl> bordered top/bottom by dashed rules, a striped vermillion complexity bar, and a full-width dark CTA. Hover lifts a soft shadow.
• kit-card__price — vermillion chip, cream Space Mono 15px/700, 6px 12px.
• kit-card__cta — full-width bg-dark bar, cream text, hover → vermillion.
• technique-article — bordered rgba(138,136,120,0.25) block on dark, 36px padding, active tint rgba(196,64,48,0.06); PDF (outlined) and Video (vermillion) mono CTAs.
• shop-product — colored tiles (forest / vermillion / cream-bordered / dark) with mono label, Space Grotesk name, mono price, and swatch chips.
• fold-rule / footer-rule — 1px dashed vermillion hairline from a repeating linear gradient at ~0.4–0.5 opacity.
• footer-subscribe — bordered translucent box, transparent mono input + vermillion submit button.

Motion

Heavy scroll- and load-driven motion via IntersectionObserver and rAF. On load, the hero fold-stages fade/rise with --i × 110ms stagger and the headline rotates in per-character (rotateX(-90deg)→0, 35ms stagger). SVG creases self-draw via stroke-dashoffset 200→0 over 1.8s; the assembled icosahedron wobbles ±2deg over 8s (a .spin variant rotates 360° / 36s). Reveal-on-scroll classes fade and translateY (32–40px), one with a skewY(6deg) settle. Headings use a clip-path line-wipe (.85s) and a letter-spacing wind-up (0.35em→-0.04em). The kits grid tilts to the cursor ±4deg; the shop photo parallaxes on scroll; the bento gallery dims siblings and scales/saturates the hovered tile. All easing favors cubic-bezier(.2,.8,.2,1).

Iconography

All icons are inline SVG, predominantly 1.5–2px outline strokes using currentColor (download, cart, camera, plus, file glyphs) with a few solid fills (play triangle, heart). Sizes cluster at 13–14px for inline button icons, 18px for nav cart, and 26px for the diamond logo mark (a rotated square with vermillion vertical and forest horizontal dashed crease lines). Space Mono glyph-arrows (⟶ → ↓ ↗ ⇌) double as decorative/UI indicators throughout the fold sequence and CTAs. Color follows context: ink on cream, cream on dark, vermillion for accents.

Do's and Don'ts

• Do keep every corner sharp (border-radius: 0) — the system is rectilinear.
• Do reserve vermillion for mountain-folds, prices, and primary actions; let forest stay the quiet valley-fold secondary.
• Do lean on dashed hairlines and Space Mono captions to carry the blueprint voice.
• Do keep display type Space Grotesk with tight negative tracking and sub-1.0 line-heights.
• Don't add drop-shadows beyond the single soft card-hover lift; depth is borders and inversion, not elevation.
• Don't introduce a third bright accent or warm/cool the washi cream surface.
• Don't set body or captions in the display face, or round the mono tracking down to 0 — the loose mono tracking is the texture.

Known Gaps

• The Google Fonts request loads Inter weights 400/500/600 but only 400 is exercised in body copy; weights are read from the @import, not all proven in use.
• SVG paper-panel fills (#FAF5E6/#F0EBDA/#E8E0CC/#D8CFB6) are inline graphic colors, not declared tokens; grouped here as a paper ladder.
• Spacing scale is inferred from observed padding/gap values (4/8/12/16/20/24); no explicit spacing token variables exist in the CSS.
• Motion timings are read from CSS/JS literally; perceived sequencing of the staggered fold sequence is described approximately.
• The hero contains a sizable block of legacy/hidden card-stack CSS (.hero-left, .hero-right, .hero-card) retained but not rendered; tokens describe the active fold-sequence layout, not the dead code.