Samples
真实网页的 DESIGN.md 输出
每个案例都直接来自本地 sample 文件夹里的 markdown 输出。点击任意案例即可查看完整 DESIGN.md，包括视觉 DNA、CSS 证据、组件规范和复刻指南。
4
Sites
4
English
MD
Formats
Case Library
案例列表
当前展示 English 案例。使用右上角语言切换后，列表会同步切换到对应语言版本。
getwebdesign_DESIGN.md
getwebdesign.top
Cyber-noir SaaS aesthetic with deep void blacks and ethereal indigo glows. Glass morphism dominates the interface through translucent layered panels with backdrop blurs, creating depth against a near-black canvas. Typography pairs geometric precision (Inter) with editorial elegance (Georgia) for high-impact headings. The system employs expressive motion with glowing focus states and smooth state transitions, optimized for developer tools and technical workflows.
linear_DESIGN.md
linear.com
Ultra-dark developer aesthetic with glassmorphism surfaces, precision typography using Inter Variable with aggressive negative tracking (-1.056px to -1.408px), and a strict 4px spatial grid system. Technical credibility established through monospace accents (Berkeley Mono) for labels and code, layered translucent interfaces with backdrop-filter blur, and a restrained color palette anchored in near-black backgrounds (rgb(8, 9, 10)) with high-contrast off-white text (rgb(247, 248, 248)).
stripe_DESIGN.md
stripe.com
A sophisticated fintech aesthetic combining minimalist precision with expressive gradient artistry. The system employs a custom typeface (Sohne) with delicate weights, a 4px baseline grid, and a dual-mode color architecture supporting both light airy surfaces and deep navy foundations. Visual hierarchy is established through scale contrast rather than weight alone, with purple (#533afd) serving as the primary interactive accent. Glassmorphism appears in elevated surfaces, while smooth cubic-bezier easing provides motion personality.
vercel_DESIGN.md
vercel.com
A developer-centric, systematic interface built on mathematical precision. The design language emphasizes clarity through the Geist typeface family, rigorous 4px spatial grids, and restrained motion. Visual hierarchy is established through weight and opacity rather than scale alone. Surfaces employ glass/translucent treatments with subtle border definitions using single-pixel lines. The aesthetic is intentionally minimalist—prioritizing information density while maintaining breathable whitespace through systematic gap structures (4px, 8px, 12px, 24px, 32px). Interactive elements utilize fully rounded (pill) geometries (9999px radius) contrasting with sharp 2px radii on inputs and cards. Color operates on a grayscale foundation (rgb(23, 23, 23) to rgb(255, 255, 255)) with functional accents in blue (rgb(0, 112, 243)) and red (rgb(229, 72, 77)) states.