Arrakis

Overview

Arrakis is a mission-critical AI platform designed for industrial enterprises operating in high-stakes environments—aerospace, defense, energy, and advanced manufacturing. The design system embodies "Industrial Minimalism with Precision Accents": a dark, austere foundation (rgb(15, 12, 11) background, rgb(253, 250, 246) text) punctuated by a warm, energetic orange accent (rgb(255, 170, 91)) that signals actionability and urgency without sacrificing technical credibility. The aesthetic evokes the control rooms and command centers where mission-critical decisions are made—clean, uncluttered, purposeful, with every pixel earning its place. The UI communicates reliability through restraint: no gradients, no skeuomorphism, no decorative flourishes. Typography is deliberately split between serif (terraneSerif at 300–400 weight for headlines, evoking authority and precision) and sans-serif (terraneSans for body and interaction, ensuring clarity under pressure). The brand personality is direct, technical, and outcome-focused—no marketing hyperbole, only facts and results. Example voice: "Deploy agents to production in 14 days. Reduce operational risk by 40%. Measurable impact, not promises."

Colors

The color system is built on a near-black surface stack (surface: rgb(15, 12, 11), surface-dim: rgb(10, 8, 7), surface-bright: rgb(26, 23, 20)) that provides visual calm and reduces cognitive load in data-dense interfaces. The primary accent, rgb(255, 170, 91), is reserved exclusively for high-priority CTAs, focus states, and status indicators—it appears sparingly to maximize impact. Secondary colors are muted neutrals: on-surface (rgb(253, 250, 246)) for primary text, on-surface-variant (rgb(212, 207, 200)) for secondary text and borders. Error states use a desaturated red (rgb(242, 184, 181) on rgb(140, 29, 24) background) to signal issues without alarm-bell aggression. The outline token (rgb(139, 134, 128)) is used for subtle borders and dividers, maintaining visual hierarchy without vi

Typography

The type system pairs serif and sans-serif to balance authority with clarity. Display (terraneSerif, 56px, 300 weight, -0.02em letter-spacing) is reserved for hero headlines and communicates gravitas; headline-lg (40px, 400 weight) is used for section titles and maintains visual weight without excess. Body text (terraneSans, 16px, 400 weight, 24px line-height) is set with generous line-height (1.5x) to ensure readability in high-stress contexts where users scan rapidly. Labels and UI text (terraneSans, 14px, 600 weight, 0.01em letter-spacing) are slightly tighter to signal interaction and hierarchy. All text over 16px uses -0.01em to -0.02em letter-spacing to tighten the visual rhythm; smaller text (12–14px) uses 0.01em–0.04em to maintain legibility. Apply text-shadow: 0 2px 4px rgba(0,0,0

Layout

The layout system uses a 12-column grid with a 1280px container max-width, scaled fluidly on mobile. Horizontal spacing follows the semantic scale: gutter (24px) for section padding, lg (40px) for major section separation, md (24px) for card-to-card spacing, and sm (12px) for intra-component spacing. Vertical rhythm is maintained at 8px increments (the unit token), creating a predictable, grid-aligned composition. Hero sections use asymmetric layouts (text on left, imagery on right) with 64px (xl) separation between columns. Cards and containers use 24px (md) padding internally, with 12px (sm) gaps between nested elements. The design favors whitespace (negative space) over density: a card with 24px padding and 16px line-height creates breathing room that reduces cognitive load. Mobile layo

Elevation & Depth

Depth is conveyed through subtle layering rather than dramatic shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0,0,0,0.12)) for interactive elements like buttons and inputs, md (0 4px 12px rgba(0,0,0,0.1)) for cards and modals, and lg (0 16px 40px rgba(0,0,0,0.2)) for overlays and dropdowns. All shadows use a 0° angle (directly below) to maintain a flat, technical aesthetic—no directional or soft shadows that suggest depth. Borders (1px solid, outline or outline-variant tokens) define container edges more prominently than shadows; a card is visually separated by its border

Shapes

The shape philosophy is "Technical Precision with Minimal Softness." Border-radius follows a restrained scale: sm (0.25rem / 4px) for buttons and small interactive elements, DEFAULT (0.5rem / 8px) for cards and input fields, md (0.75rem / 12px) for larger containers, and lg (1rem / 16px) for modals and overlays. Avoid full (9999px) rounding except for badges and icon buttons. The minimal rounding (4–8px) signals that this is a professional tool, not a consumer app; it evokes industrial design (beveled edges on machinery) rather than playful softness. Buttons use 4px radius to feel crisp and cl

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses the accent orange (rgb(255, 170, 91)) background with dark text (rgb(27, 22, 19)), 12px vertical / 24px horizontal padding, 48px height, and 4px border-radius. On hover, the background shifts to #e6985a (a darker orange, -10% lightness) with a 200ms ease transition. The secondary button (button-secondary) uses a transparent background with a 1px outline-variant border and on-surface text; on hover, it fills with surface-container-high and the border shifts to outline. Ghost buttons (button-ghost) are transparent with no border; on hover, they gain a subtle rgba(255,255,255,0.08) background. All buttons use label-md typography (14px, 600 weight) and maintain a minimum 48px height for to

Do's and Don'ts

**Do**

• Do use the primary accent (rgb(255, 170, 91)) exclusively on CTAs, focus states, and critical status indicators—never on backgrounds or decorative elements.
• Do maintain 24px (md) padding inside cards and containers; never compress below 12px (sm) to preserve breathing room.
• Do apply 200ms ease transitions on all interactive state changes (hover, focus, active) to signal responsiveness without jarring the user.
• Do use terraneSerif (300–400 weight) for headlines to convey authority; reserve terraneSans for body and UI text to ensure clarity.
• Do test all text at 16px body-md size with 24px line-height; never reduce line-height below 1.4x for body text.
• Do use 1px outline-variant borders (rgb(90, 85, 80)) to define card and input edges; avoid thick borders or double-borders.

**Don't**

• Don't use the primary accent on backgrounds, gradients, or decorative elements—it must remain reserved for interactive affordances.
• Don't apply shadows heavier than md (0 4px 12px rgba(0,0,0,0.1)) on cards; the system uses borders first, shadows second.
• Don't use border-radius larger than 16px (lg) except for badges and icon buttons; excessive rounding undermines technical credibility.
• Don't mix serif and sans-serif within a single text block; use terraneSerif for headlines only, terraneSans for all body and UI.
• Don't reduce padding below 12px (sm) or line-height below 1.4x on body text; this compromises readability in high-stress environments.
• Don't animate color changes faster than 200ms or slower than 400ms; outside this range, transitions feel sluggish or jarring.