--- title: "SVZ design system" variant: extended source: https://www.svz.io/ captured_at: 2026-10-12 theme: dark industry: agency generator: Design DNA (https://four.wiralomi.com/style/svz-io) ai_generated: true ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content" --- # SVZ · Design System > A dark canvas for oversized type and vivid creative signals **Theme:** dark · **Industry:** agency · **Source:** https://www.svz.io/ · **Captured:** 2026-10-12 (1440×900 desktop) _AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._ SVZ’s homepage pairs a near-black canvas and oversized uppercase typography with restrained red accents and expressive portfolio imagery. Broad, immersive sections alternate with a pale project gallery and compact credibility cards. ## North star Let oversized white typography and a near-black canvas lead; use red as a rare signal and project work as the main color variation. ## Overview The page is anchored by a nearly black canvas, with subtle shifts to pure black and charcoal creating section changes without conventional color-heavy panels. White uppercase display type carries the hero and major statements; small, lighter editorial text sits alongside it for contrast and hierarchy. The red accent is used sparingly as a bright visual signal, including in the hero’s animated-looking shapes and selected portfolio artwork, rather than as a broad interface fill. A large pale gallery interrupts the dark sequence and frames project thumbnails as a distinct portfolio surface. Layout favors spacious, cinematic full-width moments, centered headline compositions, and a compact multi-card portfolio grid. The page has generous areas of negative space, while the measured content width and comfortable spacing keep text and card information controlled. Thin dark borders define cards; restrained inset highlights add a subtle dimensional cue without relying on large shadows. ## Colors | Name | Hex | Token | Group | Role | |---|---|---|---|---| | Studio White | `#ffffff` | `--color-studio-white` | neutral | Primary display and interface text on dark sections, including the hero headline and card labels. | | Pure Black | `#000000` | `--color-pure-black` | surface | Dominant hero and credibility-section background; also appears in dark fades over portfolio imagery. | | Canvas Black | `#080808` | `--color-canvas-black` | surface | Main page canvas and dark strategy section background, subtly distinct from pure-black bands. | | Hairline Charcoal | `#1f1f1f` | `--color-hairline-charcoal` | neutral | Fine card borders and subdued geometric forms that separate content from the dark canvas. | | Gallery Ivory | `#f3efef` | `--color-gallery-ivory` | surface | Light, full-width portfolio gallery surface, creating a sharp tonal break in the dark page. | | Signal Red | `#fe1e34` | `--color-signal-red` | accent | Rare vivid accent in text, links, and gradients; also appears prominently inside selected portfolio artwork. | | Studio Gray | `#535353` | `--color-studio-gray` | surface | Mid-gray transition band and outlined discovery-call button; also used behind a large brand graphic. | | Panel Black | `#0d0d0d` | `--color-panel-black` | surface | Slightly lifted dark section and link surface, notably around portfolio content. | | Warm Charcoal | `#636262` | `--color-warm-charcoal` | surface | Secondary gray section-band tone; less prominent than the black canvas and portfolio surfaces. | | Soft Silver | `#cccccc` | `--color-soft-silver` | neutral | Muted supporting text and navigation details where primary white needs a quieter hierarchy. | ### Semantic aliases `--color-canvas` → `#080808` (Canvas Black) · `--color-surface` → `#000000` (Pure Black) · `--color-surface-2` → `#f3efef` (Gallery Ivory) · `--color-surface-3` → `#535353` (Studio Gray) · `--color-surface-4` → `#0d0d0d` (Panel Black) · `--color-text` → `#ffffff` (Studio White) · `--color-text-muted` → `#cccccc` (Soft Silver) · `--color-border` → `#1f1f1f` (Hairline Charcoal) · `--color-accent` → `#fe1e34` (Signal Red) ### Contrast (WCAG 2.x) | Text | Background | Ratio | Level | |---|---|---|---| | `#ffffff` | `#080808` | 20.03:1 | AAA | | `#ffffff` | `#000000` | 21:1 | AAA | | `#ffffff` | `#f3efef` | 1.14:1 | fail | | `#ffffff` | `#535353` | 7.69:1 | AAA | | `#cccccc` | `#080808` | 12.47:1 | AAA | | `#cccccc` | `#000000` | 13.08:1 | AAA | | `#cccccc` | `#f3efef` | 1.41:1 | fail | | `#cccccc` | `#535353` | 4.79:1 | AA | | `#fe1e34` | `#080808` | 5.2:1 | AA | | `#fe1e34` | `#000000` | 5.45:1 | AA | ### Gradients - `linear-gradient(0deg, rgb(0, 0, 0) 14%, rgba(0, 0, 0, 0))` - `linear-gradient(356deg, rgb(254, 30, 52) 15%, rgba(0, 0, 0, 0) 70%)` - `linear-gradient(0deg, rgb(0, 0, 0), rgba(255, 255, 255, 0))` - `linear-gradient(270deg, rgb(243, 239, 239), rgba(243, 239, 240, 0))` ## Typography | Family | Token | Source | Weights | Role | Free substitute | |---|---|---|---|---|---| | Kmr Waldenburg | `--font-display` | webfont | 400, 700 | Display headlines, navigation, labels, captions, and most interface text. | Inter | | Editorialnew | `--font-body` | webfont | 300 | Light editorial copy and smaller supporting phrases paired with the sans headlines. | Cormorant Garamond | - **Kmr Waldenburg:** Geometric sans with tight negative tracking in large uppercase headlines; use regular weight for display and stronger emphasis sparingly. - **Editorialnew:** Light, refined contrast to the geometric sans; reserve for short supporting copy and use an understated weight. ### Type scale — Augmented Fourth (ratio ≈ 1.417, base 14px) | Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for | |---|---|---|---|---|---|---|---| | display | 80px | 400 | 1.05 | -0.037em | uppercase | Kmr Waldenburg | Oversized uppercase hero and major brand statements. | | h1 | 64px | 400 | 1 | -0.075em | uppercase | Kmr Waldenburg | Large uppercase section headlines and campaign statements. | | h2 | 32px | 400 | 1.1 | -0.05em | — | Kmr Waldenburg | Secondary section headings and prominent content titles. | | h3 | 24px | 400 | 1.1 | -0.017em | uppercase | Kmr Waldenburg | Compact uppercase card or subsection headings. | | h4 | 20px | 300 | 1 | 0 | — | Editorialnew | Light editorial supporting headings beside display text. | | body | 14px | 300 | 1 | 0 | — | Editorialnew | Short explanatory copy and supporting editorial text. | | caption | 12px | 400 | 1.5 | 0 | — | Kmr Waldenburg | Small metadata, portfolio labels, and card details. | | nav | 14px | 400 | 1 | 0 | — | Kmr Waldenburg | Header links and discovery-call interface text. | ## Spacing & layout - Base unit **8px**, density **comfortable**. - Scale (most used values): 2, 3, 4, 8, 12, 16, 24, 29, 32, 48 px. - Section rhythm 48px · element gap 8px · card padding 12px · max content width 792px. Use broad, immersive bands with considerable negative space, then concentrate portfolio work into a tightly arranged card grid. The hero and credibility statements are centered, while portfolio tiles vary in size and composition. Keep copy constrained to a measured maximum content width of 792px, with comfortable spacing and clear separation between blocks. The measured base spacing unit is 8px; use its supplied scale for rhythm rather than introducing new spacing values. Dark bands dominate, with a pale portfolio gallery acting as a major visual pause. ## Shape & elevation - Radius: button `2px` · card `14px` · link `8px` · xs `2px` · sm `8px` · md `14px` - Shadow `inset` (card): `rgba(255, 255, 255, 0.2) 0px 2px 5px 0px inset` The interface is mostly flat: section changes come from tonal shifts and large areas of color, not stacked shadows. Define portfolio cards with fine charcoal borders and use restrained layering or dark fades to support labels over imagery. The measured inset white highlight on cards is subtle; avoid adding broad drop shadows or raised UI surfaces. ## Imagery Treat project work as the main source of visual variety: use a collage of real brand and web-design previews, including interface screens and expressive campaign artwork. Preserve varied image color and composition inside the portfolio tiles rather than forcing the entire page into a uniform tint. The hero uses oversized, low-contrast geometric forms and vivid red circular accents as graphic atmosphere. Keep imagery cropped to feel immersive, with labels anchored clearly over or beside it. ## Components ### Header and discovery CTA Minimal dark header with a small white brand mark and a right-aligned outlined DISCOVERY CALL button; use a thin #535353 border and restrained interface typography. ### Hero statement Center the short agency identifier above a two-line, oversized uppercase headline. Pair the geometric sans with smaller editorial words, and use atmospheric dark forms with sparse red accents. ### Brand transition band A full-width gray visual interlude carries a large, high-contrast brand graphic; keep supporting interface elements out of the way. ### Portfolio gallery Place project tiles on a #f3efef gallery surface, using a compact, varied grid of image-led previews with clear labels and restrained borders. ### Portfolio links Use concise uppercase labels such as PORTFOLIO and HOW WE WORK over dark surfaces or image fades; keep link treatments visually quiet. ### Credibility statement Center a short uppercase claim on a pure-black band, with small editorial framing words and ample surrounding negative space. ### Investor metric cards Arrange four outlined dark cards in a row, with a compact value, investor identity, and small portfolio-company caption. ### Measured component styles - **Primary button** (“DISCOVERY CALL DISCOVERY CALL”): transparent background · text #ffffff · border 1px solid #535353 · radius 2px · padding 0px 12px · 400 14px Kmr Waldenburg - **Link** (“PORTFOLIO”): background #0d0d0d · text #ffffff · radius 8px · padding 0px · 400 14px Kmr Waldenburg - **Card** (“$12B 7 Portfolio companies supported”): transparent background · text #ffffff · border 1px solid #1f1f1f · radius 14.4px · padding 11.5px · 400 14px Kmr Waldenburg · uppercase · shadow rgba(255, 255, 255, 0.2) 0px 2px 5px 0px inset - **Navigation item** (“AGENCY CAPABILITIES ENTERPRISE CULTURE A”): transparent background · text #fcfcfc · radius 0px · padding 0px · 400 14px Kmr Waldenburg ## Do - Keep the main canvas near black and let white type carry the hierarchy. - Use uppercase geometric sans for major statements and navigation. - Pair large sans headlines with restrained editorial supporting text. - Reserve red for occasional visual signals and selected artwork. - Use the pale gallery as a deliberate break in the dark sequence. - Separate cards with fine borders instead of strong shadows. ## Don't - Do not fill every section with the accent red. - Do not replace the dark canvas with a generic light interface. - Do not make every heading the same size or typographic voice. - Do not flatten portfolio artwork into a single monochrome treatment. - Do not crowd the hero with navigation, copy, or interface controls. - Do not add heavy shadows, glossy effects, or decorative UI clutter. ## Agent prompt Build a new SVZ-style agency page around a near-black #080808 canvas with pure-black #000000 bands and restrained #0d0d0d panels. Use Studio White #ffffff for oversized uppercase geometric sans headlines, tight tracking, and crisp navigation; pair it with light editorial supporting copy. Keep Signal Red #fe1e34 rare—an accent in a small graphic, link, or selected project detail, not a large interface fill. Create generous cinematic sections, centered statements, and a varied image-led portfolio grid. A Gallery Ivory #f3efef block can break the dark rhythm and frame project previews. Use Hairline Charcoal #1f1f1f borders, simple outlined calls to action, and subtle card layering. Preserve open negative space, keep content widths controlled, and let real project imagery provide most of the page’s color and texture. ## Page sections (top to bottom) | # | Type | Layout | UX patterns | UI patterns | |---|---|---|---|---| | 1 | hero | Full-height dark canvas with a centered, stacked headline and minimal header controls. | Discovery call link, Scroll invitation | Oversized uppercase type, Low-contrast geometric forms, Red graphic accents | | 2 | other | Full-width gray visual band with a centered oversized brand graphic. | Visual transition | Mid-gray surface, Large black wordmark | | 3 | feature-split | Dark two-column content with a compact services list and supporting studio statement. | How-we-work link | Near-black canvas, Two-column composition, Quiet link styling | | 4 | gallery | Pale full-width surface holding a varied, tightly arranged portfolio tile grid. | Portfolio navigation, Work-detail links | Image-led tiles, Mixed tile sizes, Dark fades and labels | | 5 | hero | Centered headline on a pure-black band with generous vertical breathing room. | Credibility statement | White uppercase type, Small editorial framing text, Black canvas | | 6 | stats | Four compact metric cards aligned in a row on a black background. | Investor proof points | Thin charcoal borders, Inset card highlight, Small supporting captions | ## Source CSS custom properties (selected) ```css --text-color--text-primary: #f3efef; --link-color--link-primary: #f3efef; --light-mode--background: #f3efef; --border-color--border-primary: white; --light-mode--text: #0d0d0d; --brand--main-red: #fe1e34; --brand--neige: #f3efef; --base-color-neutral--black: #080808; --base-color-neutral--white: white; --base-color-brand--black: #080808; --dark-mode--text: white; --brand--grey: #6d6d6d; --background-color--background-secondary: #eee; --background-color--background-alternate: #080808; --link-color--link-alternate: white; --background-color--background-primary: #0d0d0d; --background-color--background-tertiary: #aaa; --light-mode--color: #f3efef73; --background-color--background-success: #ecfdf3; --text-color--text-success: #027a48; --background-color--background-error: #fef3f2; --text-color--text-error: #b42318; --base-color-brand--white: #f3efef; --dark-mode--background: #0d0d0d; --light-mode--background-secondary: white; --brand--grey-90: #262525; --light-mode--border: #0d0d0d1a; --dark-mode--border: #ffffff1a; --brand--dark-red: #bc2c20; ``` --- 本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 Generated by Design DNA · https://four.wiralomi.com/style/svz-io