StateM

Overview

StateM is a technical research communication system designed for high-stakes performance benchmarking and agent-system documentation. It serves researchers, engineers, and technical stakeholders who need to communicate complex capability claims with precision and verifiability. The aesthetic is 'Architectural Minimalism'—a deliberate rejection of decorative softness in favor of sharp typographic contrast, rigid grid structures, and monospace accents that evoke technical authority. The UI evokes clarity through constraint: a cream paper background (#f1eee7) paired with near-black ink (#151515), punctuated by a deep crimson accent (#8f0018) reserved exclusively for primary claims and call-to-action elements. Every visual decision reinforces the brand's core promise: this is not marketing—this is evidence.

The voice is precise, measured, and evidence-first. Vocabulary favors technical specificity ('frontier', 'harness', 'runbook', 'verification') over marketing abstractions. Sentences are direct and often short; complex ideas are broken into numbered lists or visual hierarchies rather than buried in prose. The brand personality is rigorous without coldness—there is warmth in the acknowledgment of co-authors, in the careful citation of prior work, and in the transparent disclosure of evaluation conditions. Example sentence in StateM's voice: 'The same GPT-5.5 base model recovers nine accuracy points when execution state and checks move outside the context.'

Colors

StateM's color system is built on a paper-and-ink foundation with surgical accent placement. The primary surface is a warm cream (#f1eee7), chosen to reduce eye strain during extended technical reading while maintaining sufficient contrast for accessibility. The primary text color is near-black (#151515), delivering 16:1 contrast ratio against the cream surface and ensuring legibility at all sizes, including small monospace labels at 11px.

The primary accent color is a deep crimson (#8f0018), used exclusively on the most important interactive elements: the main call-to-action button ('Explore the two frontiers'), the quality-frontier score card background, the pulse indicator in the eyebrow, and emphasis text (em tags in headlines). This color appears infrequently—roughly 3–5% of the page

Typography

StateM's type system is built on a single sans-serif family (Inter) paired with a monospace system font (SFMono-Regular / Consolas) for technical elements. The hierarchy is steep and intentional: the display size (140px, 700 weight, -0.075em letter-spacing) is reserved for the hero headline and creates immediate visual impact; headline-lg (84px, 800 weight, -0.06em) is used for section titles and major claims; body-lg (30px, 400 weight, -0.025em) carries the hero deck and key narrative passages. This progression ensures that scanning the page reveals the argument structure before reading prose.

Monospace typography (SFMono, 13px, 750 weight, 0.12em letter-spacing) is used for all interactive labels (button text, navigation links, metadata tags) and code samples. The high letter-spacing (0

Layout

StateM uses a fixed-width container model (max-width: 1180px, centered with calc(100% - 48px) responsive padding) that prioritizes readability over full-bleed drama. The grid is 12 columns, but layouts typically use 2–3 column splits (e.g., 1.5fr 0.8fr for split-heading sections) to create visual rhythm and prevent line-length bloat. Section padding is 120px top/bottom on desktop, reduced to 80px on tablet, creating generous breathing room between major ideas. The gutter between grid columns is 9vw (viewport-width-relative), which scales responsively and prevents cramped layouts on smaller screens.

Whitespace is semantic: 24px (md spacing) separates inline elements; 40px (lg spacing) separates subsections within a section; 120px separates major sections. The hero section uses 92px top pad

Elevation & Depth

StateM rejects soft shadows and glassmorphism in favor of a flat, paper-based visual hierarchy. Depth is conveyed through borders, color contrast, and spatial arrangement rather than blur or shadow effects. The base elevation is the cream surface (#f1eee7) with no shadow. Level 1 (cards, panels) uses a 1px solid border in the outline color (#c8c2b6) and a subtle background shift (surface-container-low: #f5f3f0 or surface-bright: #fffdf7). Level 2 (modals, elevated cards) uses the same 1px border plus a box-shadow of 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift without drama. Level 3 (

Shapes

StateM employs 'Architectural Sharpness'—a design philosophy that rejects rounded corners entirely in favor of 90-degree angles and precise geometric forms. All buttons, cards, inputs, and containers use 0px border-radius (sharp corners). This choice reinforces the brand's technical authority and creates visual consistency with code blocks, terminal windows, and monospace typography. The only exception is the pulse indicator in the eyebrow, which uses 50% border-radius (8px circle) to signal activity and draw attention to the status badge.

Borders are consistently 1px solid in the outline col

Components

Action Elements Buttons are the primary interactive affordance and use a monospace label (SFMono, 13px, 750 weight, 0.12em letter-spacing) with 14px vertical and 18px horizontal padding. The primary button has a background of {colors.primary} (#8f0018) with {colors.on-primary} text (#fffdf7), a 1px border in {colors.on-surface} (#151515), and 0px border-radius. On hover, the button applies transform: translateY(-2px) with a 200ms ease-out transition, creating a tactile lift. The secondary button is transparent with {colors.on-surface} text and a 1px border in {colors.on-surface}; on hover, it applies the same transform. Both button variants have a height of 48px and use display: inline-flex with gap: 24px to accommodate icon or arrow elements.

Containers & Surfaces Cards use a 1px

Do's and Don'ts

**Do**

• Do use the primary color (#8f0018) exclusively for the most important interactive elements and primary claims—reserve it for CTAs, key metrics, and emphasis text.
• Do maintain 1px sharp borders (0px border-radius) on all cards, buttons, and containers to reinforce the technical, architectural aesthetic.
• Do apply monospace typography (SFMono, 13px, 750 weight, 0.12em letter-spacing) to all interactive labels, metadata, and code samples for visual consistency.
• Do use the spacing scale (md: 24px for cards, lg: 40px for sections, xl: 64px for major breaks) to create semantic rhythm and prevent arbitrary whitespace.
• Do apply the hover transform (translateY(-2px) with 200ms ease-out) to all interactive elements to provide tactile feedback without shadow effects.

**Don't**

• Don't use rounded corners (border-radius > 0) on primary containers, buttons, or cards—the sharp-corner aesthetic is core to the brand identity.
• Don't apply the primary color (#8f0018) to secondary elements, backgrounds, or decorative accents—it must remain reserved for primary claims and CTAs.
• Don't use soft shadows (box-shadow with large blur values) or glassmorphism effects—StateM uses flat, paper-based hierarchy with 1px borders and color contrast.
• Don't mix typeface families within a section—use Inter for body/headlines and SFMono for technical/interactive elements; never use system-ui or generic sans-serif fallbacks.
• Don't exceed 1180px container width or use full-bleed layouts—the fixed-width model prioritizes readability and prevents line-length bloat on large screens.