Fanout

Overview

Fanout is a technical learning platform designed for AI systems engineers, researchers, and developers seeking mastery across AI research, system design, ML mathematics, and inference engineering. The brand embodies 'Minimalist Clarity'—a design philosophy that prioritizes information hierarchy and cognitive ease through generous whitespace, a restrained neutral palette anchored by a vibrant primary blue (#2e80d9), and typography that reads as both approachable and authoritative. The interface evokes the precision of technical documentation while maintaining the warmth of a mentorship platform, transforming complex concepts into navigable learning journeys.

The voice is direct, knowledgeable, and unpretentious. Fanout speaks to practitioners who value depth over hype, specificity over generalization. Sentences are active and concrete: 'Master inference optimization through hands-on labs' rather than 'Explore cutting-edge techniques.' The brand personality balances rigor with accessibility—never condescending, always assuming the reader is intelligent but may be new to a specific domain. Example sentence in brand voice: 'Scaling laws aren't magic; here's the math, the code, and why it matters.'

Colors

The color system is built on a neutral foundation with a single, purposeful accent. The surface stack ranges from near-white (#fbfbfb at surface-container-lowest) through warm grays (#f7f7f8 as the primary background) to darker neutrals (#272727 for primary text), creating a calm, readable environment with minimal visual noise. Primary (#2e80d9), a medium-saturation blue, is reserved exclusively for interactive elements—call-to-action buttons, links, focus states, and active navigation items. This restraint ensures the primary color retains its power to draw attention and signal interactivity. Secondary (#1062fe) is a deeper, more saturated blue used sparingly for emphasis or secondary actions. Tertiary (#8f133a), a deep burgundy, appears in badges, status indicators, and accent highlights

Typography

The type system uses Overused Grotesk as the primary typeface, a geometric sans-serif that conveys both technical precision and modern approachability. The hierarchy spans from display (80px, 400 weight, -0.02em tracking) for hero headlines down to label-sm (11px, 400 weight) for metadata and timestamps. Display and headline-lg use a light 400 weight to maximize readability at large sizes and create visual breathing room; body text (14px–18px) remains at 400 weight with 22–28px line-height to ensure comfortable reading for extended content. The system avoids heavy weights (600+) in favor of size and spacing to create hierarchy, maintaining a refined, uncluttered aesthetic. Letter-spacing is negative only at display scales (-0.02em) to tighten large text; body and label scales use 0 or mini

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on the viewport. The design uses a fluid approach on mobile (full-width with 24px gutter) that transitions to fixed-width at tablet and desktop breakpoints. Vertical rhythm is governed by the spacing scale: section separation uses lg spacing (24px), card padding uses md spacing (16px), and internal component spacing uses sm (8px). The hero section occupies the full viewport height with generous top padding (40px+) to accommodate the sticky header, creating a sense of spaciousness that invites exploration. Content sections are separated by 40px (xl spacing) to create distinct visual blocks, while related elements within a section use 24px (lg spacing) for grouping. The design prioritizes whitespace over density—cards a

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts rather than dramatic layering. Level 1 (Base): the main surface at #f7f7f8 with no shadow, establishing the canvas. Level 2 (Standard Cards & Modals): background #ffffff with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift that signals interactivity without visual heaviness. Level 3 (Elevated Modals, Popovers, Hover States): background #ffffff with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), providing clear separation for temporary or overlay content. Cards also use a 1px border in outline

Shapes

The shape philosophy is 'Technical Softness'—combining sharp, architectural precision with subtle human warmth. Buttons and interactive elements use rounded.lg (12px) to signal affordance without appearing playful or overly rounded; this radius is large enough to feel modern but small enough to maintain a professional, engineered appearance. Cards and containers use rounded.xl (16px), slightly larger than buttons, to create visual distinction and suggest containment. Input fields use rounded.md (10px), sitting between buttons and cards to indicate their intermediate role in the hierarchy. Chip

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 44px height with 12px vertical and 24px horizontal padding. Primary buttons (#2e80d9 background, white text) are reserved for the most important action per screen (e.g., 'Start learning free', 'Sign up today'). On hover, the background darkens to #1a5fb8 with a 150ms transition; on active/pressed, it shifts to #0d3a7a. Secondary buttons use surface-container-high (#f0f0f2) background with on-surface text (#272727) and a 1px outline border, allowing multiple secondary actions per screen without visual competition. Ghost buttons (transparent background, primary text) are used for tertiary actions or navigation links; on hover, they gain a primary-container background (#eef8fe) while maintaining the primary

Do's and Don'ts

**Do**

• Do use primary (#2e80d9) exclusively for interactive affordances—buttons, links, focus states, active navigation—to maintain its power to draw attention and signal interactivity.
• Do maintain at least 24px of vertical spacing between major sections and 16px between related content blocks to create visual breathing room and improve scannability.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) to small labels (12px or smaller) when they appear over images or busy backgrounds to ensure legibility without adding a background box.
• Do use the full surface-container stack (lowest, low, DEFAULT, high, highest) to create subtle visual hierarchy through background color shifts rather than relying on borders or shadows alone.
• Do keep button heights at 44px minimum and ensure all interactive elements have a 150ms ease-out transition to provide responsive, predictable feedback.

**Don't**

• Don't apply primary color to body text, large surface areas, or non-interactive elements; reserve it exclusively for CTAs, links, and active states to preserve its signaling power.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 10px, lg: 12px, xl: 16px, full: 999px); this ensures consistency and prevents visual fragmentation.
• Don't exceed 65 characters per line in body text or use line-height below 22px; this compromises readability and creates cognitive friction for extended reading.
• Don't mix multiple shadow elevations on a single screen without clear hierarchy; stick to md elevation for standard cards and lg for elevated/modal content to maintain visual clarity.
• Don't use heavy font weights (600+) for hierarchy; instead, rely on size, color, and spacing to create visual distinction while maintaining the refined, uncluttered aesthetic.