Hello Interview Design System

Overview

Hello Interview presents itself as a modern educational platform with a distinctly warm, approachable personality. The visual system is built on a crisp white canvas ({colors.canvas}) that allows content to breathe, while a vibrant teal-green ({colors.accent} — #299a8d) provides brand voltage across the top announcement banner, primary call-to-action buttons, active navigation states, and interactive link elements. This teal is not merely decorative; it functions as the system's primary signifier of actionability and current location within the information architecture.

The typographic voice is grounded in Open Sans, a humanist sans-serif that conveys both professionalism and accessibility—a fitting choice for an interview preparation platform serving anxious job seekers. Headlines command attention through size and semibold weight (600) rather than extreme contrast, creating a confident but never aggressive hierarchy. Body text sits at a generous 14px with an exceptionally readable 1.75 line-height, ensuring long-form educational content remains comfortable during extended study sessions.

The shape language reveals a platform that has embraced contemporary UI conventions: {rounded.pill} buttons and search inputs signal approachability and modernity, while {rounded.lg} (12px) corners on cards and the hero illustration container soften the learning environment. The three-column layout—fixed left navigation (256px), fluid center content (max ~800px), and a right rail for contextual tools—creates a dedicated "study mode" interface that separates navigation concerns from reading flow.

A distinctive subsystem emerges in the illustration language: the hero banner uses a warm {colors.signature-orange} (#e6773c) background with playful white line-art overlays depicting system design concepts (servers, arrows, "Multi Instance Server" labels). This creates a visual dialect specific to course landing moments, separating them from the utilitarian content pages below. The right-rail promo card employs a soft mint background ({colors.surface-mint} — #f1f7f6) that echoes the brand teal at reduced opacity, creating visual harmony without competing with primary content.

The overall mood is one of structured calm—an organized, supportive environment for high-stakes preparation. The limited color palette (teal, white, near-black, one signature orange) prevents visual overload during intensive study sessions, while the consistent use of teal for all interactive elements creates a predictable, learnable interface.

Key Characteristics:

• Brand teal ({colors.accent}) anchors all actionable elements: CTAs, active nav, links, and the top promotional banner
• Open Sans typeface across all weights (400–600) with {typography.display-lg} at 39.809px for article H1s
• Three-column app layout: 256px fixed sidebar, ~800px content column, and contextual right rail
• Pill-shaped ({rounded.pill}) primary buttons and search inputs for a friendly, modern feel
• Soft mint surfaces ({colors.surface-mint}) for secondary cards and highlighted regions
• Signature orange ({colors.signature-orange}) reserved for illustration/hero moments only
• Exceptionally generous body line-height (1.75) for long-form readability
• Near-flat elevation model with minimal shadows, relying on background-color differentiation instead

Colors

Brand & Accent

• Primary ({colors.primary} — #161c24): Deep near-black used for the most prominent headings (H1, H2) and highest-contrast text elements. Appears in {component.article-heading-h1} and {component.article-heading-h2}.
• Primary Active ({colors.primary-active} — #0d1117): Darker variant for pressed/active states on dark-themed elements.
• Accent ({colors.accent} — #299a8d): The signature teal-green brand color. Powers the top announcement banner ({component.top-banner}), primary CTA buttons ({component.button-primary}), active sidebar items ({component.sidebar-item-active}), and all links ({component.toc-link}). This is the single most important color in the system.
• Accent Dark ({colors.accent-dark} — #195045): Deeper teal for hover and active states on accent-colored elements, ensuring sufficient contrast feedback.
• Accent Hover ({colors.accent-hover} — #227d70): Mid-tone teal for intermediate hover states.
• Signature Orange ({colors.signature-orange} — #e6773c): Warm orange-peach reserved exclusively for the hero illustration card ({component.hero-illustration-card}). Never used for UI controls or text—this is a pure illustrative accent.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white background for the main content area, sidebar, and most components. The default surface.
• Surface Soft ({colors.surface-soft} — #299a8d): Full-opacity teal used for the top banner background. Same value as {colors.accent}, repurposed as a surface.
• Surface Mint ({colors.surface-mint} — #f1f7f6): Very light mint-green tint used for the right-rail promo card ({component.promo-card}). Provides subtle differentiation without competing with content.
• Surface Accent Soft ({colors.surface-accent-soft} — rgba(41, 154, 141, 0.15)): 15% opacity teal used for active/hover backgrounds on sidebar items ({component.sidebar-item-active}) and soft button fills.
• Surface Purple ({colors.surface-purple} — #746b8f): Muted purple detected in the stylesheet, likely for badge or tag surfaces not visible in the current viewport.
• Surface Pink ({colors.surface-pink} — #f738c1): Bright pink detected, likely for achievement badges or gamification elements outside the current view.

Text

• Ink ({colors.ink} — #454f5b): The primary body text color—a softened dark blue-gray that's less harsh than pure black. Used in {component.article-body}, {component.sidebar-item}, and most descriptive text.
• Body ({colors.body} — #000000): Pure black, used selectively for maximum contrast in body paragraphs and certain UI labels.
• Heading ({colors.heading} — #161c24): Deep near-black for all headline levels (H1–H4). Creates strong hierarchy against the white canvas.
• Muted ({colors.muted} — #637381): Medium gray for secondary text: labels, captions, timestamps, placeholder text. Used in {component.progress-card} and {component.sidebar-section-title}.
• Muted Soft ({colors.muted-soft} — rgba(145, 158, 171, 0.48)): Low-opacity gray for disabled or locked content, such as {component.locked-item} sidebar entries.
• On Primary ({colors.on-primary} — #ffffff): White text for readability on dark backgrounds.
• On Accent ({colors.on-accent} — #ffffff): White text on teal/accent backgrounds ({component.button-primary}, {component.top-banner}).
• On Dark ({colors.on-dark} — #ffffff): White text on dark surfaces like the orange hero illustration.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(145, 158, 171, 0.24)): Subtle 24% opacity gray for dividers and light borders. The workhorse border color.
• Hairline Strong ({colors.hairline-strong} — rgba(145, 158, 171, 0.48)): More visible 48% opacity variant for input borders and focused states.
• Border Input ({colors.border-input} — rgba(145, 158, 171, 0.48)): Input field border color, identical to hairline-strong.

Semantic

• Link ({colors.link} — #299a8d): Teal-colored links matching the brand accent. Used in table of contents ({component.toc-link}).
• Link Active ({colors.link-active} — #195045): Darker teal for visited or active links.
• Error ({colors.error} — #dc2626): Standard red for validation errors (not visible in current viewport, included for system completeness).
• Success ({colors.success} — #16a34a): Green for success states.
• Warning ({colors.warning} — #e6773c): Orange for warning states, sharing the signature illustration color.
• Info ({colors.info} — #299a8d): Teal for informational messages.

Typography

Font Family

The system is built entirely on Open Sans, served via a custom primaryFont @font-face declaration that loads WOFF2 files with Latin and Latin-Ext character support. The font stack includes "primaryFont Fallback" (a local Arial with metric overrides for instant loading), followed by Helvetica, Arial, sans-serif. A single monospace fallback exists for any code-related content.

Open Sans was chosen for its excellent readability at small sizes, its humanist character (open apertures, tall x-height), and its availability across weights 300–800 from a single variable-style font file. For an educational platform targeting stressed interview candidates, the typeface's warmth and clarity are strategic assets.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 48px | 600 | 1.2 | normal | Hero-level display (not in current viewport) | | {typography.display-lg} | 39.809px | 600 | 1.2 | normal | Article H1 ("Introduction") | | {typography.title-xl} | 33.18px | 600 | 1.3 | normal | Article H2 | | {typography.title-lg} | 27.65px | 500 | 1.4 | normal | Article H3 | | {typography.title-md} | 23.04px | 500 | 1.4 | normal | Article H4 | | {typography.body-md} | 14px | 400 | 1.75 | normal | Article body text, descriptions | | {typography.body-sm} | 13px | 400 | 1.5 | normal | Sidebar items, card body, captions | | {typography.caption} | 12px | 400 | 1.4 | normal | Labels, timestamps, metadata | | {typography.button} | 14px | 500 | 1.25 | normal | Button labels | | {typography.label-md} | 13.3333px | 400 | 1.4 | normal | Small UI labels ("Back to Main") | | {typography.nav-item} | 14px | 500 | 1.4 | normal | Navigation section titles | | {typography.mono} | 13px | 400 | 1.5 | normal | Code snippets, technical terms |

Principles

The typography system trusts size and weight to carry hierarchy, reserving color changes almost exclusively for interactive states. Headlines use semibold (600) weight at large sizes (33–40px), while body text remains regular (400) at 14px—the difference is immediately scannable without relying on color contrast. The 1.75 line-height on body text is notably generous (the web default is 1.2–1.5); this is a deliberate choice for long-form educational content where readers may spend 30+ minutes on a single page.

Weight progression is conservative: the system only uses 400 (regular), 500 (medium), and 600 (semibold). There is no bold (700) usage, keeping the visual voice measured and professional. Letter-spacing remains normal throughout—no tracking adjustments—which preserves Open Sans' optimized metrics.

The display type (H1 at 39.809px) is precise rather than round, suggesting a design tool (likely Figma) export with pixel-perfect values preserved. This specificity should be maintained in implementation.

Note on Font Substitutes

The proprietary primaryFont maps to Open Sans. For Google Fonts substitution, use:

--font-sans: 'Open Sans', 'primaryFont Fallback', Helvetica, Arial, sans-serif;

If Open Sans is unavailable, Noto Sans (Google Fonts) is the closest match with nearly identical metrics, humanist proportions, and weight range. Inter is an acceptable alternative with a slightly more geometric character but superior screen rendering. Always include the primaryFont Fallback local reference first for users with cached fonts.

Layout

Spacing System

• Base unit: 2px (the smallest increment in the spacing scale).

• Tokens:

  • {spacing.xxs} (2px) — micro-adjustments, tight icon spacing
  • {spacing.xs} (4px) — inline icon gaps, compact padding
  • {spacing.sm} (5px) — small internal gaps (appears frequently in this system)
  • {spacing.md} (6px) — common gap between related elements
  • {spacing.base} (8px) — standard internal padding, list item spacing
  • {spacing.lg} (10px) — button padding vertical, form element padding
  • {spacing.xl} (12px) — sidebar item horizontal padding, card internal padding
  • {spacing.2xl} (16px) — article container padding, larger gaps
  • {spacing.3xl} (20px) — section separators
  • {spacing.4xl} (24px) — major section breaks
  • {spacing.5xl} (32px) — large whitespace blocks
  • {spacing.section} (40px) — vertical rhythm between major content blocks

• Section padding (vertical): {spacing.section} (40px) — used between the hero illustration and article content, and between major article sections.

• Card internal padding: {spacing.xl} (12px) to {spacing.xl}+ (16px+) depending on card density. The promo card uses {spacing.xl}.

• Gutters: The sidebar uses {spacing.xl} (12px) horizontal padding on items. The article container has {spacing.2xl} (16px) internal padding. The right rail cards have {spacing.xl} padding.

Grid & Container

The layout is a three-column application grid:

• Left sidebar: Fixed 256px width ({component.sidebar-nav}). Contains navigation hierarchy, back button, and footer utilities. Does not scroll independently in the current viewport (it appears to be part of the page flow).
• Center content: Fluid width, effectively max ~800px for readability. Contains the hero illustration card and article content. This is the primary reading column.
• Right rail: Fluid width (~280–320px estimated), contains the promotional card, reading progress indicator, and table of contents. This rail provides contextual tools without distracting from the main content.

The overall page max-width is 1440px (detected from container styles), suggesting the design targets large desktop screens commonly used by developers studying for interviews.

Whitespace Philosophy

The system embraces generous whitespace as a readability aid. The 1.75 line-height on body text, combined with 8–16px paragraph spacing and 40px section breaks, creates an "editorial-airy" density appropriate for long-form educational content. This is not a dashboard crammed with data—it's a reading environment designed for focus and comprehension. The sidebar maintains tighter density (navigation should be scannable), while the content column breathes.

Header Architecture

┌──────────────────────────────────────────────────────────────────────────────┐
│ [🔔] Up to 25% off Premium for a limited time                    [✕] close   │ ← top-banner (accent bg, 40px h)
├────────┬─────────────────────────────────────────────────────────┬────────────┤
│ [🎓]   │  [🔍] Search                              Pricing  [Tutor] [Get    │ ← top-nav (64px h)
│ hello  │                                              Premium]  [☀️]       │
│interview│                                                    │            │
├────────┼─────────────────────────────────────────────────────────┼────────────┤
│ < Back │                                                         │  🎓        │
│ to Main│  ┌─────────────────────────────────────────────────┐   │  Want a    │
│        │  │  ┌──────────────────────────────────────┐      │   │  structured│
│ LEARN  │  │  │  System Design         Multi         │      │   │  way to    │
│ SYSTEM │  │  │     ⚡ in a hurry      Instance      │      │   │  prepare?  │
│ DESIGN │  │  │                       Server        │      │   │            │
│        │  └──────────────────────────────────────────┘      │   │  [View     │
│ > Sys  │                                                         │   Course]  │
│  Design│  System Design in a Hurry                               │            │
│  Course│  Introduction                                           │  Reading   │
│        │  Learn system design fast...                            │  Progress   │
│ ○ In a │                                                         │  ━━━━━━    │
│  Hurry │  After conducting literally thousands...                │            │
│   ├ ○   │                                                         │  ON THIS   │
│   Intro│  1. If you don't have a lot of time...                  │  PAGE      │
│   ├ ○   │  2. As you learn new things...                         │  • What... │
│   How  │                                                         │  • Types.. │
│   ├ ... │                                                         │  • How to  │
│   ...  │                                                         │  • Conclu.. │
│        │                                                         │            │
│ ○ Core │                                                         │            │
│  Conc. │                                                         │            │
│        │                                                         │            │
├────────┴─────────────────────────────────────────────────────────┴────────────┤
│ [📱] Get the app                                                     │
│ [👤] Sign in / Sign up                                                │
│ [social icons...]                                          │          │
└──────────────────────────────────────────────────────────────────────────────┘
 ↑                                                                         ↑
 256px fixed                                                          ~300px fluid

Hero Section

The hero consists of a single illustration card ({component.hero-illustration-card}) placed at the top of the content column:

┌────────────────────────────────────────────────────────────┐
│  ┌──────────────────────────────────────────────────────┐  │
│  │  ╔════════════════════════════════════════════════╗  │  │
│  │ ║  (orange background with white line art)        ║  │  │
│  │ ║                                                 ║  │  │
│  │ ║     ┌────────────────────────┐  ┌─────────┐    ║  │  │
│  │ ║     │  System Design        │  │  Multi  │    ║  │  │
│  │ ║     │    ⚡ in a hurry      │  │Instance │    ║  │  │
│  │ ║     └────────────────────────┘  │ Server  │    ║  │  │
│  │ ║                                └─────────┘    ║  │  │
│  │ ╚════════════════════════════════════════════════╝  │  │
│  └──────────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────────┘
  Background: {colors.signature-orange}
  Rounded: {rounded.lg} (12px)
  Padding: {spacing.xl}
  Contains: White centered text + decorative line-art overlay

Sidebar Navigation Structure

The left sidebar implements a collapsible tree navigation:

┌──────────────────┐
│ [🎓] hellointerview  │ ← Logo/brand (sidebar-header)
│                    │
│ < Back to Main    │ ← sidebar-back-button
│                    │
│ LEARN SYSTEM      │ ← sidebar-section-title (muted, uppercase-ish)
│ DESIGN            │
│ > System Design   │ ← sidebar-item (expandable, chevron right)
│   Course          │
│                    │
│ ○ In a Hurry      │ ← sidebar-item-active (teal bg, teal text)
│   ○ Introduction  │ ← sidebar-item-active (indented, teal bg)
│   ○ How to Prepare│ ← sidebar-item
│   ○ Delivery FW   │ ← sidebar-item
│   ○ Core Concepts │ ← sidebar-item
│   ○ Key Tech      │ ← sidebar-item
│   ○ Common Patterns│ ← sidebar-item
│   ○ Question Breaks│ ← sidebar-item
│                    │
│ ▽ Core Concepts   │ ← sidebar-section-title (expanded)
│   ○ Networking    │ ← sidebar-item
│   ○ API Design    │ ← sidebar-item (+ lock icon if premium)
│   ○ Data Modeling │ ← sidebar-item
│   ○ Caching       │ ← sidebar-item
│   ○ Sharing       │ ← sidebar-item
│   ○ Consistent Hash│ ← sidebar-item
│   ○ CAP Theorem   │ ← sidebar-item
│   ○ DB Indexing   │ ← sidebar-item (locked)
│   ○ Numbers...    │ ← sidebar-item (locked)
│                    │
│ [📱] Get the app  │ ← footer-app-promo
│ [👤] Sign in/up   │ ← footer-auth
│ [social row]      │ ← footer-social
└──────────────────┘

Active items receive {colors.surface-accent-soft} background (15% teal) with {colors.accent} text. Locked items show {colors.muted-soft} text with a lock icon.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} background | Base canvas, article container, sidebar | | 1 (Hairline) | 1px {colors.hairline} border | Input fields, dividers between sections | | 2 (Soft fill) | {colors.surface-mint} or {colors.surface-accent-soft} background | Promo card, active nav items, soft buttons | | 3 (Illustration) | {colors.signature-orange} solid background | Hero illustration card | | 4 (Overlay) | Detected but minimal; {extensions.shadows.none} in current view | Modals, dropdowns (inferred) |

The elevation philosophy is color-block dominant, shadow-minimal. Rather than using drop shadows to lift cards off the canvas, the system relies on background color differentiation: white for base, mint for secondary cards, teal-tinted for active states, and orange for signature moments. The detected shadow value is effectively zero (rgba(0,0,0,0)), confirming this is a flat-design system with no reliance on depth cues.

This approach keeps the visual noise low—a critical consideration for a reading-intensive application where shadows around every card would create visual competition with body text.

Decorative Depth

The hero illustration card ({component.hero-illustration-card}) introduces decorative depth through its solid {colors.signature-orange} background overlaid with white hand-drawn-style line art depicting system design diagrams (boxes labeled "Multi Instance Server", directional arrows, abstract architectural symbols). This creates a "sketchbook" aesthetic that signals creativity and approachability—counterbalancing the technical subject matter. The orange block floats visually above the white canvas purely through its saturated color, not through any shadow effect.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 2px | Subtle rounding on small elements, tags | | {rounded.DEFAULT} | 6px | Default radius for cards, buttons (secondary), inputs | | {rounded.md} | 8px | Slightly softer cards, dropdown panels | | {rounded.lg} | 12px | Hero illustration card, promo cards, prominent containers | | {rounded.xl} | 16px | Large featured cards (potential, not in current viewport) | | {rounded.pill} | 9999px | Primary buttons, search input, ghost icon buttons | | {rounded.full} | 9999px | Avatar circles, status indicators | | {rounded.asymmetrical} | 0px 8px 8px 0px | Specialized asymmetric rounding (detected, rare) |

The shape vocabulary is intentionally constrained: two pixels for subtlety, six for defaults, twelve for prominence, and infinity for friendliness. The pill radius on {component.button-primary} and {component.search-input} is a deliberate warmth signal—these are the user's primary interaction points, and the infinite rounding says "this is safe to click." The {rounded.lg} on the hero card gives it presence without the severity of sharp corners.

Photography Geometry

No photography is present in the current viewport. The system uses illustration-only imagery (the hero sketch), rendered within {rounded.lg} containers with solid color backgrounds. If photography were added (e.g., instructor headshots, company logos), the established pattern suggests it would use {rounded.lg} or {rounded.full} (for avatars) with no special treatment beyond the standard radius scale.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The primary call-to-action button, seen as "Get Premium" in the top-right header. Background {colors.accent} (teal), white text {colors.on-accent}, using {typography.button} (14px/500). Fully pill-shaped ({rounded.pill}) with {spacing.lg} (10px) vertical and 20px horizontal padding, totaling 40px height. On press, transitions to {component.button-primary-active} which uses {colors.accent-dark} for clear tactile feedback.

{component.button-primary-active} — Pressed state of the primary button. Darkens to {colors.accent-dark} (#195045) while maintaining all other properties. This 200ms color transition (per detected motion tokens) provides immediate visual confirmation of input.

{component.button-secondary} — Outlined or ghost-style secondary button, seen as "Tutor" in the header. Transparent background with {colors.accent} text, pill-shaped, same dimensions as primary. Functions as a lower-emphasis alternative to the primary CTA. Active state ({component.button-secondary-active}) adds a subtle {colors.surface-accent-soft} background fill.

{component.button-ghost} — Transparent icon-only button used for utility actions (close banner icon, settings sun icon). Zero background, white or inherit text color, 32px × 32px size with 4px padding, fully rounded. Minimal visual weight for non-destructive actions.

{component.button-ghost-sm} — Smaller variant of the ghost button (28px × 28px, 2px padding) for tightly-spaced icon arrays.

{component.button-soft} — Tertiary button style with a filled-but-muted background. Uses {colors.surface-mint} background with {colors.accent-dark} text, {rounded.DEFAULT} (6px) corners. Seen as "View Course" in the promo card. Bridges the visual weight between ghost and primary.

Cards & Containers

{component.promo-card} — The right-rail promotional card ("Want a structured way to prepare?"). Light mint background ({colors.surface-mint}), {rounded.lg} corners, {spacing.xl} internal padding. Contains a heading ({component.promo-card-heading}) in {typography.title-md} weight, body copy ({component.promo-card-body}) in smaller text, and a {component.button-soft} CTA. This card uses background color alone to differentiate from the white canvas—no border, no shadow.

{component.hero-illustration-card} — The orange hero banner at the top of the content column. Solid {colors.signature-orange} background, white text, {rounded.lg} corners, generous {spacing.xl} padding. Contains centered display text ("System Design ⚡ in a hurry" in {typography.display-lg}) overlaid with decorative white line-art illustrations. This is the most visually distinctive component in the system—the only place the signature orange appears.

{component.article-container} — The main content wrapper. White background, max ~800px width, {spacing.xl} (16px) padding. Houses the article heading hierarchy, body paragraphs, and lists. Its job is invisible: provide consistent margins and prevent text from stretching too wide for comfortable reading.

{component.progress-card} — The "Reading Progress" section in the right rail. Transparent background, {colors.muted} text in {typography.caption} size. Likely contains a progress bar (not fully extractable from static CSS).

Inputs & Forms

{component.search-input} — The global search field in the top navigation. White background, {colors.ink} placeholder/text, {colors.hairline-strong} border (on focus), fully pill-shaped ({rounded.pill}), 40px height with 8px vertical and 16px horizontal padding. Includes a search icon prefix and an "⌘K" keyboard shortcut indicator suffix. Focus state ({component.search-input-focus}) likely increases border opacity or adds a subtle ring (implement per stack conventions).

Navigation

{component.top-banner} — The dismissible announcement strip at the very top. Full-width {colors.accent} background, white text in {typography.body-sm}, 40px height. Contains promotional copy ("Up to 25% off Premium...") and a close button ({component.button-ghost}). This is the highest-elevation brand element on the page.

{component.top-nav} — The main header bar below the banner. White background, 64px height, contains the hellointerview logo (left), search input (center-left), and utility links/buttons (right: "Pricing", "Tutor" button, "Get Premium" button, theme toggle icon). Uses flexbox with space-between distribution.

{component.sidebar-nav} — The 256px left navigation panel. White background, contains hierarchical course navigation with collapsible sections, active state highlighting, and locked-item indicators. Items use {typography.body-sm} (or {typography.label-md} for "Back to Main").

{component.sidebar-header} — The branded logo area at the top of the sidebar. Contains the hellointerview wordmark with graduation cap icon. {typography.nav-item} weight, {colors.heading} color.

{component.sidebar-section-title} — Section headers like "LEARN SYSTEM DESIGN" and "Core Concepts". Muted text color ({colors.muted}), smaller font ({typography.label-md}), uppercase presentation with generous top padding.

{component.sidebar-item} — Individual navigation links (e.g., "How to Prepare", "Delivery Framework"). Transparent background, {colors.ink} text, {typography.body-sm}, {spacing.base} vertical and {spacing.xl} horizontal padding. Hover state (not documented) likely shows {colors.surface-accent-soft} background.

{component.sidebar-item-active} — The currently-selected page ("Introduction" under "In a Hurry"). Receives {colors.surface-accent-soft} background (15% teal), {colors.accent} text color, and {rounded.DEFAULT} (6px) corner rounding. This combination makes the current location immediately obvious without being garish.

{component.sidebar-item-hover} — Hover state for non-active sidebar items. Shows a subtle gray-teal tint (rgba(74, 124, 143, 0.15)) background. Distinguishable from active state by using a different hue.

{component.sidebar-back-button} — The "< Back to Main" link at the top of the sidebar content area. Smaller text ({typography.label-md}), {colors.ink} color, 40px height, left-aligned with chevron icon.

{component.locked-item} — Navigation items behind the paywall (e.g., "Database Indexing", "Numbers to Know"). {colors.muted-soft} (48% opacity gray) text indicating disabled state, accompanied by a lock icon. These items communicate "content exists here but requires upgrade" without breaking the navigation structure.

{component.toc-link} — Table of contents links in the right rail ("What are system design interviews", "Types of System Design Interviews", etc.). Teal color ({colors.link}), {typography.body-sm} size, minimal padding. Active TOC link ({component.toc-link-active}) uses darker {colors.accent-dark}.

Content Typography Components

{component.article-heading-h1} — The main article title ("Introduction"). {typography.display-lg} (39.809px/600), {colors.heading} color, generous bottom padding. This is the most dominant text element on the page after the hero illustration.

{component.article-heading-h2} — Section headings within the article. {typography.title-xl} (33.18px/600), {colors.heading} color. Used for major topic divisions.

{component.article-heading-h3} — Subsection headings. {typography.title-lg} (27.65px/500), slightly lighter weight than H2.

{component.article-heading-h4} — Minor headings. {typography.title-md} (23.04px/500).

{component.article-body} — Paragraph text. {typography.body-md} (14px/400/1.75), {colors.ink} color. The workhorse of the reading experience—optimized for long-form comprehension with generous line-height and comfortable measure width.

{component.article-list} — Ordered and unordered list items. Same typography as body text but with left indentation (approximately {spacing.xl} plus bullet/number offset). Numbered lists (as seen in "This is helpful for two reasons:") use standard decimal numbering.

Footer Components

{component.footer-app-promo} — "Get the app" sidebar footer item. 48px height, contains mobile icon and label. Part of the persistent sidebar footer.

{component.footer-auth} — "Sign in / Sign up" sidebar footer item. Same dimensions as app promo. Provides authentication entry point.

{component.footer-social} — Social media icon row (YouTube, LinkedIn, Twitter/X, Medium, Discord, GitHub, App Store). Muted icon colors ({colors.muted}), compact layout.

Do's and Don'ts

Do

• Do use {colors.accent} (#299a8d) for all primary interactive elements—buttons, links, active states—to maintain brand consistency across the interface.
• Do apply {rounded.pill} (9999px) to primary buttons and the search input; this rounded, friendly shape is a core brand signifier.
• Do set body text line-height to 1.75 (via {typography.body-md}) for all article content; this generous spacing is critical for long-form readability.
• Do reserve {colors.signature-orange} (#e6773c) exclusively for the hero illustration card and warning states; never use it for UI chrome or body text.
• Do use {colors.surface-mint} (#f1f7f6) for secondary/promotional cards like {component.promo-card}; it provides visual separation without the weight of a border or shadow.
• Do implement active sidebar items with {colors.surface-accent-soft} background (15% teal opacity) combined with {colors.accent} text and {rounded.DEFAULT} (6px) corners—this trio creates clear location feedback.
• Do keep heading weights at 500 (medium) for H3/H4 and 600 (semibold) for H1/H2; avoid jumping to 700 (bold) as it's not part of the type scale.
• Do maintain the 256px fixed sidebar width and ~800px max content width for optimal reading comfort on large screens.
• Do use {typography.body-sm} (13px) for sidebar navigation items and card supporting text; reserve 14px ({typography.body-md}) for the main article column.
• Do apply the detected 200ms cubic-bezier(0.4, 0, 0.2, 1) transition timing to all color, background, and border changes for consistent motion feel.

Don't

• Don't substitute {colors.primary} (#161c24, near-black) for {colors.accent} (#299a8d, teal) on interactive elements; primary is for headlines only, accent is for actions.
• Don't add drop shadows to cards or elevate surfaces with depth layers; this system uses background-color differentiation exclusively (white → mint → teal-tint → orange).
• Don't use {colors.body} (pure black #000000) for more than 30% of text volume; prefer {colors.ink} (#454f5b) for extended reading to reduce eye strain.
• Don't expand the border radius vocabulary beyond the defined tokens ({rounded.sm} through {rounded.pill}); the asymmetrical radius ({rounded.asymmetrical}) is a rare exception for specialized cases.
• Don't place the signature orange ({colors.signature-orange}) on any surface other than the hero illustration card; doing so would dilute its impact as a "moment of delight" accent.
• Don't reduce body line-height below 1.5 even for space-constrained views; the 1.75 value in {typography.body-md} is intentional for educational content.
• Don't mix font families—everything uses Open Sans (primaryFont) except {typography.mono} for code; introducing a second typeface would break the cohesive voice.
• Don't implement hover states as background-color changes on the article body text; hover is for interactive elements only (buttons, links, nav items).
• Don't lock the sidebar to position: sticky on shorter pages; let it flow naturally with the document unless the content column exceeds the viewport height significantly.
• Don't use {colors.muted-soft} (48% opacity gray) for anything other than disabled/locked states; it reads as explicitly "unavailable" to users.

Motion & Animation

Transition Tokens

/* Core interactive transition — used on buttons, links, nav items */
--transition-interactive: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                          background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                          border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                          text-decoration-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                          fill 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                          stroke 0.2s cubic-bezier(0.4, 0, 0.2, 1);

/* Faster transition for subtle feedback */
--transition-subtle: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                     background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                     border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);

/* Opacity/overlay transition */
--transition-overlay: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                       background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);

/* Spatial/transform transition */
--transform-transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

/* Layout transition for accordions/collapsibles */
--layout-transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                      opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);

/* Slide-down animation for dropdowns/menus */
--slide-transition: top 0.3s ease-in-out;

/* Width transition for expandable elements */
--width-transition: width 0.2s ease-in-out;

Keyframe Animations

The following keyframes were detected in the stylesheet, though many may be library-provided (e.g., Tailwind UI, Radix):

• circular-dash — SVG circular progress indicator animation (likely for loading spinners)
• spin — Continuous rotation for loading indicators
• comment-highlight — Temporary background flash on new comments or notifications
• fadeSlideIn — Entrance animation combining opacity fade with vertical slide
• animatein — Generic fade-in entrance for modals/toasts
• linear-indeterminate1 / linear-indeterminate2 — Linear progress bar indeterminate animation
• otp-shimmer — Shimmer effect for OTP/input verification fields
• pulse — Subtle scale pulse for attention-drawing elements
• run-pulse / run-pulse-40 — Variant pulse animations for specific contexts
• skeleton-pulse / skeleton-wave / shimmer — Loading skeleton placeholder animations
• enter / exit — Mount/unmount transitions for animated components
• pulse-ring — Expanding ring animation (likely for live indicators)
• accordion-up / collapsible-up / accordion-down — Height-based accordion open/close animations

Interaction Patterns

• Button press feedback: All interactive buttons transition background-color over 200ms using cubic-bezier(0.4, 0, 0.2, 1) easing. Primary buttons darken from {colors.accent} to {colors.accent-dark}.
• Sidebar item highlight: Navigation items show a soft background tint (teal at 15% opacity or gray at 15%) on hover, with smooth color interpolation.
• Accordion expansion: Collapsible sections (sidebar categories, FAQ items) animate their grid-template-rows and opacity over 200ms for a smooth reveal.
• Focus rings: Interactive elements likely show a focus-visible outline (ring) on keyboard navigation; implement per accessibility standards (2px offset, {colors.accent} color recommended).
• Link underline animation: Links may animate text-decoration-color from transparent to {colors.link} on hover (detected in transition token).
• Loading states: Skeleton placeholders use shimmer or skeleton-wave animations during content fetch; spinners use spin or circular-dash.
• Toast/notification enter: Modal or toast notifications use fadeSlideIn or animatein for entrance choreography.
• Banner dismissal: The top promotional banner likely slides up or fades out on close (exit keyframe or opacity transition).

Imagery Style

• Illustration-dominant: The only imagery in the current viewport is the hero illustration card—no photography, no 3D renders, no gradients-as-imagery.
• Hand-drawn aesthetic: The hero illustration uses white line-art on a solid {colors.signature-orange} background, mimicking a sketchbook or whiteboard drawing style. Lines are slightly irregular (suggesting custom SVG or hand-crafted vector art).
• Technical diagram content: Illustrations depict system design concepts—server boxes labeled "Multi Instance Server," directional arrows, abstract architectural symbols. This is domain-specific imagery that reinforces the educational subject matter.
• Color-blocked composition: The illustration lives inside a solid-color card with no transparency, gradients, or photographic blending. It's a graphic element, not a atmospheric one.
• Centered text overlay: The illustration card combines centered display typography ("System Design ⚡ in a hurry") with the surrounding line art, creating a unified graphic mark.
• No imagery in body content: The article itself is text-only (headings, paragraphs, lists)—no inline figures, diagrams, or screenshots in the current view. This may change on other lesson pages.
• Icon style: UI icons (search, chevrons, locks, social media logos) appear to be from Heroicons (outline style, 24px default, stroke-based, currentColor coloring).
• Brand icon: The hellointerview logo uses a graduation cap icon inside a circle, rendered in {colors.accent} (teal) or white depending on context.
• Aspect ratio flexibility: The hero illustration card appears to be roughly 2.5:1 width-to-height, but the exact ratio should adapt to available content column width.

Icon System

• Library: Heroicons (detected via framework analysis: iconLibs: ["heroicons"])
• Specific icons observed:
  • Graduation cap (hellointerview brand mark)
  • Magnifying glass (search input)
  • Chevron/right-arrow (sidebar expanders)
  • Chevron/down-arrow (sidebar collapsed sections)
  • X/close (banner dismiss, modal close)
  • Lock (premium-gated content)
  • Sun/theme-toggle (header utility)
  • Mobile phone (footer "Get the app")
  • User/person (footer "Sign in")
  • YouTube, LinkedIn, Twitter/X, Medium, Discord, GitHub, Apple (social/app store icons)
  • Book/graduation-cap (promo card icon)
  • Checkmark or circle (sidebar item bullets)
• Treatment: Outline/stroke style (Heroicons outline variant), not solid/fill. Color is almost always currentColor inheriting from parent text color. Default size is 24px for standalone icons, 16–20px when inline with text.
• Alignment: Icons are vertically centered with adjacent text using flexbox (inline-flex, items-center). Icon-to-text gap is typically {spacing.sm} (5px) or {spacing.xs} (4px).

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Remix — detected Turbopack references suggest Next.js
- Styling:        Tailwind CSS v3+ (utility-first, detected tailwindLikely: true)
- Fonts:          Self-hosted WOFF2 via @font-face (primaryFont = Open Sans)
                  Fallback: Google Fonts 'Open Sans' with local() 'Arial' override
- Animation:      Tailwind's built-in transition utilities + CSS keyframes
                  (Framer Motion optional for complex orchestration)
- Icons:          Heroicons (@heroicons/react, outline style)
- Component lib:  Custom components (possibly shadcn/ui patterns given Tailwind + Radix-like behavior)
- State:          React Context or Zustand for UI state (sidebar collapse, theme toggle)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single column: sidebar collapses to hamburger menu, right rail moves below content or hides, hero illustration stacks above heading | | Tablet | 640px – 1024px | Sidebar becomes a slide-out drawer, content column widens, right rail may hide or narrow | | Desktop | 1024px – 1440px | Full three-column layout as shown: 256px sidebar + fluid content + ~300px right rail | | Wide | > 1440px | Content column centers with increased max-width, sidebars anchor to edges |

Touch Targets

• {component.button-primary}: 40px height × ~120px width (with padding) — exceeds WCAG AAA 44×44 minimum ✓
• {component.button-secondary}: 40px height × ~80px width — exceeds minimum ✓
• {component.search-input}: 40px height — meets minimum height, width is fluid (likely 200px+) ✓
• {component.sidebar-item}: ~40px height (padding 8px × 2 + 14px font ≈ 36px, likely hits 40px with line-height) — at or near minimum
• {component.button-ghost}: 32px × 32px — below 44×44 recommendation; consider increasing to 40×40 for touch interfaces
• {component.button-ghost-sm}: 28px × 28px — below recommendation; acceptable only for dense toolbar contexts

Collapsing Strategy

• Navigation sidebar: At tablet and below, the 256px sidebar should collapse into a hamburger-triggered off-canvas drawer (slide from left). The "Back to Main" link moves into the drawer header or becomes a browser-back affordance.
• Hero illustration: On mobile, the orange hero card should stack vertically above the "Introduction" heading, maintaining {rounded.lg} corners and full-width bleed within the content container.
• Right rail: The promotional card, progress indicator, and table of contents should move below the article content on mobile, or hide entirely behind a "Contents" toggle. The promo card is lower priority than the article body.
• Top banner: Remains full-width at all breakpoints but may truncate text on mobile ("25% off Premium →").
• Search input: May collapse to an icon-only button that expands into an overlay on mobile.
• Button text: "Get Premium" may shorten to "Premium" on narrow viewports to prevent overflow.

Image Behavior

• Hero illustration card: Should scale proportionally (maintain aspect ratio) and remain within the content column's padding. On mobile, it becomes full-width (minus container padding) with maintained {rounded.lg} corners.
• Icons: Heroicons are vector-based and scale crisply at all sizes. Ensure width and height are set explicitly (not just one dimension) to prevent layout shift.
• Logo: The hellointerview wordmark may simplify to just the graduation cap icon on mobile if space is constrained.

Iteration Guide

1. Initialize with Next.js + Tailwind CSS — Set up a project using the App Router pattern (detected Turbopack references). Configure tailwind.config.js with the color, typography, spacing, and borderRadius tokens from this DESIGN.md's YAML frontmatter as design tokens.

2. Map every YAML token to Tailwind utilities — Convert {colors.accent} to tailwind.config.js colors.accent, {spacing.xl} to spacing['xl'], etc. Never hard-code a hex or pixel value that has a corresponding token. Use theme() or @apply references in your CSS.

3. Build the three-column layout first — Implement the fixed 256px sidebar, fluid center content (max-width ~800px), and fluid right rail (~300px) using CSS Grid or Flexbox. Test at 1440px viewport to match the screenshot exactly.

4. Implement components in dependency order — Start with atoms (button-primary, search-input, sidebar-item), then molecules (top-nav, sidebar-nav, promo-card), then organisms (article-container, full-page-layout). Each component must reference only tokens defined in step 2.

5. Add state variants as separate component entries — Follow the pattern: button-primary (default) and button-primary-active (pressed) are distinct classes or variants, never nested conditional logic within a single component definition. Add hover: and focus: pseudo-variants in your Tailwind classes at implementation time.

6. Implement the sidebar navigation tree — Build the collapsible accordion with accordion-down/accordion-up keyframe animations for smooth open/close. Active items get {colors.surface-accent-soft} background. Locked items get {colors.muted-soft} text + lock icon.

7. Set up Open Sans font loading — Use the @font-face declarations from the extracted CSS (pointing to your hosted WOF2 files or a CDN equivalent). Define CSS custom properties --font-sans for easy swapping. Ensure the primaryFont Fallback local reference is included for instant rendering.

8. Apply the 200ms transition standard — Add transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] (or the specific property transitions from the Motion section) to all interactive elements. This timing is non-negotiable for matching the system's responsive feel.

9. Test at multiple breakpoints — Verify the collapsing strategy: sidebar → drawer, right rail → bottom or hidden, hero → stacked. Ensure all touch targets meet 44×44px minimum on mobile (expand ghost buttons from 28–32px to 40px if needed).

10. Run the linter and validate — After implementation, run accessibility audits (contrast ratios for {colors.ink} on {colors.canvas}, {colors.on-accent} on {colors.accent}). Verify every {token.path} reference in your code resolves to a defined token. Check that every component in the frontmatter has a corresponding implemented module.

Font Setup

For development without access to the original WOFF2 files, use Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">

CSS variables to define in your :root or Tailwind config:

:root {
  --font-sans: 'Open Sans', 'primaryFont Fallback', Helvetica, Arial, sans-serif;
  --font-mono: monospace;
  
  /* Or if using Tailwind theme extension: */
  /* fontFamily: {
    sans: ['var(--font-sans)'],
    mono: ['var(--font-mono)'],
  } */
}

The original site uses a variable-weight font file (font-weight: 300 800) allowing any weight in that range. Google Fonts' Open Sans supports 300–800, making it a drop-in replacement.

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover colors, background tints, and transform offsets for buttons, links, and sidebar items are inferred but not extracted. Implement hover: variants using the active/darker token shades as guides.
• Focus ring specification: The exact focus-visible ring style (offset, color, width) for keyboard navigation is not present in the extracted CSS. Recommend implementing focus-visible:ring-2 focus-visible:ring-{colors.accent} focus-visible:ring-offset-2 following WAI-ARIA practices.
• Loading/skeleton states: While skeleton-pulse, skeleton-wave, and shimmer keyframes exist in the stylesheet, the exact skeleton component markup and placeholder geometry (border-radius, height variations) are not visible in the static screenshot.
• Form validation states: Beyond text-input-focus, error, warning, and success input states (red/green borders, helper text) are not extractable from the current page (which contains no forms).
• Dark mode tokens: The extensions.mode is "light" and no dark-mode color substitutions were detected. A dark theme would require inverting canvas/ink, adjusting surface tokens, and potentially shifting accent saturation—all beyond the current extraction scope.
• Modal/dialog components: No modals, dropdowns, or tooltips are open in the screenshot. Their elevations, backdrop blur, and exit animations (enter/exit keyframes detected but not observable) are inferred.
• Responsive breakpoints: Exact breakpoint pixel values (where sidebar collapses, where right rail disappears) are estimated from common patterns, not extracted from media queries. The CSS source did not include @media rule contents.
• Premium/gated content UX: Locked sidebar items are visible but the upgrade prompt flow (what happens when you click a locked item) is not extractable from a static page.
• Exact promo card dimensions: The right-rail promo card's width is estimated from visual proportion; the actual CSS may use width: 100% with parent constraints or a fixed pixel value.
• Search input expanded state: The search field's behavior when focused (does it widen? Show suggestions dropdown?) is not observable from the static screenshot.