awesome-design-md

The PlayStation design system is a three-surface marketing system organized around alternating black, white, and PlayStation Blue chapters. It is designed to mimic a console launch trailer, where sections scroll past the viewer.

Core Principles:

• Editorial Purpose: Each section serves a single purpose (e.g., hero photography, console product render, PS Plus tier callout, or news strip).
• Canvas Modes: Sections utilize three full-bleed canvas modes.
• Quiet Chrome: The UI is intentionally minimal. Primary CTAs use a fully-rounded pill shape in PlayStation Blue (#0070d1).
• Typography: Uses the proprietary PlayStation SST face, typically rendered at a signature weight of 300 (light) for a premium feel.
• Visual Weight: Imagery (console shots, game art, illustrations) occupies 60-90% of every section, with copy compressed into small editorial slots.
• Minimal Decoration: No gradient backgrounds, no atmospheric mesh, and no drop shadows except for faint section dividers.

The Linear design system is a near-black, product-focused marketing canvas characterized by a 'software-craft' aesthetic: dense, technical, and luxurious. It uses a deep black background (#010102) and a single chromatic accent, the signature Linear lavender-blue (#5e6ad2), used sparingly for brand marks, focus rings, and primary CTAs.

Key Design Principles:

• Dark-canvas hierarchy: Uses a four-step surface ladder (canvas → surface-1 → surface-2 → surface-3 → surface-4) to create depth without shadows.
• Minimalist Chromaticity: Avoids saturated colors; the only semantic color is Success Green (#27a644).
• Typography: Uses custom Linear sans (with SF Pro Display fallback) featuring aggressive negative letter-spacing for large display text.
• Product-Centric Layout: The marketing chrome acts as a dark frame for high-fidelity product UI screenshots, which are typically housed in surface-1 panels with 12px (rounded.lg) or 16px (rounded.xl) corners.

The IBM-design-analysis system is an enterprise-marketing design language faithful to the Carbon Design System. It is characterized by a 'flat-square' aesthetic, utilizing white surfaces, charcoal typography, and a single assertive accent color: IBM Blue (#0f62fe).

Core Design Principles:

• Flat Geometry: All components (CTAs, cards, inputs, containers) use square corners ({rounded.none} 0px) and thin 1px borders. Avoid rounded pills, soft shadows, or gradients.
• Typographic Signature: Uses IBM Plex Sans. A key brand signature is using a light weight (300) for large display sizes (42px–76px) to create a calm, technical feel. Body text uses weight 400 with a specific letter-spacing: 0.16px for precision.
• Restrained Color Palette: 95% of the interface consists of white ({colors.canvas}), light gray ({colors.surface-1}), and charcoal ({colors.ink}). IBM Blue is reserved strictly for links, primary CTAs, and CTA banners.
• Elevation via Surface/Lines: Hierarchy is established through 1px hairlines and changes in surface color rather than drop shadows.

--- 
version: alpha
name: IBM-design-analysis
# ... (metadata)
---

The Binance design system is built for financial trading, balancing authority with energy. It uses a deep near-black canvas ({colors.canvas-dark} — #0b0e11) as the base for marketing surfaces, while transactional surfaces (buy, deposit, withdraw) use a light theme ({colors.canvas-light} — #ffffff).

Core Characteristics:

• Single Accent Color: {colors.primary} (#FCD535) is used for all brand voltage (CTAs, headlines, badges).
• Dual Type Stack: BinanceNova for editorial/body text and BinancePlex for all numerical/financial data.
• Multi-theme: Marketing defaults to dark; transactional flips to light. Trading semantics (green/red) are shared.
• Flat Surfaces: Uses flat color blocks for cards ({colors.surface-card-dark} or {colors.canvas-light}) without gradients or atmospheric backdrops.
• Dense Layouts: Uses a 4-multiple spacing scale with tighter vertical padding ({spacing.section} — 80px) compared to typical marketing sites to accommodate dense product data.

The Nike-design-analysis is a photography-first commerce design system characterized by extreme typographic contrast and mechanical restraint. It uses a near-monochrome palette to ensure that chromatic energy is reserved for editorial photography and critical pricing signals rather than decorative UI elements.

Core Design Principles:

• Editorial Focus: Uses towering uppercase Nike Futura ND display lockups burned into full-bleed imagery.
• Neutral Chrome: ~95% of the UI surface area uses a pure black/white/gray palette ({colors.ink}, {colors.canvas}, and {colors.soft-cloud}).
• Pill Geometry: Actionable surfaces like CTAs, search fields, and filter chips use {rounded.full} or {rounded.md} geometry.
• Product Card Model: Product cards feature zero radius and zero shadow, sitting directly on {colors.soft-cloud} backgrounds so the photograph acts as the card.
• Two-tone CTA Hierarchy: Uses {component.button-primary} (black on light) and {component.button-secondary} ({colors.soft-cloud} on bright) to maintain clear hierarchy without color clutter.

Raycast's design philosophy is "the marketing page is the product." The site uses a single dark mode surface with a 4-step surface ladder to create depth without drop shadows. The design is characterized by a near-black canvas, hairline 1px borders, and Inter typography with the ss03 stylistic set enabled to provide a signature look. Primary actions are anchored by a single white CTA pill, while saturated colors are strictly reserved for category illustrations within feature imagery, not the main chrome.

Key Design Characteristics:

• Surface Ladder: {colors.canvas} (#07080a) → {colors.surface} (#0d0d0d) → {colors.surface-elevated} (#101111) → {colors.surface-card} (#121212).
• Primary Action: A white CTA pill ({colors.primary} — #ffffff).
• Typography: Inter with font-feature-settings: "calt", "kern", "liga", "ss03" enabled site-wide.
• Borders: 1px hairline borders ({colors.hairline} — #242728); no drop shadows.
• Corner Radii:
  • {rounded.sm} (6px) for keycaps
  • {rounded.md} (8px) for buttons and small cards
  • {rounded.lg} (10px) for feature cards
  • {rounded.xl} (16px) for hero command-palette mockups.

The Shopifi-Inspired design language operates on two parallel, non-blended design tracks defined by canvas polarity:

1. Marketing Track (Cinematic): Uses a near-black canvas (#000000) with full-bleed photography and giant, thin-weight display typography. It is designed to feel like a high-end print magazine.
2. Transactional Track (Utility): Uses light canvases (#ffffff or #fbfbf5) for pricing, signups, and dashboards. It utilizes pastel accents like aloe and pistachio greens to signal commerce and growth.

Core Design Principles:

• Two-Canvas System: Never blend the dark marketing track with the light transactional track.
• Pill-Only Buttons: The only allowed button shape is the pill ({rounded.pill}); rounded rectangles are prohibited for buttons.
• Signature Typography: Uses thin-weight (330) display type as a brand identifier.
• Stylistic Unifier: The OpenType ss03 stylistic set is enabled across all text roles to provide character-level consistency.

The Bugatti design system is an austere, luxury-automotive interface characterized by a near-pure black canvas, white uppercase letterspaced display type, and full-bleed automotive photography. The system avoids accent colors, decorative elements, shadows, gradients, or chrome, relying entirely on photography, typography, and the brand wordmark to create a sense of 'engineered precision'.

Core Principles:

• Monochrome Palette: Uses a pure black canvas ({colors.canvas} — #000000) with white type. There is no light mode.
• Typography-Driven Emphasis: Visual hierarchy is achieved through size and letter-spacing rather than font weight (always use weight 400).
• Strict Typeface Usage: Three specific typefaces are used for distinct purposes:
  • Bugatti Display: Headlines and the wordmark (all caps, wide tracking).
  • Bugatti Text Regular: Body paragraphs (serif).
  • Bugatti Monospace: Buttons, navigation, and captions (machined feel).
• Minimalist UI Elements: Buttons are pill-shaped ({rounded.pill}) with transparent backgrounds and 1px white outlines. Surface cards are nearly black ({colors.surface-card} — #141414) to minimize contrast jumps.

The Renault design system is a high-contrast, photography-first visual language characterized by a stark black-and-white canvas, a single signature accent color (Sunlight Yellow), and the proprietary NouvelR typeface.

Core Design Principles:

• Two-tone Canvas: Uses {colors.canvas} (white) for browsing/catalogues and {colors.surface-dark} (black) for storytelling/hero sections.
• Single Accent: {colors.primary} (Sunlight Yellow) is reserved strictly for consequential actions (CTAs, 'NEW' badges, configurator indicators) and is never used decoratively.
• Monolithic Typography: Exclusively uses the NouvelR family. High-weight (700) is used for displays with tight line heights, while weight 400 is used for body text.
• Square Geometry: Emphasizes square corners ({rounded.none} or {rounded.xs}) for tiles and buttons, reserving {rounded.pill} only for sub-nav chips and decorative badges.
• Elevation via Color: Uses color blocking (switching between white and black bands) rather than shadows to create depth.

The Framer-design-analysis system is a dark-canvas design language optimized for high-impact marketing sites. It treats the web page like a working artboard, utilizing pure black surfaces ({colors.canvas}) and oversized white display typography set in GT Walsheim Medium.

Key Design Principles:

• Poster-like Typography: Uses massive negative letter-spacing (up to -5.5px) on display headings to create a bold, graphic cadence.
• Monochrome Brand Chrome: The primary UI elements are white pills ({components.button-primary}) or charcoal surfaces ({components.button-secondary}).
• Chromatic Accents: A single accent color, {colors.accent-blue}, is strictly reserved for functional elements like hyperlinks and focus states, never for decoration.
• Rhythm Breaks: The monochrome grid is interrupted by oversized, vibrant gradient spotlight cards (magenta, violet, orange, coral) that act as living showcase tiles rather than section backgrounds.
• Typographic Voice: Uses Inter Variable with specific OpenType character variants (cv01, cv05, cv09, cv11, etc.) to achieve a custom-tuned, professional body voice.

version: alpha
name: Framer-design-analysis
description: "A confident dark-canvas builder marketing site..."