Switch between the rendered Visual preview and the Raw DESIGN.md.
The Blackbox AI design system embodies a dark, technical, and cutting-edge aesthetic tailored for enterprise AI infrastructure and autonomous coding agents. The visual language prioritizes clarity, efficiency, and developer focus through a predominantly black and neutral palette punctuated by bold accent colors—particularly a vibrant orange that signals action and innovation. The design eschews decorative elements in favor of precision, utilizing high-contrast typography, minimal shadows, and clean geometry to create an interface that feels both powerful and approachable. This is a design system for builders: it emphasizes functionality, readability in low-light environments, and rapid task execution. The sparse use of color creates visual hierarchy and draws attention to critical interactive elements, while the monospaced font usage in code contexts reinforces the technical DNA of the platform.
Key Characteristics
#F05100): Primary call-to-action, button highlights, and accent branding; conveys energy and forward momentum in the agent deployment context#1447E6): Secondary emphasis, interactive states, and technical highlights#009588): Success states, status indicators, and positive system feedback#104E64): Muted secondary information and subtle status contexts#1447E6): Hyperlink text and interactive text elements; inherited from primary blue#FFFFFF): Text on transparent or ghost buttons for clear hierarchy#FFFFFF on dark backgrounds): Secondary action text with 60% opacity for subtle interactions#000000): Primary text on light surfaces; used sparingly#0A0A0A): Darkest background layer, creating depth in nested UI#1A1A1A): Primary dark background, surfaces, and containers#333333): Inferred secondary background and subtle dividers#555555): Tertiary text and disabled states with reduced emphasis#666666): Body text, descriptions, and secondary content (most frequently used)#999999): Muted labels, hints, and de-emphasized information#FAFAFA): Subtle light backgrounds or very light surfaces#FFFFFF): Maximum contrast, primary headings, and critical text on dark backgroundsrgba(152.4, 152.4, 152.4, 0.05)): Near-transparent overlay on surfaces for depth without visual weight#333333): Minimal borders for card and container separation; inferred from design tokens#666666): Stronger borders for distinct sections and input fields#F99C00): Warning states and cautionary alerts#FCBB00): Alternative warning state for high-visibility alerts#E40014): Critical errors, destructive actions, and system failures#009588): Positive confirmations, completed tasks, and healthy system statesoklab(0.705008 0.143597 0.157306 / 0.3)): Subtle shadow for button elevation and depth; used with 1px blur for minimal visual weightPrimary (UI): ui-sans-serif (system sans-serif stack)
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serifSecondary (Code/Technical): Geist Mono (monospace)
"Courier New", monospace| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | ui-sans-serif | 144px | 700 | 129.6px | 0px | Hero headlines; extreme contrast for homepage hero sections |
| Display / H2 | ui-sans-serif | 96px | 700 | 91.2px | 0px | Major section headings; subdued hero text |
| Heading / H3 | ui-sans-serif | 14px | 600 | 20px | 0px | Card titles, section headers, button labels |
| Body / Paragraph | ui-sans-serif | 16px | 400 | 24px | 0px | Primary body text, descriptions, and narrative content |
| Body / Small | Geist Mono | 12px | 400 | 16px | 0px | List items, code blocks, technical annotations; monospace for developer context |
| Link / Monospace | Geist Mono | 11px | 600 | 16.5px | 0px | Terminal-style links, code references, technical commands |
| Button / Primary | ui-sans-serif | 16px | 400 | 24px | 0px | Primary action buttons; maintains readable weight at button scale |
| Button / Secondary | ui-sans-serif | 11px | 500 | 16.5px | 0px | Secondary actions and tertiary navigation |
| Button / Mono | Geist Mono | 10px | 400 | 15px | 0px | Code output, tags, badges with monospace treatment |
| Caption / Label | ui-sans-serif | 12px | 400 | 16px | 0px | Form labels, captions, and secondary metadata |
#F05100 (orange accent)#FFFFFF (white)16px40012px 24px3355440px (pill-shaped)40px24px#D94600; opacity increase on text to full #FFFFFF#B83A00#555555; text #999999 at 50% opacityrgba(250, 250, 250, 0.1) (light gray with 10% opacity)#FFFFFF (white)16px40012px 24px3355440px (pill-shaped)1px solid #333333 (subtle border)40px24pxrgba(250, 250, 250, 0.15); text stays #FFFFFFrgba(250, 250, 250, 0.2)transparent#FFFFFF (white) at 70% opacity16px4000px0px24px24px#FFFFFF at 100% opacity#F05100oklab(0.705008 0.143597 0.157306 / 0.15) (orange with 15% opacity)#F05100 (orange text)10px400Geist Mono (monospace for technical tagging)6px 12px3355440px (full pill)1px solid oklab(0.705008 0.143597 0.157306 / 0.3) (orange border at 30% opacity)auto (min 20px)15pxoklab(0.705008 0.143597 0.157306 / 0.3) 0px 0px 0px 1px (subtle inset border effect)transparent#FFFFFF at 60% opacity16px4000px0px24px24px24px#FFFFFF at 100%rgba(250, 250, 250, 0.05) (near-transparent white overlay on dark)#FFFFFF (white)16px40032px 24px (inferred from layout patterns)8px1px solid rgba(255, 255, 255, 0.08) (subtle light border)200px#0A0A0A (near-black for nested content)#FFFFFF16px40024px0px (sharp corners for code/terminal contexts)1px solid #333333#1A1A1A (deep gray base)#FFFFFF96px 40px (large hero sections) to 60px 24px (content sections)0pxrgba(0, 0, 0, 0.3) (semi-transparent dark overlay)#FFFFFF at 70% opacity12px400Geist Mono (code context)8px 12px4px1px solid #33333332px16px#666666 at 50% opacity#F05100 (orange highlight)2px#FFFFFF at 100%0 0 0 2px rgba(240, 81, 0, 0.1) (soft orange glow)#0A0A0A#666666 at 50% opacity#333333not-allowedtransparent (overlaid on dark)#FFFFFF16px40016px 24px (inline items)0pxauto24px#FFFFFF at 70% opacity12px500#FFFFFF at 100%; optional underline #F05100#F05100; bottom border 2px solid #F05100#99999911px400#FFFFFFBase Unit: 8px
Spacing Scale:
4px — Micro spacing for gaps between tightly related elements (badge internal gaps, tight component pairs)8px — Tight padding for form inputs, small buttons, and compact list items12px — Padding for medium-density components and section gaps16px — Standard padding for cards, containers, and modal interiors; default vertical rhythm20px — Comfortable padding for feature sections and relaxed components24px — Large gap between major sections and padding for prominent cards32px — Extra-large margin between distinct content zones40px — Padding for full-width hero sections and main container sides60px — Large padding for hero sections and top-level container spacing96px — Maximum padding for full-screen hero backgrounds and page-level sectionsUsage Context:
8px16px to 24px24px to 32px60px to 96pxMax Width: 1400px (inferred from Blackbox design; full-width sections with contained inner content)
Column Strategy:
24px gutters16px gutters12px guttersSection Patterns:
The design system prioritizes breathing room and visual clarity through deliberate whitespace. Large, uncluttered backgrounds (#1A1A1A, #000000) provide cognitive rest between interactive elements. Padding and margins follow the 8px base scale to create rhythm without feeling sparse. Typography size and weight substitutes for decorative elements; blank space is leveraged to draw focus rather than borders or background colors. This minimalist approach supports the 24/7 operational context of the platform—users can sustain attention without visual fatigue.
0px — Terminal windows, code blocks, sharp-cornered technical containers, and structural dividers3px — Input fields and small form elements (inferred minimal radius)4px — Standard form inputs, small cards, and tertiary containers8px — Medium cards, tooltips, and dropdown menus3355440px (pill-shaped, infinity radius) — All buttons (primary, secondary, ghost, tags) and badge elements; signals interactivity and forward momentum| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | No shadow; transparent or minimal background | Primary background surfaces, body text areas |
| Subtle (L1) | 0px 1px 2px rgba(0, 0, 0, 0.1) | Input fields, small buttons, tertiary components |
| Raised (L2) | 0px 2px 8px rgba(0, 0, 0, 0.2) | Cards, modals, popovers, dropdown menus |
| Floating (L3) | 0px 8px 24px rgba(0, 0, 0, 0.3) | Top-level modals, floating action buttons, prominent overlays |
| Deep (L4) | 0px 12px 32px rgba(0, 0, 0, 0.4) | Full-screen dialogs, deepest overlays, contextual help panels |
Shadow Philosophy:
The design system employs minimal, almost invisible shadows to maintain the dark, technical aesthetic while preserving depth hierarchy. Shadows use pure black with opacity scaling (10%–40%) rather than colored shadows, which would introduce visual noise into the dark interface. The primary elevation technique is background color differentiation—layering dark tones (#0A0A0A on #1A1A1A on #000000) rather than relying on shadows. This approach preserves the flat, modern look while allowing users to quickly distinguish interactive surfaces. Buttons and badges use a 1px border shadow (oklab(0.705008 0.143597 0.157306 / 0.3) 0px 0px 0px 1px) to create a subtle inset effect without traditional shadows, signaling interactivity without visual clutter.
#333333 or rgba(255, 255, 255, 0.08) instead of high-contrast strokes.| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 480px | Single-column layouts; 4px–8px padding; typography size reduced by 1 step; buttons full-width; hero padding 32px |
| Tablet Small | 480px–767px | 2-column grid; 12px padding; 16px body text; compact navigation with hamburger menu; hero padding 48px |
| Tablet | 768px–1023px | 8-column grid; 16px padding; standard typography; sidebar navigation collapses; section gaps 20px |
| Laptop | 1024px–1279px | 12-column grid with 24px gutters; full navigation; 3-column feature grids; standard spacing |
| Desktop | 1280px+ | Max-width 1400px container; full-width hero sections; expanded card layouts; maximum 96px padding |
| Large Display | 1920px+ | Optional full-screen displays; 120px padding on hero sections; 4+ column grids |
44px × 44px (mobile navigation buttons, action buttons)48px × 48px (primary CTAs on mobile)40px minimum on desktop; 44px on mobile12px vertical and horizontal for increased touch area8px gap to prevent accidental taps40px on mobile; 32px acceptable on desktop with sufficient paddingUse this condensed mapping for rapid implementation:
#F05100) — applies to all primary buttons, hero accents, active navigation#1447E6) — applies to secondary links and emphasis#009588) — applies to success badges, positive status indicators#F99C00 or #FCBB00) — applies to caution states and warnings#E40014) — applies to errors, destructive actions, failures only#FFFFFF) — all headings on dark backgrounds#666666) — primary body copy and descriptions#999999) — muted labels, hints, and de-emphasized content#1A1A1A) — main surface background#0A0A0A) — code blocks, terminal windows, nested containers#000000) — maximum contrast for hero sections#333333) — minimal, understated borders; use sparingly#555555) text on dark background; reduce opacity to 50%Follow these rules in order of precedence for consistent implementation:
All buttons are pill-shaped (border-radius: 3355440px). Primary buttons use orange (#F05100) background. Secondary buttons use transparent background with light border. Ghost buttons are text-only with white text at reduced opacity.
Monospace font (Geist Mono) signals technical content. Use for code snippets, terminal output, command examples, and technical labels. Use sans-serif (ui-sans-serif) for all UI copy, headings, and prose.
Maintain the dark background hierarchy: #000000 (hero backgrounds) > #0A0A0A (code/terminal) > #1A1A1A (primary surfaces) > #333333 (subtle dividers). Never invert this order.
Typography follows strict scale: 144px / 96px (display) → 32px (large heading) → 24px (medium heading) → 16px (body) → 12px (caption/small) → 10px (micro/badge). Do not add intermediate sizes.
Spacing uses 8px base unit. All padding, margins, and gaps must be multiples of 8px (8, 16, 24, 32, 40, 60, 96). Never use odd values like 13px, 18px, or 27px.
Status colors require icons or text labels. Never communicate status (success, warning, error) through color alone. Pair green (#009588), yellow (#F99C00), or red (#E40014) with a glyph or text descriptor.
Borders are minimal and use 1px width. Border color is either #333333 (strong) or rgba(255, 255, 255, 0.08) (subtle). Never use high-contrast strokes like white (#FFFFFF) on black.
Shadows are nearly invisible. Use black with opacity (rgba(0, 0, 0, 0.1–0.3)) rather than colored shadows. For buttons and badges, prefer a 1px border effect (oklab(0.705008 0.143597 0.157306 / 0.3) 0px 0px 0px 1px) over traditional shadows.
Form inputs use compact styling: 32px height, 8px internal padding, rgba(0, 0, 0, 0.3) background, 1px #333333 border, Geist Mono font at 12px. Focus state adds 2px orange (#F05100) border with soft glow.
White text (#FFFFFF) on all dark backgrounds. Test contrast; aim for WCAG AAA (7:1 ratio minimum). Reduce opacity to 70% for secondary text, 50% for disabled states, 30% for placeholders.
Hero sections use extreme typography (144px–96px headings) with large padding (60px–96px) on dark backgrounds. Reserve this scale for primary messaging only; do not repeat on secondary pages.
Cards and containers use subtle 5% opacity overlays (rgba(250, 250, 250, 0.05)) to create visual separation from background. Add minimal 1px border (rgba(255, 255, 255, 0.08)) if needed for clarity.