Complete, open-source component library & token specification for the Narrabrain platform. Professional-grade dark mode infrastructure optimized for high-density creative environments.
Core Principle: The user interface functions as an invisible utility framework. High-density prompt properties, vector queries, and timeline parameters remain dark, flat, and structured—prioritizing creative work over layout decoration.
Exactly 90% of screen space maps to desaturated neutral UI. Luminous focus accents occupy 10% or less, deployed explicitly to guide orientation.
Pure white text on dark backgrounds causes visual ghosting. We enforce calibrated off-white scales to protect long-term reading comfort.
Panels use layered shadow elevation instead of high-contrast borders. This minimizes visual noise while maintaining clear spatial relationships.
All spacing follows an 8px modular grid system for visual consistency and alignment efficiency.
--radius-xs
2px
--radius-sm
4px
--radius-md
6px
--radius-lg
8px
--radius-xl
12px
--radius-full
9999px
Strategic color tokens mapped to functional definitions. Direct hardcoding is prohibited—all colors must reference design tokens.
Reserved strictly for telemetry confirmation loops. Highlights compiled prompts, successful vector passes, and connected assets. Never for decoration.
Signifies critical system exceptions and broken layouts. Functions as an interactive feedback hook for user dissatisfaction inputs on AI iterations.
Dual font pairing: Playfair Display for editorial elements, Inter for operational data.
Used for titles, headings, and editorial marketing content.
| Token | Size | Line Height | Letter Spacing | Usage |
|---|---|---|---|---|
--text-xs |
10px | 1.4 | 0.03em | Captions, metadata |
--text-sm |
11px | 1.5 | 0.05em | Labels, timestamps |
--text-base |
12px | 1.5 | 0.02em | Body, form labels |
--text-md |
14px | 1.6 | 0.01em | Primary body text |
--text-lg |
16px | 1.6 | 0em | Subheadings |
--text-2xl |
20px | 1.4 | -0.01em | Section headings |
All states use subtle elevation adjustments and color shifts rather than loud background changes.
Input states communicate changes through border indicators rather than background color shifts.
Default State
Focused State
Filled State
Standard content grouping with subtle elevation.
Interactive/selectable with brand accent border.
Subtle content sections with muted borders.
Copy this configuration into your tailwind.config.js file. All design tokens map directly to CSS utilities.
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
narrabrain: {
canvas: '#121214',
surface: '#1E1F22',
element: '#2B2D31',
primary: '#E3E5E8',
brand: '#477BFF',
success: '#24A19C',
warning: '#D18E34',
}
},
spacing: {
'xs': '4px',
'sm': '8px',
'md': '16px',
'lg': '24px',
'xl': '32px',
'2xl': '48px',
},
borderRadius: {
'xs': '2px',
'sm': '4px',
'md': '6px',
'lg': '8px',
'xl': '12px',
'full': '9999px',
},
fontSize: {
'xs': ['10px', { lineHeight: '1.4', letterSpacing: '0.03em' }],
'sm': ['11px', { lineHeight: '1.5', letterSpacing: '0.05em' }],
'base': ['12px', { lineHeight: '1.5', letterSpacing: '0.02em' }],
'md': ['14px', { lineHeight: '1.6', letterSpacing: '0.01em' }],
'lg': ['16px', { lineHeight: '1.6', letterSpacing: '0em' }],
'2xl': ['20px', { lineHeight: '1.4', letterSpacing: '-0.01em' }],
},
boxShadow: {
'elevation-1': '0 1px 3px rgba(0,0,0,0.3)',
'elevation-2': '0 4px 8px rgba(0,0,0,0.4)',
'elevation-3': '0 8px 16px rgba(0,0,0,0.5)',
'elevation-4': '0 12px 24px rgba(0,0,0,0.6)',
},
fontFamily: {
display: ['Playfair Display', 'serif'],
ui: ['Inter', 'sans-serif'],
},
},
},
plugins: [],
}
Always use utility tokens like bg-narrabrain-canvas or text-narrabrain-primary. Never hardcode hex values.
Block raw border declarations. Use shadow utilities like shadow-elevation-2 for structural separation.
Use font-display for headings (Playfair), font-ui for body (Inter).
Spacing tokens follow 8px modular grid. Use space-md, space-lg for consistent layouts.