Nominal

Overview

Nominal is a mission-critical engineering platform that transforms hardware test and operations through unified data infrastructure and real-time observability. The design system embodies **Architectural Minimalism with Technical Precision**—a stark, high-contrast aesthetic that prioritizes clarity and function over decoration. The brand personality is authoritative yet approachable: engineers trust Nominal to deliver mission-critical insights without friction. The UI evokes the precision of technical dashboards and the confidence of aerospace-grade systems, using pure black (#000000) as the dominant surface, pure white (#ffffff) for primary text, and a signature forest green (#357f46) as the accent for actionable elements and brand moments. The emotional response is one of control and clarity: users feel empowered to make data-driven decisions at speed. Voice: direct, technical, never flowery. Example: "Deploy test sequences in minutes, not weeks. Nominal handles the infrastructure."

Colors

The color system is built on a **high-contrast, monochromatic foundation with a single brand accent**. Primary surface is pure black (#000000), with on-surface text in pure white (#ffffff). The surface stack uses subtle increments of near-black (surface-container at #121212, surface-container-high at #1f1f1f) to create depth without sacrificing contrast—critical for reading dense telemetry data. The brand accent, forest green (#357f46), is reserved exclusively for primary CTAs, focus states, and brand-critical interactive elements; it appears sparingly but with high visual weight. Secondary surfaces use a warm off-white (#edebe4) for light-mode contexts and data cards, paired with near-black text (#2e2e2e) for maximum readability. Tertiary grays (#e5e5e5, #d9d9d9) support secondary informa

Typography

The type system pairs two distinct families to create a technical yet sophisticated voice. **Muoto** (a geometric, modern typeface) is reserved for display and headline levels (display at 64px, headline-lg at 48px, headline-md at 36px), establishing a bold, confident visual hierarchy with tight letter-spacing (-0.02em to -0.01em) that reinforces the precision aesthetic. **Inter** (a neutral, highly legible sans-serif) handles all body and label copy (body-lg at 19px, body-md at 16px, label-md at 11px), ensuring readability across all screen sizes and contexts. **FraktionMono** (a technical monospace) is used exclusively for navigation labels, data displays, and UI controls (label-md at 11px with 0.05em letter-spacing), reinforcing the engineering-focused brand personality. All headline tex

Layout

The layout system uses a **12-column fluid grid** with a fixed max-width of 1380px, centered on the viewport. The spacing scale is semantic and hierarchical: unit (4px) for micro-adjustments, sm (12px) for component padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero and full-width spacing. Container max-width is 1380px, with gutter spacing of 24px on all sides, collapsing to 16px on mobile. White-space is used aggressively to separate information density: sections are separated by lg (40px) spacing, cards within sections by md (24px), and internal card content by sm (12px). The rhythm emphasizes breathing room around data-heavy components (telemetry cards, data tables) to prevent cognitive overload. Grid columns are used

Elevation & Depth

Depth in Nominal is achieved through **layered borders and subtle shadows rather than dramatic elevation**. The system uses three elevation levels: Level 1 (Base) has no shadow or border, relying on background color contrast. Level 2 (Standard Card) applies a 1px solid border in outline (#ffffff17) and a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to separate cards from the background. Level 3 (Elevated/Modal) uses the same 1px border but with a stronger shadow (0 8px 24px rgba(0, 0, 0, 0.25)) and a slightly lighter background (surface-container-high at #1f1f1f). Interactive elements (buttons,

Shapes

The shape philosophy is **Architectural Sharpness**—all corners are sharp (border-radius: 0px) except for full-width badges and pills, which use border-radius: 9999px. This deliberate choice reinforces the technical, precision-focused brand identity and echoes the geometric language of engineering drawings and technical schematics. Buttons, cards, inputs, and modals all use sharp corners (0px), creating a grid-like, modular appearance that feels intentional and controlled. The only exception is badges and pill-shaped elements (e.g., status indicators, tags), which use full border-radius to sig

Components

Action Elements Buttons are the primary interaction pattern and use a consistent 40px height with 12px vertical and 16px horizontal padding. Primary buttons (button-primary) use the brand green (#357f46) background with white text, a 1px solid border in the same green, and a transition: all 300ms ease-in-out. On hover, the background shifts to primary-container (#2d6a3a) with the border following. Secondary buttons (button-secondary) use a transparent background with white text and a 1px white border; on hover, the background becomes surface-container-high (#1f1f1f) while the border remains white. Ghost buttons (button-ghost) use rgba(255, 255, 255, 0.1) background with a 1px border in rgba(255, 255, 255, 0.17); on hover, both increase opacity to 0.2 and 0.32 respectively. All buttons

Do's and Don'ts

**Do**

• Do use the brand green (#357f46) exclusively for primary CTAs and focus states—it is the only accent color and should appear sparingly but with high visual weight.
• Do maintain sharp corners (border-radius: 0px) on all structural elements (buttons, cards, inputs) to reinforce the Architectural Minimalism aesthetic and technical precision.
• Do apply the outline tokens (rgba(255, 255, 255, 0.17) for borders, rgba(255, 255, 255, 0.32) for hover) consistently across all components to preserve the minimalist, high-contrast aesthetic.
• Do use monospace typography (fraktionMono) for data displays, telemetry, and technical labels to signal engineering-focused content and reinforce brand personality.
• Do respect the spacing scale (sm: 12px, md: 24px, lg: 40px) for all padding, margins, and gaps—never hardcode spacing values outside the defined tokens.

**Don't**

• Don't use rounded corners (border-radius > 0px) on buttons, cards, or inputs—sharp corners are a core brand signature and should be preserved to maintain visual consistency.
• Don't apply the brand green (#357f46) to secondary or tertiary elements—it is reserved exclusively for primary CTAs, focus states, and brand-critical moments.
• Don't use drop shadows or complex elevation effects—rely on borders, background color contrast, and the three-level elevation system (Level 1: no shadow, Level 2: 0 3px 8px rgba(0, 0, 0, 0.15), Level 3: 0 8px 24px rgba(0, 0, 0, 0.25)).
• Don't mix typography families within a single component—use Muoto for headlines, Inter for body, and FraktionMono for technical labels; never combine them in a single text block.