",
"css": ".ds-pane { border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%), #111820; color: #e6edf4; overflow: hidden; } .ds-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); } .ds-pane-title { margin: 0; font-family: var(--font-display, Quantico, sans-serif); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; } .ds-pane-body { padding: 16px 18px 18px; } .ds-btn-mini { border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 10px; background: rgba(255,255,255,0.03); color: #e6edf4; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: border-color 150ms ease, background 150ms ease; } .ds-btn-mini:hover { border-color: rgba(255,177,48,0.35); background: rgba(245,166,35,0.08); }"
},
{
"name": "Flow Filter Popover Surface",
"kind": "custom",
"refersTo": "pane-surface",
"description": "Floating filter inspector with dedicated overlay elevation.",
"html": "",
"css": ".ds-popover { width: min(420px, 90vw); border: 1px solid rgba(245,166,35,0.24); border-radius: 18px; padding: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), rgba(11,16,22,0.92); box-shadow: 0 24px 60px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.04); backdrop-filter: blur(18px); color: #e6edf4; } .ds-popover-title { margin: 0; font-family: var(--font-display, Quantico, sans-serif); font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; } .ds-popover-copy { margin: 6px 0 0; color: #90a0b2; font-family: var(--font-sans, 'IBM Plex Sans', sans-serif); font-size: 0.78rem; }"
}
],
"narrative": {
"northStar": "The Evidence Console",
"overview": "Islandflow's interface behaves like an investigation instrument, not a presentation layer. The system is tuned for fast read accuracy under volatility: hierarchy is built from contrast, casing, and spacing cadence rather than decorative effects.\n\nThe visual atmosphere is dark and controlled, with amber used as a directional signal rather than ambient decoration. Surfaces are compact and information-dense, but each zone is explicit about purpose so the user can move from detection to validation without losing context.\n\nThis system explicitly rejects the anti-references in PRODUCT.md: no meme-stock hype aesthetics, no generic SaaS card fog, and no Bloomberg cosplay density unless density is earning its keep with decision value.",
"keyCharacteristics": [
"Operational contrast over ornamental contrast.",
"Dense layout with stable rhythm.",
"Accent color treated as scarce signal.",
"Monospace-assisted precision for time, numeric, and status data.",
"Readability preserved during bursty live updates."
],
"rules": [
{
"name": "The Signal Scarcity Rule",
"body": "Amber is a control and attention signal, not a wash. Keep it concentrated on actions, state edges, and critical counters.",
"section": "colors"
},
{
"name": "The Semantic Color Rule",
"body": "Red and green never stand alone for meaning. Every directional or severity cue must include text, shape, or positional confirmation.",
"section": "colors"
},
{
"name": "The Instrument Label Rule",
"body": "Labels are short, uppercase, and spaced. They identify system state fast, without narrative phrasing.",
"section": "typography"
},
{
"name": "The Flat-By-Default Rule",
"body": "If a surface is not floating over active workflow content, it does not get shadow lift.",
"section": "elevation"
}
],
"dos": [
"Do keep status and direction semantic with both color and text labels (`severity-high`, `direction-bullish`, explicit words).",
"Do preserve compact control density (`8px-12px` padding range) so investigation actions stay within a short scan path.",
"Do use amber as a sparse decision signal for active controls, focus rails, and key counters.",
"Do keep overlays visually separated with dedicated shadow roles while leaving primary panes flat.",
"Do design live updates to avoid flashing, excessive animation, and layout shifts during high-volume periods."
],
"donts": [
"Don't make Islandflow feel like a meme-stock or finfluencer trading app with hype, gamification, urgency theater, or promotional calls to action.",
"Don't make Islandflow feel like a generic SaaS analytics dashboard with decorative gradients, vague card stacks, and non-actionable vanity metrics.",
"Don't make Islandflow feel like Bloomberg-style visual density used as aesthetic cosplay instead of as a genuinely useful information structure.",
"Don't rely on red/green alone for directional meaning or severity.",
"Don't use colored side-stripe accents on rows/cards as the primary signifier; use complete semantic chips and labels instead."
]
}
}