210 lines
14 KiB
JSON
210 lines
14 KiB
JSON
{
|
|
"schemaVersion": 2,
|
|
"generatedAt": "2026-05-14T08:06:45Z",
|
|
"title": "Design System: Islandflow Terminal",
|
|
"extensions": {
|
|
"colorMeta": {
|
|
"bg-core": {
|
|
"role": "neutral",
|
|
"displayName": "Command Black",
|
|
"canonical": "#06080b",
|
|
"tonalRamp": ["#050608", "#0b0f14", "#111821", "#1a2430", "#263445", "#394a5f", "#6f8095", "#dce3ea"]
|
|
},
|
|
"bg-pane": {
|
|
"role": "neutral",
|
|
"displayName": "Panel Graphite",
|
|
"canonical": "#111820",
|
|
"tonalRamp": ["#0b0f14", "#121922", "#1a2430", "#253444", "#314658", "#4a6076", "#7b90a5", "#dbe3ec"]
|
|
},
|
|
"text-primary": {
|
|
"role": "neutral",
|
|
"displayName": "Data Ink",
|
|
"canonical": "#e6edf4",
|
|
"tonalRamp": ["#1c232b", "#2a333e", "#3a4654", "#4f6072", "#6a7f93", "#92a4b5", "#bcc8d3", "#e6edf4"]
|
|
},
|
|
"signal-amber": {
|
|
"role": "primary",
|
|
"displayName": "Signal Amber",
|
|
"canonical": "#f5a623",
|
|
"tonalRamp": ["#2f1f06", "#5b3c0b", "#865913", "#b5761a", "#d89220", "#f5a623", "#f8c069", "#fce3bc"]
|
|
},
|
|
"confirm-green": {
|
|
"role": "tertiary",
|
|
"displayName": "Confirm Green",
|
|
"canonical": "#25c17a",
|
|
"tonalRamp": ["#062716", "#0d4b2a", "#13703f", "#1a9554", "#20ae6a", "#25c17a", "#6ed5a6", "#c9f1df"]
|
|
},
|
|
"risk-red": {
|
|
"role": "tertiary",
|
|
"displayName": "Risk Red",
|
|
"canonical": "#ff6b5f",
|
|
"tonalRamp": ["#320d0a", "#611914", "#91261f", "#bf362f", "#e04f48", "#ff6b5f", "#ff9b93", "#ffd9d5"]
|
|
},
|
|
"info-blue": {
|
|
"role": "secondary",
|
|
"displayName": "Info Blue",
|
|
"canonical": "#4da3ff",
|
|
"tonalRamp": ["#0a1f33", "#143c61", "#1f5a8f", "#2b78bd", "#3a91e0", "#4da3ff", "#8cc4ff", "#d8ebff"]
|
|
}
|
|
},
|
|
"typographyMeta": {
|
|
"display": {
|
|
"displayName": "Display",
|
|
"purpose": "Primary wayfinding headers and route-level titles."
|
|
},
|
|
"body": {
|
|
"displayName": "Body",
|
|
"purpose": "Default transactional and descriptive copy in panes and controls."
|
|
},
|
|
"label": {
|
|
"displayName": "Label/Mono",
|
|
"purpose": "Data labels, numeric cells, chips, and compact control text."
|
|
}
|
|
},
|
|
"shadows": [
|
|
{
|
|
"name": "overlay-lift",
|
|
"value": "0 24px 60px rgba(0, 0, 0, 0.42)",
|
|
"purpose": "Filter popover separation from live content."
|
|
},
|
|
{
|
|
"name": "drawer-lift",
|
|
"value": "0 24px 70px rgba(0, 0, 0, 0.5)",
|
|
"purpose": "Right-side detail drawer emphasis."
|
|
},
|
|
{
|
|
"name": "tooltip-lift",
|
|
"value": "0 16px 40px rgba(0, 0, 0, 0.45)",
|
|
"purpose": "Transient metadata tooltip depth."
|
|
}
|
|
],
|
|
"motion": [
|
|
{
|
|
"name": "fast-state",
|
|
"value": "150ms ease",
|
|
"purpose": "Button and hover state transitions."
|
|
},
|
|
{
|
|
"name": "focus-rail",
|
|
"value": "160ms ease",
|
|
"purpose": "Input underline and glow transitions."
|
|
},
|
|
{
|
|
"name": "count-reveal",
|
|
"value": "180ms ease",
|
|
"purpose": "Missed counter width/position reveal."
|
|
}
|
|
],
|
|
"breakpoints": [
|
|
{
|
|
"name": "lg",
|
|
"value": "1180px"
|
|
},
|
|
{
|
|
"name": "md",
|
|
"value": "980px"
|
|
},
|
|
{
|
|
"name": "sm",
|
|
"value": "720px"
|
|
}
|
|
]
|
|
},
|
|
"components": [
|
|
{
|
|
"name": "Terminal Action Button",
|
|
"kind": "button",
|
|
"refersTo": "button-base",
|
|
"description": "Default compact control for tape actions and utility toggles.",
|
|
"html": "<button class=\"ds-btn\">Pause Tape</button>",
|
|
"css": ".ds-btn { 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; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; } .ds-btn:hover { border-color: rgba(255,177,48,0.35); background: rgba(245,166,35,0.08); color: #ffd89a; } .ds-btn:focus-visible { outline: none; border-color: rgba(255,177,48,0.45); box-shadow: 0 0 0 2px rgba(245,166,35,0.2); } .ds-btn:active { background: rgba(245,166,35,0.12); }"
|
|
},
|
|
{
|
|
"name": "Rail Navigation Link",
|
|
"kind": "nav",
|
|
"refersTo": "nav-link",
|
|
"description": "Primary route selector in the left terminal rail.",
|
|
"html": "<a class=\"ds-nav-link\" href=\"#\">Signals</a>",
|
|
"css": ".ds-nav-link { display: inline-block; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px; color: #90a0b2; background: transparent; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; } .ds-nav-link:hover { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: #e6edf4; } .ds-nav-link:focus-visible { outline: none; border-color: rgba(255,177,48,0.35); } .ds-nav-link.ds-nav-link-active { border-color: rgba(255,177,48,0.35); background: linear-gradient(90deg, rgba(245,166,35,0.12), rgba(245,166,35,0.04)); color: #e6edf4; }"
|
|
},
|
|
{
|
|
"name": "Filter Underline Input",
|
|
"kind": "input",
|
|
"refersTo": "pane-surface",
|
|
"description": "Global tape filter field with amber under-rail focus behavior.",
|
|
"html": "<label class=\"ds-filter\"><span class=\"ds-filter-label\">Contract Filter</span><span class=\"ds-filter-line\"><input class=\"ds-filter-input\" placeholder=\"Type symbol, contract, or expiry\" /></span></label>",
|
|
"css": ".ds-filter { display: inline-flex; flex-direction: column; gap: 4px; min-width: 260px; } .ds-filter-label { color: #6e7b8c; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; } .ds-filter-line { position: relative; display: block; padding-bottom: 6px; } .ds-filter-line::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(245,166,35,0.88), rgba(245,166,35,0.14)); } .ds-filter-line::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(255,216,154,0.98), rgba(245,166,35,0.92)); transform: scaleX(0.2); transform-origin: left center; opacity: 0; transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease; } .ds-filter-input { width: 100%; border: 0; background: transparent; color: #e6edf4; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; } .ds-filter-input::placeholder { color: rgba(193,203,224,0.58); font-size: 0.86rem; } .ds-filter-input:focus-visible { outline: none; } .ds-filter:focus-within .ds-filter-label { color: #ffd89a; } .ds-filter:focus-within .ds-filter-line::after { transform: scaleX(1); opacity: 1; box-shadow: 0 0 18px rgba(245,166,35,0.34); }"
|
|
},
|
|
{
|
|
"name": "Semantic Status Chip",
|
|
"kind": "chip",
|
|
"refersTo": "status-chip",
|
|
"description": "Pill used for direction, severity, and condition tags with explicit label text.",
|
|
"html": "<span class=\"ds-chip ds-chip-risk\">Bearish</span>",
|
|
"css": ".ds-chip { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; } .ds-chip-neutral { background: rgba(77,163,255,0.14); border-color: rgba(77,163,255,0.26); color: #bddcff; } .ds-chip-good { background: rgba(37,193,122,0.12); border-color: rgba(37,193,122,0.34); color: #98f0c0; } .ds-chip-risk { background: rgba(255,107,95,0.14); border-color: rgba(255,107,95,0.34); color: #ffc3bd; }"
|
|
},
|
|
{
|
|
"name": "Terminal Pane",
|
|
"kind": "card",
|
|
"refersTo": "pane-surface",
|
|
"description": "Default data region container for tape, alerts, and chart modules.",
|
|
"html": "<section class=\"ds-pane\"><header class=\"ds-pane-head\"><h3 class=\"ds-pane-title\">Flow Packets</h3><button class=\"ds-btn-mini\">Refresh</button></header><div class=\"ds-pane-body\">Pane content</div></section>",
|
|
"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": "<aside class=\"ds-popover\"><h4 class=\"ds-popover-title\">Flow Filters</h4><p class=\"ds-popover-copy\">Changes apply immediately.</p></aside>",
|
|
"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."
|
|
]
|
|
}
|
|
}
|