DESIGN.json

{
  "schemaVersion": 2,
  "generatedAt": "2026-05-22T13:53:28Z",
  "title": "Design System: Night Brownie",
  "extensions": {
    "colorMeta": {
      "midnight-indigo": {
        "role": "primary",
        "displayName": "Midnight Indigo",
        "canonical": "oklch(25% 0.08 260)",
        "tonalRamp": ["#0C1524", "#121F38", "#1A2136", "#252F52", "#3D4D7A", "#5D6D97", "#7B8AB0", "#A3AECA"]
      },
      "twilight-purple": {
        "role": "primary",
        "displayName": "Twilight Purple",
        "canonical": "oklch(30% 0.09 295)",
        "tonalRamp": ["#1A1224", "#261A38", "#362A54", "#4A3B70", "#635292", "#816FB8", "#A492D1", "#CCBEE9"]
      },
      "biolume-cyan": {
        "role": "secondary",
        "displayName": "Biolume Cyan",
        "canonical": "oklch(80% 0.12 200)",
        "tonalRamp": ["#004B5C", "#006B82", "#008DA8", "#00B0D1", "#7EE2F5", "#B3F0FC", "#D9F8FE", "#F0FDFF"]
      },
      "starlight-white": {
        "role": "accent",
        "displayName": "Starlight White",
        "canonical": "oklch(96% 0.02 200)",
        "tonalRamp": ["#A3AECA", "#B3F0FC", "#D9F8FE", "#F0FDFF", "#F4F9FF", "#F9FCFF", "#FDFFFF", "#FFFFFF"]
      },
      "biolume-violet": {
        "role": "accent",
        "displayName": "Biolume Violet",
        "canonical": "oklch(70% 0.15 300)",
        "tonalRamp": ["#4B2D6B", "#6B4299", "#8D5BC8", "#B075F7", "#D5AEFF", "#E8D6FF", "#F4EBFF", "#FBF7FF"]
      },
      "moonlit-silver": {
        "role": "tertiary",
        "displayName": "Moonlit Silver",
        "canonical": "oklch(80% 0.02 260)",
        "tonalRamp": ["#252833", "#3D4252", "#5B6175", "#7D8499", "#A4ACBF", "#CCD2E0", "#D4D9EB", "#F0F2F7"]
      },
      "velvet-black": {
        "role": "neutral",
        "displayName": "Velvet Black",
        "canonical": "oklch(12% 0.01 260)",
        "tonalRamp": ["#05070A", "#0A0D14", "#131820", "#1D2535", "#263048", "#36456A", "#485E8C", "#6D86B8"]
      }
    },
    "typographyMeta": {
      "headline": { "displayName": "Headline", "purpose": "Clear anchors for section and page titles." },
      "body": { "displayName": "Body", "purpose": "Dense but legible prose. Max line length 70ch." },
      "label": { "displayName": "Label", "purpose": "Meta-information and small UI elements." }
    },
    "shadows": [],
    "motion": [
      { "name": "ease-out-standard", "value": "cubic-bezier(0.0, 0.0, 0.2, 1)", "purpose": "State transitions: hover color, active borders. Duration 150ms." }
    ],
    "breakpoints": [
      { "name": "sm", "value": "640px" },
      { "name": "md", "value": "960px" },
      { "name": "lg", "value": "1280px" }
    ]
  },
  "components": [
    {
      "name": "Feature Card",
      "kind": "card",
      "refersTo": "card",
      "description": "Documentation feature card. Midnight Indigo header.",
      "html": "<div class=\"ds-card\"><div class=\"ds-card-header\"><p class=\"ds-card-title\">Issue Triage</p><p class=\"ds-card-subtitle\">Automated agent</p></div><div class=\"ds-card-content\"><p>Analyzes new issues, applies labels, and posts an initial response without human intervention.</p></div><div class=\"ds-card-actions\"><a class=\"ds-card-link\" href=\"#\">READ MORE</a></div></div>",
      "css": ".ds-card { background-color: white; border-radius: 4px; border: 1px solid oklch(25% 0.08 260 / 20%); overflow: hidden; font-family: 'Public Sans', system-ui, -apple-system, sans-serif; } .ds-card-header { padding: 16px 16px 24px; background-color: oklch(25% 0.08 260); color: white; } .ds-card-title { margin: 0 0 2px; font-size: 1.14em; font-weight: 700; line-height: 1.6; } .ds-card-subtitle { margin: 0; font-size: 0.8em; font-weight: 500; line-height: 1.57; opacity: 0.85; } .ds-card-content { padding: 16px; font-size: 1rem; font-weight: 400; line-height: 1.6; color: oklch(12% 0.01 260); } .ds-card-content p { margin: 0; } .ds-card-actions { padding: 16px; border-top: 1px solid oklch(25% 0.08 260 / 12%); } .ds-card-link { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: oklch(25% 0.08 260); text-decoration: none; transition: color 150ms cubic-bezier(0.0, 0.0, 0.2, 1); } .ds-card-link:hover { color: oklch(80% 0.12 200); }"
    },
    {
      "name": "Primary CTA Button",
      "kind": "button",
      "refersTo": null,
      "description": "Primary call-to-action. Biolume Cyan.",
      "html": "<button class=\"ds-btn-primary\">Get Started</button>",
      "css": ".ds-btn-primary { display: inline-flex; align-items: center; padding: 10px 24px; background-color: oklch(80% 0.12 200); color: oklch(12% 0.01 260); font-family: 'Public Sans', system-ui, -apple-system, sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; transition: background-color 150ms cubic-bezier(0.0, 0.0, 0.2, 1), transform 150ms cubic-bezier(0.0, 0.0, 0.2, 1); } .ds-btn-primary:hover { background-color: oklch(70% 0.12 200); } .ds-btn-primary:active { transform: translateY(1px); }"
    }
  ],
  "narrative": {
    "northStar": "The Midnight Helper",
    "overview": "This system is built for the quiet efficiency of a helper who works while the world sleeps. It values stealth, competence, and clarity. The visual system earns credibility through calm and focus. Night Brownie's design reflects this by being unobtrusive, dense with information, and oriented toward nighttime productivity.",
    "keyCharacteristics": [
      "Midnight-First: Optimized for dark environments and focused work.",
      "Tonal Depth: Using subtle shifts in dark tones rather than shadows to define structure.",
      "Fixed Points of Light: Using high-contrast cyan accents sparingly for navigation and primary actions.",
      "Dense Utility: Information-rich components that stay out of the way until needed."
    ],
    "rules": [
      { "name": "The Biolume Rule", "body": "Biolume Cyan should appear sparingly—ideally only once or twice on a screen. Like the mascot's energy, its value comes from its isolation and guidance.", "section": "colors" },
      { "name": "The Flat-First Rule", "body": "Avoid box-shadows; use 1px borders or tonal shifts to define boundaries.", "section": "elevation" }
    ],
    "dos": [
      "Do use Midnight Indigo for primary navigation and card headers.",
      "Do use Biolume Cyan for primary CTAs.",
      "Do maintain high legibility in dark mode.",
      "Do use 1px borders for subtle definition."
    ],
    "donts": [
      "Don't use construction-site metaphors or safety colors (orange/amber/gold).",
      "Don't use excessive shadows.",
      "Don't use loud, distracting animations."
    ]
  }
}