ngrok

Overview

ngrok is a developer-first tunneling platform that transforms complex networking into a single command. The design system embodies 'Technical Minimalism'—a philosophy that strips away decorative elements to expose functional clarity, allowing developers to focus on what matters: secure, reliable tunneling. The brand personality is direct, trustworthy, and precise; the interface conveys competence through restrained use of color (a vibrant sky-blue accent against a clean white canvas), generous whitespace, and typography that prioritizes legibility over flourish. The emotional response is one of confidence: users feel they're in control of a powerful tool, not overwhelmed by it. Voice: matter-of-fact, jargon-aware but never condescending. Example: 'Your tunnel is live at entire-spilt-audience.ngrok-free.dev—share the URL and start receiving traffic.'

Colors

The color palette follows a 'Accent + Neutral' strategy, where a single vibrant primary color (sky-blue #00a5ef) serves as the call-to-action and focus indicator, while a neutral gray scale (#0a0a0a to #ffffff) provides the structural foundation. Primary (#00a5ef) is applied to interactive elements—buttons, links, focus rings—creating a visual hierarchy that guides the user's eye to actionable items. Secondary (rose-red #ff2357) is reserved for error states and critical warnings, ensuring users immediately recognize problems. Tertiary (purple #ac4bff) supports secondary actions and highlights. The surface stack is deliberately light: surface (#ffffff) is the default background, surface-container-low (#f3f4f6) is used for input fields and subtle containers, and surface-container-high (#d1d5

Typography

The type system uses Roobert as the primary typeface—a geometric sans-serif that conveys technical sophistication without coldness—paired with JetBrains Mono for code blocks and technical content. The hierarchy spans eight levels: display (60px, 700 weight) for hero statements, headline-lg (40px, 600) for major sections, headline-md (28px, 600) for subsections, title-lg (20px, 600) for card titles, body-lg (18px, 400) for introductory paragraphs, body-md (16px, 400) for standard body text, label-md (14px, 500) for buttons and form labels, and label-sm (12px, 500) for metadata and helper text. Letter-spacing is tightened on display and headline levels (-0.04em to -0.01em) to create visual weight, while body text uses 0em spacing for natural readability. Line heights are generous: 1.5x for b

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport with 24px gutters on desktop and 16px on mobile. The spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for form field padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero spacing. Whitespace is treated as a first-class design element; sections are separated by lg spacing (40px) to create visual breathing room, and cards use md padding (24px) internally to ensure content doesn't feel cramped. The container max-width of 1280px ensures that on ultra-wide displays, content remains scannable and not stretched. Responsive breakpoints follow a mobile-first approach: base styles apply to all screens, then md breakpoints (768px)

Elevation & Depth

Depth in this system is achieved through subtle shadows and borders rather than layering or blur effects. The elevation scale has three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and containers at rest, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards on hover and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for dropdowns and floating panels. Every card and container has a 1px border in outline (#d1d5dc) to define its edge; the shadow is secondary, providing a soft lift without visual heaviness. Buttons use sm elevation at rest and transition to md on hover with a 150ms ease-out timin

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are applied consistently but conservatively, avoiding the extremes of sharp rectangles or fully rounded pills. Buttons use md radius (0.75rem / 12px), creating a subtle softness that feels approachable without sacrificing technical credibility. Cards and containers use DEFAULT radius (0.5rem / 8px), a middle ground that suggests containment without visual aggression. Input fields use DEFAULT radius (0.5rem / 8px) to align with cards, creating visual consistency. Badges and pills use full radius (9999px) to indicate a distinct, self-

Components

Action Elements Buttons are the primary interactive element. The button-primary component uses primary (#00a5ef) background with white text, md radius (12px), and 12px horizontal padding with 40px height for comfortable touch targets. On hover, the background shifts to #0084cc (primary-600) with a 150ms transition, and on active/click, the button scales to 0.97 and the background darkens to #0069a4 (primary-700). The button-secondary variant uses a transparent background with a 1px primary border and primary text; on hover, it fills with primary-container (#dff2fe) and shifts text to on-primary-container (#024a70). Links use primary text color with no underline by default; on hover, they underline and maintain primary color. The skip-to-main-content link is positioned fixed at top: 8px

Do's and Don'ts

**Do**

• Do use primary (#00a5ef) exclusively for interactive elements—buttons, links, focus rings—to create a clear visual hierarchy and guide user attention.
• Do apply md radius (12px) to buttons and DEFAULT radius (8px) to cards and inputs; this consistency creates visual coherence across the interface.
• Do maintain generous whitespace: use lg spacing (40px) between major sections and md padding (24px) inside cards to ensure content breathes.
• Do render code and technical content in JetBrains Mono on a surface-container-low background with a 1px outline border to distinguish it from prose.
• Do use the sm elevation shadow (0 1px 2px rgba(0, 0, 0, 0.06)) as the default; reserve md and lg elevations for hover and modal states.
• Do test all interactive elements for keyboard navigation; focus states must use a 3px primary-container ring with clear visual contrast.

**Don't**

• Don't use secondary (#ff2357) or tertiary (#ac4bff) for primary CTAs; reserve these for error states and secondary actions only.
• Don't apply radius larger than lg (16px) to standard components; this dilutes the technical aesthetic and suggests a consumer-focused brand.
• Don't use dark mode or dark backgrounds; the brand's trust-focused aesthetic relies on the clarity of light surfaces and dark text.
• Don't mix typefaces; Roobert is the primary face for all UI text, and JetBrains Mono is reserved exclusively for code blocks.
• Don't apply multiple shadows or blur effects; the elevation system uses a single, subtle shadow per level to maintain clarity.
• Don't hardcode color values in component styles; always reference the color token system (e.g., {colors.primary}) to ensure consistency and enable future theme updates.