Design System Inspired by Blackbox AI

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

• Deep dark backgrounds (#000000, #0A0A0A, #1A1A1A) that reduce cognitive load and support 24/7 operations

• Stark contrast between neutral grays and white for maximum text legibility

• Strategic use of orange (#F05100) and cyan (#009588) accents for critical actions and status signals

• Minimal, almost invisible shadows and borders that defer to typography and spacing for hierarchy

• Monospaced fonts (Geist Mono) for code, technical labels, and system output

• Large, bold headline typography (144px, 96px) for dramatic visual presence

• Clean, rectilinear component design with pill-shaped buttons as the primary interactive pattern

• Color-coded semantic states (warning yellows, error reds, success teals) for rapid status comprehension

### Buttons

#### Primary Button

• Background: #F05100 (orange accent)

• Text Color: #FFFFFF (white)

• Font Size: 16px

• Font Weight: 400

• Padding: 12px 24px

• Border Radius: 3355440px (pill-shaped)

• Border: None

• Height: 40px

• Line Height: 24px

• Box Shadow: None (flat design)

• Hover State: Darken background to #D94600; opacity increase on text to full #FFFFFF

• Active State: Further darken to #B83A00

• Disabled State: Background #555555; text #999999 at 50% opacity

#### Secondary Button

• Background: rgba(250, 250, 250, 0.1) (light gray with 10% opacity)

• Text Color: #FFFFFF (white)

• Font Size: 16px

• Font Weight: 400

• Padding: 12px 24px

• Border Radius: 3355440px (pill-shaped)

• Border: 1px solid #333333 (subtle border)

• Height: 40px

• Line Height: 24px

• Box Shadow: None

• Hover State: Background rgba(250, 250, 250, 0.15); text stays #FFFFFF

• Active State: Background rgba(250, 250, 250, 0.2)

#### Ghost Button

• Background: transparent

• Text Color: #FFFFFF (white) at 70% opacity

• Font Size: 16px

• Font Weight: 400

• Padding: 0px

• Border Radius: 0px

• Border: None

• Height: 24px

• Line Height: 24px

• Box Shadow: None

• Hover State: Text color to #FFFFFF at 100% opacity

• Active State: Text color to #F05100

#### Pill Badge / Tag Button

• Background: oklab(0.705008 0.143597 0.157306 / 0.15) (orange with 15% opacity)

• Text Color: #F05100 (orange text)

• Font Size: 10px

• Font Weight: 400

• Font Family: Geist Mono (monospace for technical tagging)

• Padding: 6px 12px

• Border Radius: 3355440px (full pill)

• Border: 1px solid oklab(0.705008 0.143597 0.157306 / 0.3) (orange border at 30% opacity)

• Height: auto (min 20px)

• Line Height: 15px

• Box Shadow: oklab(0.705008 0.143597 0.157306 / 0.3) 0px 0px 0px 1px (subtle inset border effect)

#### Icon Button

• Background: transparent

• Text Color: #FFFFFF at 60% opacity

• Font Size: 16px

• Font Weight: 400

• Padding: 0px

• Border Radius: 0px

• Border: None

• Height: 24px

• Width: 24px

• Line Height: 24px

• Box Shadow: None

• Hover State: Text color to #FFFFFF at 100%

### Cards & Containers

#### Default Card

• Background: rgba(250, 250, 250, 0.05) (near-transparent white overlay on dark)

• Text Color: #FFFFFF (white)

• Font Size: 16px

• Font Weight: 400

• Padding: 32px 24px (inferred from layout patterns)

• Border Radius: 8px

• Border: 1px solid rgba(255, 255, 255, 0.08) (subtle light border)

• Box Shadow: None (flat, minimalist approach)

• Min Height: 200px

#### Dark Container

• Background: #0A0A0A (near-black for nested content)

• Text Color: #FFFFFF

• Font Size: 16px

• Font Weight: 400

• Padding: 24px

• Border Radius: 0px (sharp corners for code/terminal contexts)

• Border: 1px solid #333333

• Box Shadow: None

#### Section Container

• Background: #1A1A1A (deep gray base)

• Text Color: #FFFFFF

• Padding: 96px 40px (large hero sections) to 60px 24px (content sections)

• Border Radius: 0px

• Border: None

### Inputs & Forms

#### Text Input Default

• Background: rgba(0, 0, 0, 0.3) (semi-transparent dark overlay)

• Text Color: #FFFFFF at 70% opacity

• Font Size: 12px

• Font Weight: 400

• Font Family: Geist Mono (code context)

• Padding: 8px 12px

• Border Radius: 4px

• Border: 1px solid #333333

• Height: 32px

• Line Height: 16px

• Box Shadow: None

• Placeholder Color: #666666 at 50% opacity

#### Text Input Focus

• Border Color: #F05100 (orange highlight)

• Border Width: 2px

• Text Color: #FFFFFF at 100%

• Box Shadow: 0 0 0 2px rgba(240, 81, 0, 0.1) (soft orange glow)

#### Text Input Disabled

• Background: #0A0A0A

• Text Color: #666666 at 50% opacity

• Border Color: #333333

• Cursor: not-allowed

### Navigation

#### Header Navigation

• Background: transparent (overlaid on dark)

• Text Color: #FFFFFF

• Font Size: 16px

• Font Weight: 400

• Padding: 16px 24px (inline items)

• Border Radius: 0px

• Border: None

• Height: auto

• Line Height: 24px

#### Navigation Link (Default)

• Text Color: #FFFFFF at 70% opacity

• Font Size: 12px

• Font Weight: 500

• Hover State: Text color to #FFFFFF at 100%; optional underline #F05100

• Active State: Text color to #F05100; bottom border 2px solid #F05100

#### Navigation Link (Secondary)

• Text Color: #999999

• Font Size: 11px

• Font Weight: 400

• Hover State: Text color to #FFFFFF

### Spacing System

Base 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 items

• 12px — Padding for medium-density components and section gaps

• 16px — Standard padding for cards, containers, and modal interiors; default vertical rhythm

• 20px — Comfortable padding for feature sections and relaxed components

• 24px — Large gap between major sections and padding for prominent cards

• 32px — Extra-large margin between distinct content zones

• 40px — Padding for full-width hero sections and main container sides

• 60px — Large padding for hero sections and top-level container spacing

• 96px — Maximum padding for full-screen hero backgrounds and page-level sections

Usage Context:

• Form inputs and tight UI: 8px

• Card padding: 16px to 24px

• Section gaps: 24px to 32px

• Hero padding: 60px to 96px

### Grid & Container

Max Width: 1400px (inferred from Blackbox design; full-width sections with contained inner content)

Column Strategy:

• Desktop (1200px+): 12-column grid with 24px gutters

• Tablet (768px–1199px): 8-column grid with 16px gutters

• Mobile (< 768px): 4-column grid with 12px gutters

Section Patterns:

• Full-width hero with centered content container

• Multi-column feature sections (3 columns on desktop, 2 on tablet, 1 on mobile)

• Sidebar + main content (25% / 75% split on desktop)

• Stacked card layouts with uniform width on grid

### Whitespace Philosophy

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.

### Border Radius Scale

• 0px — Terminal windows, code blocks, sharp-cornered technical containers, and structural dividers

• 3px — Input fields and small form elements (inferred minimal radius)

• 4px — Standard form inputs, small cards, and tertiary containers

• 8px — Medium cards, tooltips, and dropdown menus

• 3355440px (pill-shaped, infinity radius) — All buttons (primary, secondary, ghost, tags) and badge elements; signals interactivity and forward momentum

### Breakpoints

| 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 |

### Touch Targets

• Minimum Size: 44px × 44px (mobile navigation buttons, action buttons)

• Recommended Size: 48px × 48px (primary CTAs on mobile)

• Button Height: 40px minimum on desktop; 44px on mobile

• Link Padding: 12px vertical and horizontal for increased touch area

• Spacing Between Targets: Minimum 8px gap to prevent accidental taps

• Form Input Height: 40px on mobile; 32px acceptable on desktop with sufficient padding

### Collapsing Strategy

• Hero Typography: Display headings (144px, 96px) scale down to 64px on tablet, 48px on mobile; body text remains 16px minimum for readability

• Multi-Column to Single: Feature sections and card grids collapse from 3 columns (desktop) → 2 columns (tablet) → 1 column (mobile)

• Navigation: Horizontal header navigation collapses to hamburger menu icon on tablets; full menu re-expands on landscape tablet

• Padding & Spacing: Hero padding scales from 96px (desktop) → 60px (tablet) → 32px (mobile); section gaps reduce from 32px to 24px on tablet, 16px on mobile

• Sidebar Layout: Sidebar + main content switches to stacked layout below 1024px; sidebar appears above or below main content depending on context

• Card Widths: Cards expand to full container width on mobile; maintain max-width 400px on tablet for readability

• Typography Sizes: Invert scale on mobile for prominence: H1 48px → 40px on mobile; body 16px → 14px on mobile; labels 12px → 11px on mobile

### Quick Color Reference

Use this condensed mapping for rapid implementation:

• Primary CTA: Orange (#F05100) — applies to all primary buttons, hero accents, active navigation

• Secondary CTA: Blue (#1447E6) — applies to secondary links and emphasis

• Success/Positive: Cyan (#009588) — applies to success badges, positive status indicators

• Warning: Yellow (#F99C00 or #FCBB00) — applies to caution states and warnings

• Error/Critical: Red (#E40014) — applies to errors, destructive actions, failures only

• Heading Text: White (#FFFFFF) — all headings on dark backgrounds

• Body Text: Gray (#666666) — primary body copy and descriptions

• Secondary Text: Light Gray (#999999) — muted labels, hints, and de-emphasized content

• Background (Primary): Deep Gray (#1A1A1A) — main surface background

• Background (Nested): Near-Black (#0A0A0A) — code blocks, terminal windows, nested containers

• Background (Hero): Pure Black (#000000) — maximum contrast for hero sections

• Borders: Subtle Gray (#333333) — minimal, understated borders; use sparingly

• Disabled State: Medium Gray (#555555) text on dark background; reduce opacity to 50%

### Iteration Guide

Follow these rules in order of precedence for consistent implementation:

1. 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.

2. 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.

3. Maintain the dark background hierarchy: #000000 (hero backgrounds) > #0A0A0A (code/terminal) > #1A1A1A (primary surfaces) > #333333 (subtle dividers). Never invert this order.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.

11. 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.

12. 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.