THEME X

Complete design system reference for the Data X brutalist theme. All elements, components, and styles documented.

COLOR PALETTE

Green #22c55e
Green Dark #16a34a
Black #000000
Dark #0f172a

TYPOGRAPHY

Headings

H1 — HEADLINE

H2 — SECTION TITLE

H3 — SUBSECTION

H4 — Component Title

H5 — Small Title
H6 — Caption

Body Text

Bold text creates emphasis. Italic text for subtle variation. Strikethrough for deleted content.

Regular paragraph with optimal line-height (1.8) for readability. The Data X system processes documents with 99.97% accuracy using AI-powered field extraction.

INLINE ELEMENTS

Code

Inline code element with border and background.

Keyboard Shortcuts

Press Ctrl + Shift + P to open command palette.

Text Formatting

Highlighted text for emphasis.

API abbreviation with tooltip.

Textsuperscript and Textsubscript formatting.

BUTTONS

Primary Action Secondary Small Button

CARDS

Standard Card

White background with 3px black border and hard shadow offset.

BLOCKQUOTE

Enterprise acceleration isn't about doing more—it's about eliminating the friction that prevents doing anything at all.

— Data X Philosophy

LISTS

Unordered

  • AI-powered document processing
  • Real-time field validation
  • Zero-code module generation
    • Schema design wizard
    • Field mapping interface
    • Automated testing suite

Ordered

  1. Upload document templates
  2. Configure field mappings
  3. Generate production module
    1. Automated validation
    2. Performance testing
    3. One-click deployment

TABLE

Metric Traditional Data X Improvement
Module Creation 6-14 weeks 17 min 588x faster
Data Extraction Manual AI 99.97% accurate
Error Rate 15% 0.03% 500x better
Deployment IT ticket Self-serve Instant

CODE BLOCKS

// Data X Configuration
const dataX = {
    module: 'document_processor',
    accuracy: 99.97,
    processing: '3 seconds',
    deployment: 'self-service'
};

dataX.generate();
/* Brutalist Design Variables */
:root {
    --border-width: 3px;
    --radius: 0px;
    --shadow: 8px 8px 0px rgba(0,0,0,0.15);
}

NOTICES

Warning — This action requires admin privileges.

Error — Document format not supported.

Info — Processing complete. 47 fields extracted.

Success — Module deployed to production.

BADGES

SYSTEM_READY NEW FEATURE v4.0

ICONS & SVG

SPACING SCALE

Variable Value Usage
--space-xs 0.5rem Tight spacing
--space-sm 1rem Default gap
--space-md 1.5rem Section padding
--space-lg 2.5rem Large gaps
--space-xl 4rem Section spacing

SHADOWS

Variable Value Style
--shadow 8px 8px 0px Standard offset
--shadow-lg 12px 12px 0px Hover state
--shadow-green 8px 8px 0px Brand accent

RESPONSIVE BREAKPOINTS

Breakpoint Width Target
Mobile < 768px 80% traffic
Tablet 768px+ Intermediate
Desktop 1024px+ 20% traffic

DESIGN PRINCIPLES

Brutalist Aesthetic

  • Squared corners — border-radius: 0px
  • Bold borders — border-width: 3px
  • Hard shadows — Offset without blur
  • High contrast — Black/white with green accents

Mobile-First

  • Stack layouts vertically on mobile
  • Expand to grid on desktop
  • Touch-friendly tap targets (44px min)
  • Readable text (16px base)