--- title: "Vetric design system" variant: extended source: https://www.vetric.io/ captured_at: 2026-10-12 theme: light industry: saas generator: Design DNA (https://four.wiralomi.com/style/vetric-io) ai_generated: true ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content" --- # Vetric · Design System > Editorial clarity meets a softer intelligence aesthetic. **Theme:** light · **Industry:** saas · **Source:** https://www.vetric.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._ Vetric pairs high-contrast editorial typography with an unusually light, pastel-tinted canvas. The page moves from a spacious product promise through concise capability and proof sections to a characterful illustrated closing call to action. ## North star Keep serious product messaging crisp and editorial, while using sparse pastel light and generous white space to soften the experience. ## Overview The page builds a calm, trustworthy identity from a white canvas, near-black text, and soft ambient colour rather than dense interface chrome. A centered announcement strip in vivid blue sits above restrained navigation. The hero uses a large Noto Serif headline and a compact dark CTA, with a diffuse blue-to-warm pastel glow and a faceted iridescent emblem behind it. Manrope handles navigation, explanatory copy, labels, and metrics; serif headings add an editorial, human tone to a serious intelligence product. Below the hero, generous white space separates small outlined feature cards, a four-column solutions row, pastel metric tiles, and a numbered process strip. Accent blue, pink, and yellow distinguish links and data but remain supporting details. The ending repeats the soft luminous colour field around a centered CTA, then transitions to a compact footer with a playful illustrated character. Borders are delicate; the overall composition feels flat and open. ## Colors | Name | Hex | Token | Group | Role | |---|---|---|---|---| | Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant canvas across the hero, content sections, and footer; preserves the page’s open, bright feel. | | Midnight Ink | `#090a1e` | `--color-midnight-ink` | brand | Primary headings, navigation, body text, and the dark primary CTA. | | Slate Text | `#444557` | `--color-slate-text` | neutral | Muted supporting copy and secondary explanatory text. | | Quiet Periwinkle | `#8496b8` | `--color-quiet-periwinkle` | neutral | Fine card outlines and subtle interface borders. | | Soft Divider | `#e0e0e0` | `--color-soft-divider` | neutral | Minor hairline and structural border detail; secondary to the blue-gray card outline. | | Cloud Blue | `#f1f5ff` | `--color-cloud-blue` | surface | Pale blue card surface and a supporting cool tint in the atmospheric hero artwork. | | Mint Haze | `#eaffed` | `--color-mint-haze` | surface | Soft green metric-card surface, used as a light data highlight. | | Blush Veil | `#fff3fb` | `--color-blush-veil` | surface | Pink-tinted metric surface, paired with the pink continuous-visibility figure. | | Lemon Mist | `#fffdea` | `--color-lemon-mist` | surface | Pale yellow metric-card surface that keeps the data tiles gentle rather than loud. | | Signal Blue | `#2969ff` | `--color-signal-blue` | accent | Announcement banner, research link treatment, and occasional blue highlights. | | Signal Gold | `#ffd363` | `--color-signal-gold` | accent | Small metric and illustration accent; not a dominant page background colour. | | Iris Pink | `#f75cc3` | `--color-iris-pink` | accent | Pink metric emphasis and decorative colour within the iridescent hero artwork. | ### Semantic aliases `--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f1f5ff` (Cloud Blue) · `--color-surface-2` → `#eaffed` (Mint Haze) · `--color-surface-3` → `#fff3fb` (Blush Veil) · `--color-surface-4` → `#fffdea` (Lemon Mist) · `--color-text` → `#090a1e` (Midnight Ink) · `--color-text-muted` → `#444557` (Slate Text) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#8496b8` (Quiet Periwinkle) · `--color-accent` → `#2969ff` (Signal Blue) · `--color-accent-2` → `#ffd363` (Signal Gold) · `--color-accent-3` → `#f75cc3` (Iris Pink) ### Contrast (WCAG 2.x) | Text | Background | Ratio | Level | |---|---|---|---| | `#090a1e` | `#ffffff` | 19.56:1 | AAA | | `#090a1e` | `#f1f5ff` | 17.92:1 | AAA | | `#090a1e` | `#eaffed` | 18.65:1 | AAA | | `#090a1e` | `#fff3fb` | 18.13:1 | AAA | | `#444557` | `#ffffff` | 9.4:1 | AAA | | `#444557` | `#f1f5ff` | 8.61:1 | AAA | | `#444557` | `#eaffed` | 8.96:1 | AAA | | `#444557` | `#fff3fb` | 8.71:1 | AAA | | `#ffffff` | `#f1f5ff` | 1.09:1 | fail | | `#ffffff` | `#eaffed` | 1.05:1 | fail | ### Gradients - `linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 65%)` - `linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 95%)` - `linear-gradient(90deg, rgb(247, 92, 195), rgb(41, 105, 255))` - `linear-gradient(90deg, rgb(41, 105, 255), rgb(255, 211, 99))` ## Typography | Family | Token | Source | Weights | Role | Free substitute | |---|---|---|---|---|---| | Manrope | `--font-body` | webfont | 400, 600, 500 | Navigation, body copy, captions, labels, buttons, and supporting product information. | DM Sans | | Noto Serif | `--font-display` | webfont | 400, 300 | Display and section headings, including the large centered hero statement. | Noto Serif | - **Manrope:** Mostly regular weight, with medium or semibold emphasis for key actions; compact, slightly tight tracking and natural sentence case. - **Noto Serif:** Regular or light editorial serif; large headings use tight negative tracking and sentence-case phrasing. ### Type scale — Augmented Fourth (ratio ≈ 1.406, base 14px) | Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for | |---|---|---|---|---|---|---|---| | display | 77px | 400 | 1.06 | -0.05em | — | Noto Serif | Editorial display headline and major brand statements. | | h1 | 70px | 500 | 0.79 | -0.06em | — | Manrope | Primary hero headline, measured in Manrope but visually serif-led in the screenshot. | | h2 | 63px | 400 | 1.33 | -0.05em | capitalize | Noto Serif | Large section headings, including the outcomes and process sections. | | h3 | 49px | 400 | 1.43 | -0.04em | — | Noto Serif | Subsection and card-group headings. | | h4 | 35px | 400 | 1.2 | -0.04em | — | Noto Serif | Smaller feature titles and supporting editorial headings. | | body | 14px | 400 | 1.5 | -0.02em | — | Manrope | Feature descriptions, section copy, and CTA supporting text. | | caption | 12.5px | 400 | 1.5 | 0 | — | Manrope | Compact labels, footnotes, and small supporting annotations. | | nav | 14px | 400 | 1.5 | -0.02em | — | Manrope | Header navigation links and compact menu items. | ## Spacing & layout - Base unit **1px**, density **comfortable**. - Scale (most used values): 4, 7, 9, 11, 14, 18, 19, 21, 25, 26, 28, 29, 35, 42, 44, 56 px. - Section rhythm 42px · element gap 4px · card padding 19px · max content width 1260px. Use a centered content frame with a measured page max width of 1260px and a comfortable, open density. The first viewport centers its headline, supporting line, and CTA beneath a slim announcement bar and compact navigation. Keep section headings centered where the content is grouped; use four columns for the solutions and process steps, and a two-part layout for the results section. The section rhythm is spacious, with a measured 42px section gap and mostly white bands. Let the hero and closing CTA breathe rather than filling every region. ## Shape & elevation - Radius: button `7px` · card `25px` · xs `7px` · sm `14px` · md `25px` - No box shadows measured: the page is flat. - Motion: standard transition `0.2s ease` on interactive elements. The page is largely flat: no measured shadows, heavy overlays, or stacked panels. Cards use thin blue-gray outlines and rounded corners, while metric tiles use pale colour fills instead of elevation. Keep the hero artwork visually layered through gradients and transparency, not drop shadows; use delicate hairlines only where they clarify card boundaries. ## Imagery The hero relies on a luminous, faceted geometric emblem rather than photography, set against a diffuse pastel glow. Small icons support the feature cards and solutions row; metric tiles include restrained illustrative details. The closing CTA uses another hazy colour field and a subtle technical pattern. A playful illustrated character appears in the footer. Keep imagery isolated, softly blended into white, and subordinate to the headline and information. ## Components ### Announcement bar A full-width Signal Blue strip above the header, with centered white research-link text and a small arrow. ### Primary navigation Compact white header with the Vetric mark at left and understated Manrope links aligned to the right. ### Hero Centered Noto Serif statement, short Manrope proof line, Midnight Ink CTA with a 7px radius, and softly glowing faceted artwork. ### Feature cards Concise capability cards with a white fill, thin #8496b8 outline, rounded corners, small icon, and compact supporting copy. ### Solutions row Four horizontally arranged use-case items, each led by a simple outlined icon and followed by a concise title and description. ### Metric tiles A grouped set of four pastel data cards using blush, blue, yellow, and mint surfaces with oversized colour-coded figures. ### Closing CTA and footer Centered closing headline and dark button over a pastel glow; compact footer includes company links and a character illustration. ### Measured component styles - **Primary button** (“See what you've been missing”): background #090a1e · text #ffffff · border 1px solid · radius 7px · padding 10.5px 28px · 600 14px Manrope - **Link** (“New Vetric Research! Read The Full Luxur”): background #2969ff · text #ffffff · radius 0px · padding 7px · 400 14px Manrope - **Card** (“See Inside the Video Surface the threats”): transparent background · text #090a1e · border 1px solid #8496b8 · radius 14px · padding 19.3px · 400 14px Manrope - **Navigation item** (“Use Cases”): transparent background · text #090a1e · radius 0px · padding 0px · 400 14px Manrope ## Do - Keep the canvas predominantly white. - Use Noto Serif for prominent editorial headings. - Set navigation and supporting copy in Manrope. - Center the hero headline and primary CTA. - Reserve vivid blue for the announcement and select links. - Use pastel surfaces to distinguish metrics and select cards. - Keep card borders delicate and flat. ## Don't - Do not make the page feel like a dense dashboard. - Do not replace the white canvas with a saturated section background. - Do not use heavy shadows to separate cards. - Do not let decorative gradients compete with the headline. - Do not use pink or yellow as dominant interface colours. - Do not crowd the hero with extra copy or controls. ## Agent prompt Build a new Vetric-style page with an airy white canvas (#ffffff), Midnight Ink text and CTA (#090a1e), and compact Manrope navigation and body copy. Use Noto Serif for large editorial headings, keeping their tracking tight and their line breaks deliberate. Make the hero centered and spacious, with one clear supporting sentence and a dark rounded CTA. Add diffuse pastel light and restrained geometric illustration rather than stock photography. Use Signal Blue (#2969ff) sparingly for announcements and links; reserve Blush Veil (#fff3fb), Cloud Blue (#f1f5ff), Mint Haze (#eaffed), and Lemon Mist (#fffdea) for select cards or metrics. Organize content in clean columns with generous white separation, fine #8496b8 borders, and no heavy shadows. Keep decorative elements secondary to readable product messaging. ## Page sections (top to bottom) | # | Type | Layout | UX patterns | UI patterns | |---|---|---|---|---| | 1 | hero | Announcement strip and compact navigation above a centered headline, CTA, and atmospheric artwork. | research announcement link, single primary CTA, trust proof line | blue announcement bar, serif headline, pastel glow, faceted emblem | | 2 | feature-grid | Sparse, staggered capability cards with broad white space between content groups. | capability overview, short feature descriptions, icon-led cards | thin outlined cards, small icons, editorial headings | | 3 | feature-grid | Centered heading above a four-column row of use cases and understated controls. | use-case browsing, concise descriptions, next-step affordance | outlined line icons, divided columns, compact typography | | 4 | stats | Section heading on the left and four pastel metric tiles arranged as a compact block on the right. | proof through metrics, colour-coded figures | soft tinted tiles, large numeric labels, minimal card framing | | 5 | how-it-works | Centered heading followed by four numbered steps in a horizontal sequence. | numbered process, left-to-right progression, brief explanatory steps | fine connecting rule, coloured numerals, spacious columns | | 6 | cta | Full-width closing visual with a centered headline and compact dark CTA. | closing conversion prompt, single booking action | soft pastel glow, faint technical pattern, centered serif heading | | 7 | footer | Compact multi-column footer with brand details, company and legal links, and an illustration. | company navigation, legal navigation, contact details | small text links, brand mark, illustrated character | ## Source CSS custom properties (selected) ```css --typography--primary-font: Manrope,Arial,sans-serif; --color--black: #090a1e; --typography--secondary-font: "Noto Serif","Times New Roman",sans-serif; --_responsive---spacing--64px: 4rem; --_responsive---spacing--32px: 2rem; --_responsive---spacing--8px: .5rem; --_responsive---spacing--128px: 8rem; --_responsive---spacing--192px: 12rem; --_responsive---spacing--96px: 6rem; --_responsive---spacing--48px: 3rem; --_responsive---spacing--80px: 5rem; --_responsive---spacing--4px: .25rem; --_responsive---spacing--2px: .125rem; --_responsive---spacing--16px: 1rem; --color--blue: #2969ff; --text-color--text-alternate: #fff; --color--blue-dark: #080331; --background-color--background-success: #cef5ca; --text-color--text-success: #114e0b; --color--pink: #f75cc3; --color--blue-light: #f1f5ff; --border-color--border-primary: #eee; --text-color--text-secondary: #222; --background-color--background-primary: #000; --background-color--background-tertiary: #dd23bb; --background-color--background-error: #f8e4e4; --text-color--text-error: #3b0b0b; --color--white: white; --border-color--border-alternate: #222; --text-color--text-primary: #000; --color--gray: #f3f3f3; --color--gray-dark: #d9d9d9; --background-color--background-warning: #fcf8d8; --text-color--text-warning: #5e5515; --_responsive---spacing--20px: 1.25rem; --color--off-white: #f8f8f8; --_responsive---spacing--40px: 2.5rem; --color--transparent-blue: #8496b8; --_responsive---spacing--10px: .625rem; --color--purple: #444557; ``` --- 本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 Generated by Design DNA · https://four.wiralomi.com/style/vetric-io