Isidor

Overview

Isidor embodies Technical Minimalism—a design philosophy that strips away ornament to expose the essential architecture of enterprise AI infrastructure. The brand serves research-driven organizations and forward-deployed teams who demand clarity, precision, and visual confidence. The aesthetic is deliberately austere: a near-black canvas (#010101) anchored by a vibrant cobalt accent (#0943a0) that signals agency, trust, and technical sophistication. The UI evokes the feeling of looking into a high-fidelity data visualization—calm, layered, and purposeful.

The voice is direct and unadorned. Isidor speaks in the language of systems: pipelines, vertically-integrated, secure, enterprise-grade. No marketing hyperbole, no soft language. Example: "Seamless capture of complex workflows, then reverse-engineered from the ground up." The tone is confident without arrogance, technical without gatekeeping. Every interaction feels intentional, every color choice deliberate.

Colors

The color system is built on a high-contrast, accent-forward model. Primary (#0943a0) is the signature cobalt used exclusively on CTAs, active states, and critical interactive elements—it commands attention without aggression. The surface stack ranges from pure black (#010101) at the base through carefully calibrated grays (#0f0f0f, #151515, #222222, #353535) that create subtle depth without muddying the interface. Secondary (#bfd8ff) and tertiary (#dfecff) are cool, desaturated blues that provide visual breathing room in dense information layouts, used for supporting text, hints, and secondary containers. On-surface (#ffffff) is pure white for maximum legibility over the dark canvas. Outline (#666666) and outline-variant (#444444) define borders and dividers with precision. The error colo

Typography

The type system pairs Aspekta (a geometric, technical sans-serif) for all body and display text with PP Supply Mono (a monospaced typeface) for labels, tags, and UI chrome. This pairing communicates precision: Aspekta's clean geometry conveys modernity and clarity, while PP Supply Mono grounds the interface in technical authenticity. Display (60px, 700 weight, -0.04em tracking) is reserved for hero statements and major section headings. Headline-lg (40px, 600 weight) anchors subsections. Body-md (16px, 400 weight, 24px line-height) is the workhorse for paragraph text and card content. Labels use PP Supply Mono at 14px (600 weight, 0.05em tracking) to create visual distinction for buttons, badges, and form labels. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm) w

Layout

The layout follows a 12-column grid with a max-width of 1200px, centered on the viewport. The design uses a fluid spacing scale: xs (4px) for micro-interactions, sm (12px) for compact groupings, md (24px) as the primary gutter for sections and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Sections are separated by lg spacing (40px) to create rhythm without excessive whitespace. Cards and containers use md padding (24px) internally. The hero section spans full-width with a gradient overlay (linear-gradient(197deg, rgba(9, 67, 160, 0.00) 13.93%, #0943a0 71.79%)) that bleeds to the edges, creating visual momentum. Container max-width is enforced at 1200px on desktop, with responsive breakpoints at 991px (tablet) and 479px (mobile). The gu

Elevation & Depth

Depth is achieved through a restrained shadow and layering system that respects the technical aesthetic. Level 1 (Base): the surface itself at #010101 with no shadow. Level 2 (Standard Cards/Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: {colors.surface-container} (#151515), border: 1px solid {colors.outline-variant} (#444444). Level 3 (Elevated/Modals): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), background: {colors.surface-container-high} (#222222), border: 1px solid {colors.outline} (#666666). Hover states elevate cards by one level: standard cards gain the Level 3 shado

Shapes

The shape philosophy is Architectural Precision: rounded corners are minimal and functional, never decorative. Buttons and inputs use rounded.DEFAULT (0.5rem / 8px) for a subtle softness that prevents harsh edges without compromising technical character. Cards use rounded.lg (1rem / 16px) to create slightly more breathing room for contained content. Full-width elements like modals or hero sections use rounded.DEFAULT (8px) on top corners only. Badges and pills use rounded.full (9999px) to signal compact, self-contained information. The rationale: sharp 90° corners feel cold and dated; excessiv

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#0943a0) background with {colors.on-primary} (white) text, 12px 24px padding, 44px height, and a 1px border matching the background. On hover, the background shifts to {colors.primary-container} (#0055df) with a 200ms ease-in-out transition. Button-secondary is transparent with a 1px {colors.primary} border and {colors.primary} text; on hover, it gains a rgba(9, 67, 160, 0.1) background. All buttons use PP Supply Mono at 14px (600 weight, 0.05em tracking) for visual distinction from body text. Focus states apply outline: 0.125rem solid {colors.primary} with outline-offset: 0.125rem.

Containers & Surfaces Cards are the primary container component. Standard card: {colors.surface-contai

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0943a0) exclusively for CTAs, active states, and critical interactive elements—it is the brand's signature accent and must never be diluted.
• Do maintain high contrast: ensure all text meets WCAG AA standards (4.5:1 minimum) by pairing {colors.on-surface} (#ffffff) with {colors.surface} (#010101) for body text.
• Do apply consistent spacing using the semantic scale (xs/sm/md/lg/xl) to create visual rhythm—never use arbitrary pixel values.
• Do use PP Supply Mono for all UI chrome (buttons, labels, tags) and Aspekta for body and display text to reinforce the technical aesthetic.
• Do apply 200ms ease-in-out transitions on all interactive state changes (hover, focus, active) to signal responsiveness without feeling sluggish.

**Don't**

• Don't use rounded corners larger than 16px (rounded.lg)—the brand is technical, not playful. Excessive rounding undermines the architectural precision.
• Don't introduce new accent colors. Secondary (#bfd8ff) and tertiary (#dfecff) are supporting colors only; primary (#0943a0) is the sole brand accent.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.2)—the system is flat and technical. Excessive depth creates visual noise.
• Don't use system fonts or generic sans-serifs. Aspekta and PP Supply Mono are non-negotiable for brand consistency.
• Don't place white text on light backgrounds or dark text on dark backgrounds. The high-contrast model (white on #010101, primary on white) is fundamental to legibility and brand identity.