voltagent/awesome-design-md: Design System Analysis Repository

Revolut's marketing design uses a high-contrast, two-mode system designed for a 'fintech-meets-product-brochure' aesthetic.

Key Design Principles:

• Two-Mode Canvas: Alternates between a near-black storytelling canvas ({colors.canvas-dark} — #000000) for hero bands and product mockups, and white catalogue bands ({colors.canvas-light} — #ffffff) for comparison tables, FAQs, and download tiles. Transitions occur in full-bleed bands.
• Typography: Uses Aeonik Pro (weight 500) for display headlines (sizes 20px–136px) with tight lineHeight: 1.0 and negative letter-spacing. Uses Inter (weight 400) for body text, often with positive tracking (0.24px) for UI precision.
• Call to Action (CTA) Strategy: The primary CTA on dark canvases is a white pill button with black text ({component.button-primary}). The brand's cobalt-violet ({colors.primary}) is reserved for featured plan cards and secondary CTAs in white sections.
• Accent Usage: A wide palette of saturated colors (teal, light-blue, deep-pink, etc.) is used only inside product mockups and illustrations, never as button surfaces.
• Shape Language: All buttons are pill-shaped ({rounded.full}); content cards use {rounded.lg} (20px); inputs and small chips use {rounded.md} (12px).

NVIDIA's design system is an engineering-grade marketing system characterized by a two-mode surface architecture: a deep black canvas ({colors.surface-dark}) for hero and footer chapters, and a flat paper-white canvas ({colors.canvas}) for body content.

Key Design Principles:

• Single-accent system: The system relies almost exclusively on NVIDIA Green ({colors.primary} — #76b900) for all primary CTAs, active states, and decorative motifs. The rest of the palette is monochrome (black, white, and gray).
• Hyper-angular geometry: Uses a consistent 2px radius ({rounded.sm}) across almost all interactive elements and containers, avoiding pill shapes or soft rounding to maintain a technical, CAD-like aesthetic.
• Structured editorial grid: Uses hairline gray rules ({colors.hairline}) and tight spacing rather than shadows or elevation to separate dense technical content.
• Signature ornamentation: Uses a small green corner square ({component.corner-square}, ~12px) as a decorative anchor for resource and feature cards.

Nike's design system is a photography-first commerce system characterized by extreme typographic contrast and a near-monochrome UI. The system uses a 'mechanical restraint' approach where the UI (chrome) remains neutral to allow editorial photography to lead.

Key Design Principles:

• Editorial Focus: Uses towering uppercase Futura display lockups ({typography.display-campaign}) burned into full-bleed imagery.
• Monochrome Palette: ~95% of the UI uses {colors.ink} (black), {colors.canvas} (white), and {colors.soft-cloud} (light gray).
• Pill Geometry: Almost all interactive elements (CTAs, search fields, filter chips, badges) use {rounded.full} or {rounded.md}. There are no sharp-cornered buttons.
• Zero-Radius Product Cards: Product cards use zero radius and zero shadow, sitting directly on {colors.soft-cloud} backgrounds to make the photograph the primary visual element.
• 8px Spacing Scale: Uses a strict 8px-base spacing system with a {spacing.section} (48px) rhythm for vertical breathing.

Pinterest's design system is a photography-first discovery system designed to be unobtrusive, using a 'quiet' warm-cream neutral palette to ensure imagery remains the focus.

Key Principles:

• Single-accent usage: Pinterest Red ({colors.primary} — #e60023) is reserved exclusively for primary actions like the 'Sign up' CTA, active tab indicators, and the sticky top-nav anchor. All other elements are monochrome.
• Two-radius shape system: The system uses a strict shape vocabulary: {rounded.md} (16px) for most components (buttons, inputs, pin cards), {rounded.lg} (32px) for large cards and modals, and {rounded.full} (9999px) for pill-shaped elements and circular buttons.
• Typography: Uses the proprietary Pin Sans typeface for all text roles, from {typography.display-xl} (70px) down to {typography.caption-sm} (12px). No serif or monospace fonts are used.
• Masonry Grid: The core layout is a column-based masonry grid where pin imagery (square, portrait, or landscape) serves as the load-bearing visual element. Pin cards use a 16px radius and have no internal padding.
• Surface Modes: The system alternates between a hero/CTA chrome (cream surfaces with large headlines) and content masonry (the pin grid).

Mintlify combines polished marketing aesthetics with high-density developer documentation.

Visual Identity

• Hero Bands: Uses atmospheric gradients (sky-blue to cream for homepage; teal-to-mint for startups) to create a cinematic SaaS feel.
• Accent Color: The signature mint green ({colors.brand-green}) is used sparingly for CTAs, active states, and feature confirmations.
• Buttons: Marketing flows are dominated by black-pill primary buttons ({colors.primary} + {rounded.full}).
• Emotional Impact: Uses vibrant testimonial cards ({colors.testimonial-orange}) to break the color rhythm.

Typography & Layout

• Typefaces: Uses Inter for all UI prose and headings, and Geist Mono for code blocks, inline code, and type/property signatures.
• Documentation Layout: Employs a standard 3-column layout (sidebar / prose / TOC) with dense 14px body type for long-form reading.
• Radius Scale: Uses a tightly controlled scale where marketing elements use {rounded.lg} (12px) and pill buttons use {rounded.full}.

The Voltagent design language is a developer-focused, near-black aesthetic designed for AI agent engineering platforms. It uses a single electric-green accent on a continuous dark canvas, emphasizing precision through hairline borders and monospace typography.

Key Visual Principles:

• Single Accent: Use {colors.primary} (#00d992) exclusively for CTAs, status pills, and brand glyphs. Do not introduce secondary accent colors.
• Dark Canvas Only: The design uses a near-black {colors.canvas} (#101010) as the only page surface. There is no light-mode counterpart.
• Hairline Chrome: Use 1px solid hairline borders ({colors.hairline} #3d3a39) for feature cards instead of heavy shadows or fills.
• Typography Pairing: Use Inter for all standard UI text and SF Mono (or system monospace) for code, command snippets, and numeric metrics.
• Shape Language: Use 6px rounded corners ({rounded.sm}) for buttons and inputs. Reserve the 9999px pill shape ({rounded.pill}) strictly for inline status tags.
• Ornamentation: Use a 1px dashed border (rgba(79, 93, 117, 0.4)) as a quiet rhythm cue between sections. Avoid gradients or atmospheric backdrops.

Do

• Use {component.button-primary} (near-black) for one primary action per viewport.
• Pair {component.button-primary} with {component.button-secondary} (white with hairline outline).
• Trust whitespace: Hero bands should be calm with {spacing.section} (96px) vertical padding and no gradients.
• Use signature cards ({component.signature-coral-card}, etc.) to break monotony.
• Keep {component.demo-grid-card} heights uneven to avoid a 'spec sheet' look.
• Anchor every editorial band with {spacing.section} (96px) padding.

Don't

• Don't use {colors.link} (#1b61c9) as the primary button color.
• Don't add gradients, meshes, or aurora backdrops to the hero; the hero is white.
• Don't bold display-weight type ({typography.display-xl} and {typography.display-lg} should be weight 400/500).
• Don't use {rounded.pill} outside of the pricing sub-system.
• Don't repeat the same surface mode in consecutive bands (e.g., avoid White $\rightarrow$ White). Use a rhythm like: White $\rightarrow$ Signature Card $\rightarrow$ White $\rightarrow$ Cream $\rightarrow$ Dark $\rightarrow$ White.

Use the following breakpoint and collapsing strategies for HashiCorp layouts:

Breakpoints

Collapsing Strategies

• Navigation: Horizontal nav with right-anchored CTAs collapses to a hamburger overlay below 768px. The primary CTA must remain visible on the bar.
• Product Card Grid: Transitions from 3-up (Desktop) → 2-up (Tablet/1024px) → 1-up (Mobile/<768px).
• Pricing Comparison Table: Collapses into per-tier accordions below 768px to prevent horizontal scrolling.
• Display Typography: {typography.display-xl} (80px) scales toward {typography.display-md} (40px) on mobile while preserving negative-tracking percentages.

Touch Targets

• CTA Buttons (button-primary, button-secondary): Maintain ≥40px tap height.
• Product Pills: 24px tall on desktop; 28px tall on touch viewports.
• Form Inputs: Maintain ≥44px tap target on touch viewports.

Image Behavior

• 3D Illustrations: Maintain aspect ratio and never crop; shrink rather than reflow below 768px.
• Customer Logo Marquee: Scales horizontally and may wrap to a second row at narrow widths.