Design Systems Surf

Overview

Design Systems Surf is a curated reference library and discovery platform for design systems from leading technology companies and design-forward organizations. The brand embodies 'Minimalist Clarity'—a design philosophy that prioritizes information hierarchy, accessibility, and component-driven thinking through a deliberately restrained visual language. The interface uses a clean white canvas (#ffffff) with strategic accent colors (primary blue #0099ff, secondary orange #ff5500, tertiary purple #6352fa) to guide users through complex design system documentation. The emotional response is one of confidence and professionalism: users feel they're accessing vetted, production-ready design knowledge from industry leaders. The brand personality is authoritative yet approachable, speaking to both seasoned design systems practitioners and teams beginning their design infrastructure journey. Voice is direct, jargon-aware but never gatekeeping, and grounded in practical utility. Example sentence: 'Explore how Figma, Stripe, and Shopify structure their component libraries—then adapt what works for your team.'

Colors

The color system follows a light-mode-first strategy with three primary accent roles: Primary Blue (#0099ff) is reserved exclusively for interactive elements (CTAs, links, focus states, active navigation) and represents the brand's core action color. Secondary Orange (#ff5500) appears on badges, status indicators, and secondary CTAs to create visual rhythm and urgency. Tertiary Purple (#6352fa) is used sparingly for tertiary actions, code snippets, and supplementary highlights. The neutral surface stack ranges from pure white (#ffffff) at the brightest to light gray (#e0e0e0) at the container-highest level, with intermediate stops at #f5f5f5, #f0f0f0, and #e9ecef to create subtle depth without visual noise. Text hierarchy is maintained through on-surface (#000000) for primary content, on-s

Typography

The type system employs a two-family strategy: Inter Display and Inter Tight for headlines and navigation (conveying precision and modernity), paired with Inter for body text and UI labels (ensuring readability at small sizes). Display (56px, 500 weight, -0.02em tracking) anchors hero sections and major page titles with generous line-height (64px) for breathing room. Headline-lg (32px, 600 weight) is used for section headers and card titles, while headline-md (28px, 600 weight) breaks up content areas. Body-lg (18px, 400 weight, 28px line-height) is reserved for introductory paragraphs and descriptions; body-md (16px, 400 weight, 24px line-height) serves as the default for card content and list items. Label-md (14px, 600 weight, 20px line-height, 0.01em tracking) is applied to buttons, tag

Layout

The layout system uses a 12-column grid with a max-width of 1200px, centered with symmetric gutters of 32px on desktop (reducing to 24px on tablet, 16px on mobile). The spacing scale is semantic: lg (40px) separates major sections (hero to products, products to footer); md (24px) is used for card padding and section internal spacing; sm (12px) for component internal spacing (button padding, input fields); xs (4px) for micro-interactions and icon spacing. The container-max of 1200px ensures content remains scannable and prevents line-length from exceeding 75 characters on body text. White-space is treated as a first-class design element: cards are separated by at least lg spacing (40px), and internal card padding uses md (24px) to create breathing room around content. The grid is fluid on m

Elevation & Depth

Depth is conveyed through a restrained shadow system rather than color shifts or borders alone. Level 1 (Base/Surface): no shadow; elements sit flush on the white background (#ffffff). Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px solid border at rgba(0, 0, 0, 0.05) to define card edges without heaviness. Level 3 (Elevated/Hover States): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) applied on card-hover and modal overlays, paired with a background shift to surface-container-low (#f5f5f5) to create visual lift. Interactive elements (buttons, inputs) use no shadow

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used strategically to soften hard edges without sacrificing the clean, technical aesthetic. Buttons use full (9999px) border-radius to create pill-shaped affordances that feel modern and clickable; this is the most rounded element in the system. Cards and containers use lg (1rem / 16px) border-radius to create a subtle, approachable feel while maintaining geometric clarity. Input fields and smaller components use md (0.75rem / 12px) border-radius to balance usability with visual hierarchy. Tags and badges use DEFAULT (0.5rem / 8

Components

Action Elements Buttons are the primary interaction primitive. Button-primary uses {colors.primary} (#0099ff) background with {colors.on-primary} (#ffffff) text, full border-radius (9999px), and padding of 16px 24px for a 44px total height. On hover, the background shifts to #0077cc (a 20% darker blue) with a 150ms ease-out transition; no shadow is added to avoid visual clutter. Button-secondary uses a transparent background with a 1px solid border at {colors.outline} (#999999), the same text color as primary, and md border-radius (16px). On hover, the background becomes {colors.surface-container-high} (#e9ecef) and the border shifts to {colors.outline-variant} (#cccccc). Both button variants use {typography.label-md} (14px, 600 weight) for consistent labeling. Disabled states reduce o

Do's and Don'ts

**Do**

• Do use primary blue (#0099ff) exclusively for interactive elements—CTAs, links, focus states, and active navigation—to create a consistent, scannable action layer.
• Do apply lg spacing (40px) between major sections and md spacing (24px) within cards to create breathing room and improve content scannability.
• Do use Inter Display or Inter Tight for all headlines (display, headline-lg, headline-md) to convey precision and modernity; reserve Inter for body and label text.
• Do add a 3px focus ring at rgba(0, 153, 255, 0.1) to all interactive elements (buttons, inputs, links) to meet WCAG AAA contrast and keyboard navigation requirements.
• Do transition all interactive state changes (hover, focus, active) over 150–200ms with ease-out timing to provide tactile feedback without feeling sluggish.
• Do use full border-radius (9999px) only on buttons to maximize affordance; use lg (16px) for cards and md (12px) for inputs to maintain visual hierarchy.

**Don't**

• Don't use secondary orange (#ff5500) or tertiary purple (#6352fa) as primary CTAs—reserve those for badges, secondary actions, and status indicators to avoid visual confusion.
• Don't apply shadows deeper than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) or use multiple layered shadows; the system uses a single, clean shadow per elevation level.
• Don't mix font families within a single headline or body paragraph; use Inter Display/Tight for headlines and Inter for body to maintain typographic consistency.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the geometric precision aesthetic.
• Don't apply background colors to navigation items unless they are active or hovered; default navigation should use text-only styling to reduce visual noise.
• Don't use opacity-based text colors (e.g., rgba(0, 0, 0, 0.7)) for primary body text; use the defined on-surface and on-surface-variant tokens to ensure consistent contrast and accessibility.