Bulla

# Bulla

## Philosophy

Bulla treats interface work the way a tribunal treats a sworn exhibit: not a static case file on a cold desk but a living deposition — a single unbroken thread of custody, pressed at every step, reconstructed top to bottom on a deep oxblood-tribunal ground, where the only verified light you ever have to count is one cyan node.

### Values

- Custody is the proof: every screen hangs from one continuous custody spine, and a record is admitted only when the thread runs unbroken from intake to verdict.
- Countable light: three accents and no more — cyan verifies, brass presses, oxblood contests — sparse enough to count on any screen.
- Redaction as inline mass: censorship crops sworn text in place as a structural block, never a decorative stripe.
- Forensic tribunal calm: warm near-black ground, exact mono labels, sealed negative space that reads interrogation-room, not console.
- Provenance as ornament: seal nodes, hashes, timestamps and sworn statements are the only decorative system.

### Anti-Values

- No static paper-desk case file, checksum gutter rails, or hard-square scanner sheets — that is the source refinement's grammar, not Bulla's.
- No glow, neon, matrix code, glowing skulls, or hacker-dashboard spectacle.
- No fourth accent and no scattering color until the seal can no longer be counted.
- No glassmorphism, blur theatrics, or friendly rounded pill cards trapping the chrome.
- No filling every field; sealed negative space is part of the tribunal calm.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#14100F` |
| surface | `#1E1917` |
| surface_2 | `#262020` |
| sunk | `#0D0A09` |
| text | `#F3EEE7` |
| muted | `#9C918A` |
| faint | `#5C534E` |
| border | `#352D2A` |
| accent | `#5BC8E6` |
| on_accent | `#0D0A09` |
| seal | `#C8A24A` |
| alarm | `#C84A3E` |
| primary | `#5BC8E6` |
| secondary | `#C8A24A` |
| success | `#5BC8E6` |
| warning | `#C8A24A` |
| error | `#C84A3E` |
| info | `#5BC8E6` |

### Typography

- **Base Size**: 17px
- **Body Font**: Inter
- **Heading Font**: Archivo
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 900
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;800;900&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&display=swap

### Radii

- **None**: 0
- **Sm**: 0
- **Md**: 16px
- **Lg**: 16px
- **Node**: 9999px

### Shadows

- **Sm**: 0 1px 2px rgba(0,0,0,.4)
- **Md**: 0 8px 24px rgba(0,0,0,.45)

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64,96]

### Surfaces

- **Bg Pattern**: Faint warm photocopy-grain dots on a deep oxblood-tribunal near-black; no rule grid, no glass.
- **Card Style**: Warm-charcoal evidence sheets, 1px warm hairline border, 16px radius, soft depth shadow, mono index stamp + uppercase Archivo title; never an accent edge, never nested.
- **Treatment**: Warm near-black ground stepping up to charcoal surfaces and a recessed vault-floor well; flat, matte, no glow.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: 1px warm hairline dividers; a single cyan focus ring; seal nodes carry the only colored rings.

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(0.2,0,0,1)
- **Philosophy**: Short and deliberate, like a seal pressing shut. The hero verdict bar wipes closed left-to-right; sections reveal on scroll. The settled page renders without JavaScript; reveals are layered on top and respect prefers-reduced-motion.

## Rules

### Composition

Hang every screen from one continuous vertical custody spine: a 2px thread connecting circular seal nodes top to bottom. Embodiment = sticky spine rail + single descending deposition column; landing = full-viewport photostat hero with a centered low verdict bar, then the spine as section flow; dashboard = spine sidebar + live custody feed. Redaction appears only inline, cropping sworn text as mass.

### Hierarchy

Tribunal register: uppercase Archivo 900 docket headings at -0.02em, IBM Plex Mono timestamps/hashes/labels, Inter body at 17px. Seal nodes outrank everything; cyan is the only verified light and is always countable.

### Density

Dense threaded transcript rhythm beside large sealed negative space — a deposition given under oath, never a packed console.

### Signature

The custody spine (threaded seal nodes), tamper-seal state chips (sealed cyan / quorum brass / contested oxblood), inline redaction mass, and a centered verdict bar.

## Layout

### Grid

Desktop: a 248-300px spine rail (sticky) + a single descending column, max-width ~1280px. Dashboard uses a spine sidebar + a 1.55fr/1fr content grid.

### Whitespace

Tribunal calm: 64-96px section gaps, 24-32px sheet padding, 13-16px node rhythm on the spine; sealed fields feel intentionally untouched.

### Density

High-contrast density: dense threaded custody rows beside large quiet sealed fields.

### Responsive

Below ~980px the spine rail unsticks and stacks above the column; tables collapse to two columns hiding hashes; nav links hide on mobile; never overflow horizontally; body stays 16px+.

### Breakpoints

- **Desktop**: >=980px spine rail + descending column
- **Tablet**: 720-979px stacked spine over column
- **Mobile**: <720px single-file deposition, spine inlined, tables to two columns

## Guidance

### Do

- Hang every screen from one custody spine and let the thread carry continuity.
- Keep the three accents countable; one cyan node is the verified light.
- Crop sworn text with inline redaction as mass, never as decoration.
- Name modules as tribunal operations: intake, deposition, hash match, challenge, re-press, verdict.
- Tune neutrals warm so the dark ground never reads cold-blue.
- Make one button clearly primary (Press the seal); keep the rest quieter.

### Don't

- Do not rebuild the refinement's static paper desk, checksum gutter rails, or hard-square scanner sheets.
- Do not add glow, neon, matrix code, or hacker-dashboard spectacle.
- Do not let a fourth accent creep in or scatter color until the seal can't be counted.
- Do not trap navigation in a floating pill bar or nest cards.
- Do not fill every field; sealed negative space is part of the tribunal calm.

### Accessibility

Maintain AA contrast with bone text on the deep warm ground; pair every cyan/brass/oxblood seal node with a text label (never color-only); provide a visible cyan focus ring on every control; keep redaction non-essential to comprehension.

## Imagery Direction

### Pairs With

exhibit-hand

### Summary

Full-bleed declassified evidence photostat: harsh high-contrast black-and-white photocopy, coarse halftone grain, solid black redaction bars cropping the subject as mass, hairline registration brackets, docket hash stamps, and one flat matte cyan verification tick. Composed darkest at the bottom so a centered verdict bar reads cleanly.

### Subjects

- sealed evidence-locker corridors
- pressed lead-and-wax custody seals
- deposition-room exhibits
- forensic mugshot-style portraits
- near-blank sealed exhibit sheets

### Usage

Hero and feature imagery is full-frame photostat bleeding to all four edges; keep cyan countable, redaction bars solid and opaque, no glow or readable secret text.

---
version: "alpha"
name: "Bulla"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#14100F"
  surface: "#1E1917"
  surface_2: "#262020"
  sunk: "#0D0A09"
  text: "#F3EEE7"
  muted: "#9C918A"
  faint: "#5C534E"
  border: "#352D2A"
  accent: "#5BC8E6"
  on_accent: "#0D0A09"
  seal: "#C8A24A"
  alarm: "#C84A3E"
  primary: "#5BC8E6"
  secondary: "#C8A24A"
  success: "#5BC8E6"
  warning: "#C8A24A"
  error: "#C84A3E"
  info: "#5BC8E6"
typography:
  headline-lg:
    fontFamily: "Archivo"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Archivo"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Inter"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "16px"
  lg: "16px"
  node: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-sunk:
    backgroundColor: "{colors.sunk}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-faint:
    backgroundColor: "{colors.faint}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-seal:
    backgroundColor: "{colors.seal}"
  color-reference-alarm:
    backgroundColor: "{colors.alarm}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  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.primary}"
    textColor: "#000000"
    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"
---

# Bulla

## Overview

Bulla treats interface work the way a tribunal treats a sworn exhibit: not a static case file on a cold desk but a living deposition — a single unbroken thread of custody, pressed at every step, reconstructed top to bottom on a deep oxblood-tribunal ground, where the only verified light you ever have to count is one cyan node.

### Values

- Custody is the proof: every screen hangs from one continuous custody spine, and a record is admitted only when the thread runs unbroken from intake to verdict.
- Countable light: three accents and no more — cyan verifies, brass presses, oxblood contests — sparse enough to count on any screen.
- Redaction as inline mass: censorship crops sworn text in place as a structural block, never a decorative stripe.
- Forensic tribunal calm: warm near-black ground, exact mono labels, sealed negative space that reads interrogation-room, not console.
- Provenance as ornament: seal nodes, hashes, timestamps and sworn statements are the only decorative system.

### Anti-Values

- No static paper-desk case file, checksum gutter rails, or hard-square scanner sheets — that is the source refinement's grammar, not Bulla's.
- No glow, neon, matrix code, glowing skulls, or hacker-dashboard spectacle.
- No fourth accent and no scattering color until the seal can no longer be counted.
- No glassmorphism, blur theatrics, or friendly rounded pill cards trapping the chrome.
- No filling every field; sealed negative space is part of the tribunal calm.

## 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 | `#14100F` |
| surface | `#1E1917` |
| surface_2 | `#262020` |
| sunk | `#0D0A09` |
| text | `#F3EEE7` |
| muted | `#9C918A` |
| faint | `#5C534E` |
| border | `#352D2A` |
| accent | `#5BC8E6` |
| on_accent | `#0D0A09` |
| seal | `#C8A24A` |
| alarm | `#C84A3E` |
| primary | `#5BC8E6` |
| secondary | `#C8A24A` |
| success | `#5BC8E6` |
| warning | `#C8A24A` |
| error | `#C84A3E` |
| info | `#5BC8E6` |

## Typography

- **Headline-Lg**: Archivo, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 17px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex 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`

### Grid

Desktop: a 248-300px spine rail (sticky) + a single descending column, max-width ~1280px. Dashboard uses a spine sidebar + a 1.55fr/1fr content grid.

### Whitespace

Tribunal calm: 64-96px section gaps, 24-32px sheet padding, 13-16px node rhythm on the spine; sealed fields feel intentionally untouched.

### Density

High-contrast density: dense threaded custody rows beside large quiet sealed fields.

### Responsive

Below ~980px the spine rail unsticks and stacks above the column; tables collapse to two columns hiding hashes; nav links hide on mobile; never overflow horizontally; body stays 16px+.

### Breakpoints

- **Desktop**: >=980px spine rail + descending column
- **Tablet**: 720-979px stacked spine over column
- **Mobile**: <720px single-file deposition, spine inlined, tables to two columns

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 2px rgba(0,0,0,.4)
- **Md**: 0 8px 24px rgba(0,0,0,.45)

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `0px`
- **Md**: `16px`
- **Lg**: `16px`
- **Node**: `9999px`

### Surfaces

- **Bg Pattern**: Faint warm photocopy-grain dots on a deep oxblood-tribunal near-black; no rule grid, no glass.
- **Card Style**: Warm-charcoal evidence sheets, 1px warm hairline border, 16px radius, soft depth shadow, mono index stamp + uppercase Archivo title; never an accent edge, never nested.
- **Treatment**: Warm near-black ground stepping up to charcoal surfaces and a recessed vault-floor well; flat, matte, no glow.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: 1px warm hairline dividers; a single cyan focus ring; seal nodes carry the only colored rings.

## Components

### Composition

Hang every screen from one continuous vertical custody spine: a 2px thread connecting circular seal nodes top to bottom. Embodiment = sticky spine rail + single descending deposition column; landing = full-viewport photostat hero with a centered low verdict bar, then the spine as section flow; dashboard = spine sidebar + live custody feed. Redaction appears only inline, cropping sworn text as mass.

### Hierarchy

Tribunal register: uppercase Archivo 900 docket headings at -0.02em, IBM Plex Mono timestamps/hashes/labels, Inter body at 17px. Seal nodes outrank everything; cyan is the only verified light and is always countable.

### Density

Dense threaded transcript rhythm beside large sealed negative space — a deposition given under oath, never a packed console.

### Signature

The custody spine (threaded seal nodes), tamper-seal state chips (sealed cyan / quorum brass / contested oxblood), inline redaction mass, and a centered verdict bar.

## 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-019efa10-5a85-7e00-ae76-b90080f04a69/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is 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 Hang every screen from one custody spine and let the thread carry continuity.
- Do Keep the three accents countable; one cyan node is the verified light.
- Do Crop sworn text with inline redaction as mass, never as decoration.
- Do Name modules as tribunal operations: intake, deposition, hash match, challenge, re-press, verdict.
- Do Tune neutrals warm so the dark ground never reads cold-blue.
- Do Make one button clearly primary (Press the seal); keep the rest quieter.
- Don't Do not rebuild the refinement's static paper desk, checksum gutter rails, or hard-square scanner sheets.
- Don't Do not add glow, neon, matrix code, or hacker-dashboard spectacle.
- Don't Do not let a fourth accent creep in or scatter color until the seal can't be counted.
- Don't Do not trap navigation in a floating pill bar or nest cards.
- Don't Do not fill every field; sealed negative space is part of the tribunal calm.

### Accessibility

Maintain AA contrast with bone text on the deep warm ground; pair every cyan/brass/oxblood seal node with a text label (never color-only); provide a visible cyan focus ring on every control; keep redaction non-essential to comprehension.

## Imagery Direction

### Pairs With

exhibit-hand

### Summary

Full-bleed declassified evidence photostat: harsh high-contrast black-and-white photocopy, coarse halftone grain, solid black redaction bars cropping the subject as mass, hairline registration brackets, docket hash stamps, and one flat matte cyan verification tick. Composed darkest at the bottom so a centered verdict bar reads cleanly.

### Subjects

- sealed evidence-locker corridors
- pressed lead-and-wax custody seals
- deposition-room exhibits
- forensic mugshot-style portraits
- near-blank sealed exhibit sheets

### Usage

Hero and feature imagery is full-frame photostat bleeding to all four edges; keep cyan countable, redaction bars solid and opaque, no glow or readable secret text.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bulla",
  "type": "registry:theme",
  "title": "Bulla shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#14100F",
      "foreground": "#F3EEE7",
      "card": "#1E1917",
      "card-foreground": "#F3EEE7",
      "popover": "#1E1917",
      "popover-foreground": "#F3EEE7",
      "primary": "#5BC8E6",
      "primary-foreground": "#ffffff",
      "secondary": "#C8A24A",
      "secondary-foreground": "#ffffff",
      "muted": "#9C918A",
      "muted-foreground": "#F3EEE7",
      "accent": "#5BC8E6",
      "accent-foreground": "#ffffff",
      "destructive": "#C84A3E",
      "border": "#352D2A",
      "input": "#352D2A",
      "ring": "#5BC8E6",
      "chart-1": "#5BC8E6",
      "chart-2": "#C8A24A",
      "chart-3": "#5BC8E6",
      "chart-4": "#5BC8E6",
      "chart-5": "#C8A24A",
      "sidebar": "#1E1917",
      "sidebar-foreground": "#F3EEE7",
      "sidebar-primary": "#5BC8E6",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#5BC8E6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#352D2A",
      "sidebar-ring": "#5BC8E6",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#5BC8E6",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#5BC8E6",
      "accent-foreground": "#ffffff",
      "destructive": "#C84A3E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#5BC8E6",
      "chart-1": "#5BC8E6",
      "chart-2": "#C8A24A",
      "chart-3": "#5BC8E6",
      "chart-4": "#5BC8E6",
      "chart-5": "#C8A24A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#5BC8E6",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#5BC8E6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#5BC8E6",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efa10-5a85-7e00-ae76-b90080f04a69",
    "slug": "bulla",
    "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",
        "alarm",
        "bg",
        "border",
        "error",
        "faint",
        "info",
        "muted",
        "on_accent",
        "primary",
        "seal",
        "secondary",
        "success",
        "sunk",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "lg",
        "md",
        "node",
        "none",
        "sm"
      ],
      "shadows": [
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```