TechCrunch

Overview

TechCrunch is a high-velocity technology news platform that demands a design system balancing bold, energetic brand expression with clean, accessible information architecture. The aesthetic is 'Tech-Forward Clarity'—a movement that combines vibrant accent colors (vivid greens, electric blues, and warm oranges) with a neutral, light-dominant canvas to ensure breaking news cuts through visual noise. The brand personality is authoritative yet approachable: fast-paced, opinionated, and deeply embedded in startup culture. The UI evokes a sense of urgency and insider access—users feel they're getting the scoop first. Voice example: 'Stripe's latest funding round signals a shift in how enterprise software gets valued.'

Colors

The color system is built on a 'Vibrant Minimalism' philosophy: a clean white surface (#ffffff) and light grays (#eeeeee, #dddddd) provide breathing room, while three bold accent colors command attention. Primary (#00d084, a vivid tech green) is deployed on all CTAs, active states, and key interactive elements—it's the color of 'go' and 'breaking news.' Secondary (#0693e3, electric blue) supports data visualization, secondary CTAs, and highlights. Tertiary (#ff6900, warm orange) marks featured content, badges, and promotional banners. The error state (#cf2e2e, a sharp red) is reserved for critical alerts and warnings. On-surface text is a near-black (#212623) for maximum legibility on light backgrounds. The surface-container stack (surface-container-lowest: #eeeeee, surface-container-high:

Typography

The type system pairs Archivo (a geometric sans-serif from Google Fonts) for headlines and labels with nb_international_proregular for body copy, creating a dual-personality hierarchy. Display (60px, 700 weight, -0.04em tracking) is reserved for hero moments and major announcements. Headline-lg (40px, 600 weight) anchors section breaks and article titles. Body-lg (19px, 400 weight) is the primary reading size for article text and ensures comfortable scanning at any screen size. Label-md (14px, 600 weight, 0.01em tracking) is used for buttons, navigation, and UI labels—the tighter tracking adds precision to interactive elements. All headlines use negative letter-spacing (-0.02em to -0.04em) to create visual compression and urgency. Body text maintains 1.5x line-height (28px on 19px base) fo

Layout

The layout follows a 12-column grid system with a max-width of 1360px, enforcing a 'content-first' rhythm. The gutter is 24px, creating consistent breathing room between columns and sections. Spacing is semantic: xs (4px) for micro-interactions, sm (12px) for component internal padding, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The homepage uses a hero banner (full-width, 68px top offset for sticky header) followed by a 2-column grid (main content + sidebar) on desktop, collapsing to single-column on mobile. Cards and content blocks use md spacing (24px) internally, with lg spacing (40px) between major sections. Container max-width of 1360px ensures text never exceeds ~80 characters per line, maintaining readability

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than color darkening. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Cards & Containers): 1px solid border in outline-variant (#c4c7c8) + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08). Level 3 (Modals & Overlays): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) + 1px border. Hover states elevate cards to Level 3 with a 200ms ease transition. The promo banner (purple background #9b51e0) uses a 36px border-radius timer badge with white background and purple text to create a focal point. No drop shadows exceed 40px blur

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften the precision of tech content without sacrificing clarity. Buttons use lg radius (1rem / 16px) for a friendly, clickable appearance. Cards and containers use md radius (0.75rem / 12px) for subtle definition. Input fields use DEFAULT radius (0.5rem / 8px) to signal interactivity without overwhelming. The promo countdown timer uses full radius (9999px / 50%) to create a pill-shaped badge that draws the eye. Navigation links and list items use md radius (0.75rem / 12px) on hover to create a contained interac

Components

Action Elements Buttons are the primary call-to-action vehicle. button-primary uses {colors.primary} (#00d084) background with white text, 48px height, 12px 24px padding, and lg radius (16px). On hover, the background shifts to #00a86b with a 24ms box-shadow: 0 4px 12px rgba(0, 208, 132, 0.24). On active, the background darkens to #008c57. button-secondary uses a transparent background with a 2px primary-colored border, inverting to primary-container on hover. All buttons use a 200ms ease transition for state changes. The 'Subscribe' CTA (primary-most prominent on the page) uses button-primary styling with a 16px font-size label-md typography.

Containers & Surfaces Cards (card component) use surface-container-lowest (#eeeeee) background, md radius (12px), md padding (24px), and a

Do's and Don'ts

**Do**

• Do use primary (#00d084) exclusively for CTAs, active states, and key interactive moments—it's the brand's signature accent and must remain distinctive.
• Do maintain 24px gutters and 40px section spacing to ensure content breathes and scans quickly on mobile and desktop.
• Do apply 200ms ease transitions to all interactive elements (buttons, links, cards) to telegraph state changes and reduce perceived latency.
• Do use Archivo for all headlines and labels (14px+) to maintain the geometric, tech-forward personality; reserve nb_international_proregular for body copy only.
• Do layer elevation through subtle shadows (max 40px blur, rgba opacity 0.06–0.12) rather than darkening backgrounds—this keeps the interface light and accessible.

**Don't**

• Don't use primary (#00d084) for body text, backgrounds, or decorative elements—reserve it exclusively for interactive and urgent moments.
• Don't exceed 1360px container max-width; wider layouts dilute the content-first hierarchy and reduce readability.
• Don't apply border-radius greater than xl (24px) to cards or containers; the 'Soft-Technical' aesthetic requires precision, not organic softness.
• Don't mix font families within a single headline or label; Archivo and nb_international_proregular are intentionally segregated by role (UI vs. body).
• Don't use shadows darker than rgba(0, 0, 0, 0.12) or blur radii exceeding 40px; the light, airy aesthetic depends on restraint.