--- title: "Quin design system" variant: extended source: https://www.heyquin.io/ captured_at: 2026-10-12 theme: light industry: ai generator: Design DNA (https://four.wiralomi.com/style/heyquin-io) ai_generated: true ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content" --- # Quin · Design System > A warm paper canvas for a capable digital assistant **Theme:** light · **Industry:** ai · **Source:** https://www.heyquin.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._ Quin pairs a restrained, paper-like palette with oversized sans-serif headlines and vivid product imagery. Its long homepage alternates quiet editorial sections with saturated yellow, sky-blue, and dark bands to make product benefits and conversion points easy to scan. ## North star Keep the paper-warm canvas and crisp, square-edged grid consistent, using saturated color bands to signal important actions and shifts in content. ## Overview The page is built on a warm ivory canvas rather than pure white, with near-black typography and muted paper-toned borders establishing a calm editorial baseline. Signal Yellow marks the announcement strip, primary trial actions, labels, and full-width benefit sections; Light Sky Blue appears as a secondary emphasis, especially in a customer-story band and small interface accents. Large Instrument Sans headlines are centered in the hero and used with concise supporting copy, while Geist Mono handles uppercase navigation, eyebrow labels, and button text. The layout sits within a measured 1278px maximum width, uses visible column divisions and fine hairlines, and alternates spacious headline-led areas with denser grids, product imagery, and dark pricing or resource sections. Photography and interface mockups are framed as broad, rectangular panels, often set against warm wood tones. Components remain flat and square-edged; contrast and section color, rather than shadows or rounded cards, organize the experience. ## Colors | Name | Hex | Token | Group | Role | |---|---|---|---|---| | Soft Parchment | `#d5d0c1` | `--color-soft-parchment` | surface | Muted testimonial-card fill and occasional subdued text on dark surfaces. | | Carbon Ink | `#141414` | `--color-carbon-ink` | brand | Primary text, navigation, dark resource and pricing bands, and dark CTA backgrounds. | | Warm Paper | `#fffcf2` | `--color-warm-paper` | surface | Main page canvas, light cards, and alternate text on dark sections. | | Signal Yellow | `#f7cf49` | `--color-signal-yellow` | accent | Announcement bar, trial buttons, labels, and full-width benefits and closing CTA bands. | | Linen | `#f0ecdf` | `--color-linen` | surface | Secondary section backgrounds, integration band, buttons, and pale borders. | | Sky Blue | `#a9e1ff` | `--color-sky-blue` | accent | Customer-story section and small interface or decorative highlights. | | Olive Ash | `#68655b` | `--color-olive-ash` | neutral | Subtle section details and subdued border-like marks; not a primary brand field. | | Graphite Gray | `#545454` | `--color-graphite-gray` | neutral | Muted links, navigation text, and the gray Quin-replaces comparison strip. | | Roasted Umber | `#492812` | `--color-roasted-umber` | brand | Full-width talk-to-Quin section and dark brown interface or button accents. | | Soft Black | `#222222` | `--color-soft-black` | neutral | Secondary dark heading and body text where near-black is softened. | | Stone Taupe | `#a19c8c` | `--color-stone-taupe` | neutral | Low-emphasis section details and border treatments. | | Muted Azure | `#93c2dc` | `--color-muted-azure` | accent | Sparse blue accent detail; secondary to the more visible light-blue brand accent. | | Antique Gold | `#d5b341` | `--color-antique-gold` | accent | Minor gold-toned border or interface detail, not a dominant section color. | | Weathered Oak | `#9c8a79` | `--color-weathered-oak` | neutral | Minor warm detail, likely from imagery or restrained section ornament. | ### Semantic aliases `--color-canvas` → `#fffcf2` (Warm Paper) · `--color-surface` → `#141414` (Carbon Ink) · `--color-surface-2` → `#f0ecdf` (Linen) · `--color-surface-3` → `#492812` (Roasted Umber) · `--color-surface-4` → `#d5d0c1` (Soft Parchment) · `--color-text` → `#141414` (Carbon Ink) · `--color-text-muted` → `#d5d0c1` (Soft Parchment) · `--color-text-subtle` → `#fffcf2` (Warm Paper) · `--color-border` → `#f0ecdf` (Linen) · `--color-accent` → `#f7cf49` (Signal Yellow) · `--color-accent-2` → `#a9e1ff` (Sky Blue) · `--color-accent-3` → `#93c2dc` (Muted Azure) ### Contrast (WCAG 2.x) | Text | Background | Ratio | Level | |---|---|---|---| | `#141414` | `#fffcf2` | 17.95:1 | AAA | | `#141414` | `#f0ecdf` | 15.59:1 | AAA | | `#141414` | `#492812` | 1.4:1 | fail | | `#d5d0c1` | `#fffcf2` | 1.5:1 | fail | | `#d5d0c1` | `#141414` | 11.95:1 | AAA | | `#d5d0c1` | `#f0ecdf` | 1.3:1 | fail | | `#d5d0c1` | `#492812` | 8.54:1 | AAA | | `#fffcf2` | `#141414` | 17.95:1 | AAA | | `#fffcf2` | `#f0ecdf` | 1.15:1 | fail | | `#fffcf2` | `#492812` | 12.82:1 | AAA | ## Typography | Family | Token | Source | Weights | Role | Free substitute | |---|---|---|---|---|---| | Instrument Sans Variable | `--font-body` | webfont | 400, 500 | Display and interface sans for headings, body copy, links, and buttons. | Inter | | Geist Mono | `--font-mono` | webfont | 400 | Monospaced uppercase navigation, eyebrow labels, captions, and compact CTA text. | IBM Plex Mono | - **Instrument Sans Variable:** Use measured weights 400 and 500; large headlines have tight negative tracking, with sentence case for display and body. - **Geist Mono:** Use weight 400, uppercase treatment, and visibly expanded tracking for small utility text. ### Type scale — Augmented Fourth (ratio ≈ 1.431, base 16px) | Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for | |---|---|---|---|---|---|---|---| | display | 96px | 500 | 1.1 | -0.033em | — | Instrument Sans Variable | Oversized hero or campaign headline. | | h1 | 56px | 500 | 1.1 | -0.023em | — | Instrument Sans Variable | Primary page and major section headings. | | h2 | 44px | 500 | 1.25 | -0.018em | — | Instrument Sans Variable | Section headlines and strong customer statements. | | h3 | 32px | 500 | 1.25 | -0.002em | — | Instrument Sans Variable | Feature and card headings. | | h4 | 28px | 500 | 1.25 | -0.003em | — | Instrument Sans Variable | Smaller card or feature titles. | | body | 16px | 400 | 1.5 | 0 | — | Instrument Sans Variable | Explanatory copy, descriptions, and testimonials. | | caption | 14px | 400 | 1 | 0.086em | uppercase | Geist Mono | Small uppercase labels and metadata. | | button | 12px | 400 | 1 | 0.1em | uppercase | Geist Mono | Compact uppercase CTA labels. | | nav | 12px | 400 | 1 | 0.107em | uppercase | Geist Mono | Uppercase utility navigation links. | | eyebrow | 14px | 400 | 1 | 0.086em | uppercase | Geist Mono | Section category labels above headings. | | code | 14px | 400 | 1 | 0.086em | uppercase | Geist Mono | Compact mono-style technical or metadata label. | OpenType features in use: `"kern", "ss01", "ss03", "ss05", "ss07", "ss08", "ss12"`. ## Spacing & layout - Base unit **8px**, density **compact**. - Scale (most used values): 1, 6, 8, 12, 16, 24, 28, 32, 40, 48, 64, 96 px. - Section rhythm 32px · element gap 8px · card padding 8px · max content width 1278px. Use a centered page frame capped at the measured 1278px, with thin vertical rules and broad, clearly separated section bands. The hero is centered and spacious above a full-width product visual; subsequent areas alternate left-aligned feature layouts, multi-column task grids, split testimonial panels, logo rows, and dark or saturated full-bleed sections. Measured spacing is based on an 8px unit and a compact density; retain strong breathing room around major headlines while keeping utility grids tighter. Mix centered and start-aligned headings according to each section’s editorial purpose. ## Shape & elevation - No box shadows measured: the page is flat. - Motion: standard transition `0.2s ease` on interactive elements. The design is predominantly flat, with square edges and no measured shadow system or radius scale. Separate content through background bands, thin borders, hairlines, and grid rules rather than floating cards. Layered product photography and interface mockups provide the main depth; keep buttons and panels crisp, avoiding soft, elevated SaaS-card styling. ## Imagery Use large rectangular product screenshots and device mockups alongside warm, natural workplace photography. Screens and interface captures should read clearly as real product evidence, framed with minimal decoration and often placed over wood-toned surfaces. Small app logos and interface icons support the integration story. The page’s strongest visual colors are the measured section backgrounds; do not treat photographic wood, clothing, or mockup content as core brand palette. ## Components ### Announcement strip A full-width Signal Yellow (#f7cf49) message bar with compact copy and a small uppercase, mono-style learn-more link. ### Utility navigation Brand mark at left and compact uppercase Geist Mono links across the top; use fine rules to define the header boundary. ### Primary CTA Square-cornered button with uppercase Geist Mono text; the free-trial action uses Signal Yellow (#f7cf49) with Carbon Ink (#141414) text. ### Product hero visual Broad, rectangular interface or device imagery below the headline and CTA row, presented as a product demonstration rather than a decorative card. ### Feature grid A compact multi-column set of assistant tasks with small line icons and short labels, followed by a larger split product-and-copy panel. ### Testimonial panel Large customer quote in a contrasting pale blue band, paired with a rectangular product visual and concise supporting metrics. ### Pricing panel Dark, flat pricing area with yellow emphasis for price and trial actions, compact benefit rows, and a separate enterprise strip. ### Measured component styles - **Primary button** (“Taking client relationships from fixing ”): background #141414 · text #d5d0c1 · radius 0px · padding 28px 40px · 400 16px Instrument Sans Variable - **Secondary button** (“TRY QUIN FREE”): background #f7cf49 · text #141414 · radius 0px · padding 24px · 400 14px Geist Mono · uppercase - **Link** (“In your inbox”): background #fffcf2 · text #545454 · radius 0px · padding 24px · 400 16px Instrument Sans Variable - **Card** (“Quin replaces”): background #545454 · text #fffcf2 · radius 0px · padding 16px 0px · 400 16px Instrument Sans Variable - **Navigation item** (“HOW QUIN WORKS”): transparent background · text #545454 · radius 0px · padding 0px · 400 12px Geist Mono · uppercase ## Do - Use Warm Paper (#fffcf2) as the primary canvas. - Reserve Signal Yellow (#f7cf49) for clear emphasis and conversion moments. - Use Carbon Ink (#141414) for strong text and dark section bands. - Alternate background colors to distinguish major content sections. - Set utility labels and navigation in tracked uppercase mono. - Frame product screens and photography as broad rectangular panels. ## Don't - Do not introduce colors outside the measured palette. - Do not use rounded, pill-shaped buttons or cards. - Do not add drop shadows as a default elevation treatment. - Do not turn every section into a centered card grid. - Do not use mono typography for long body paragraphs. - Do not mistake photographic wood tones for brand surface colors. ## Agent prompt Build a new Quin-style SaaS page with a calm Warm Paper canvas (#fffcf2), Carbon Ink text (#141414), and crisp square-edged sections. Use Signal Yellow (#f7cf49) for the main conversion action and selected full-width emphasis; introduce Linen (#f0ecdf), Sky Blue (#a9e1ff), and Roasted Umber (#492812) as distinct section bands rather than scattered decoration. Set large, tightly tracked Instrument Sans-like headings and readable body copy; use tracked uppercase mono for navigation, labels, and buttons. Organize content in a centered frame with thin grid rules, alternating split layouts and compact feature grids. Use clear rectangular product imagery and authentic workplace photography. Keep surfaces flat: rely on color, hairlines, and imagery for hierarchy, not rounded cards or shadows. ## Page sections (top to bottom) | # | Type | Layout | UX patterns | UI patterns | |---|---|---|---|---| | 1 | hero | Centered headline and copy above a full-width product visual, with a right-aligned CTA row. | Product introduction, Demo and free-trial actions | Announcement strip, Large centered heading, Product mockup | | 2 | feature-grid | Start-aligned heading followed by a four-column task grid and a split feature panel. | Task discovery, Explore feature details | Eyebrow label, Icon-and-label grid, Split image and copy | | 3 | stats | Quote and metrics on the left, product imagery on the right in a light-blue band. | Customer proof, Outcome metrics, Demo action | Large quote, Image split, Metric captions | | 4 | integrations | Centered heading above a horizontal grid of integration logos and a see-all link. | Integration discovery, See all integrations | Linen section band, Logo row, Hairline dividers | | 5 | feature-split | Three-column yellow band with a large photo beside explanatory benefit content. | Benefit scanning, Progressive details | Full-width yellow background, Photo and text split, Stacked benefit rows | | 6 | content-feed | Centered introduction above a dense, multi-column list of article links on black. | Browse resources, Open editorial content | Dark section, Mono eyebrow, Hairline content grid | | 7 | testimonials | Centered intro above a four-column set of pale testimonial cards. | Compare customer perspectives, Read testimonials | Quote cards, Subtle dividers, Customer attribution | | 8 | product-showcase | Centered intro, channel selector row, and large device image on a deep brown band. | Select communication channel, View product in context | Dark umber section, Tabbed channel row, Large device visual | | 9 | feature-grid | Start-aligned heading, central interface image, and security points arranged around it. | Review security assurances, Request a demo | Certification labels, Central product image, Paired CTAs | | 10 | comparison | Short gray full-width strip with a right-aligned heading and a compact list of alternatives. | Recognize existing tools, Compare alternatives | Graphite background, Compact text list | | 11 | pricing | Centered pricing introduction on a full-width dark section. | Understand trial offer, Continue to plan details | Dark background, Yellow eyebrow, Centered copy | | 12 | pricing | Single-column dark pricing module with a prominent price, range control, and benefit list. | Estimate workload, Review plan value, Start free trial | Price highlight, Slider, Benefit rows, Yellow CTA | | 13 | pricing | A low, full-width enterprise strip with summary, automation benefits, and contact link. | Review enterprise fit, Contact sales | Dark strip, Inline benefits, Outlined contact action | | 14 | cta | Two-column closing band in yellow, with centered headline and product imagery. | Request a demo, Start free trial | Full-width yellow background, Product image, Paired CTAs | ## Source CSS custom properties (selected) ```css --background-colors--background-primary: #fffcf2; --typography--default-font: "Instrument Sans Variable",Arial,sans-serif; --brand-colors--black: #141414; --typography--display-font: "Instrument Sans Variable",Arial,sans-serif; --link-colors--link-primary: #545454; --text-colors--text-primary: #141414; --brand-colors--paper-400: #f0ecdf; --brand-colors--paper-700: #68655b; --brand-colors--faded-paper-border: #f0ecdf80; --brand-colors--paper-500: #d5d0c1; --brand-colors--paper-600: #a19c8c; --brand-colors--faded-black: #14141426; --border-colors--border-secondary: #141414; --typography--eyebrow-font: "Geist Mono",sans-serif; --text-colors--text-alternate: #fffcf2; --brand-colors--light-blue: #a9e1ff; --brand-colors--yellow: #f7cf49; --neutral-colors--transparent: #fff0; --neutral-colors--black: black; --base-color-brand--gray-alpha-10: #2e2e2e1a; --brand-colors--paper-100: #fffcf2; --brand-colors--wood: #492812; --brand-colors--white: white; --neutral-colors--white: white; --system-colors--error-red-light: #fef3f2; --text-colors--text-error: #b42318; --background-colors--background-secondary: #f0ecdf; --border-colors--border-primary: #f0ecdf; --background-colors--background-success: #ecfdf3; --text-colors--text-success: #027a48; --background-colors--background-error: #fef3f2; --base-color-brand--red: #ce652a; --brand-colors--graphite: #545454; --base-color-brand--yellow-light: #facc73; --base-color-brand--red-light: #e88249; --rounded-3xl: 24px; --text-colors--text-secondary: #545454; --neutral-colors--neutral-lightest: #f8f8f8; --radius--rounded-full: 999px; --base-color-brand--peach: #fcf4ef; ``` --- 本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 Generated by Design DNA · https://four.wiralomi.com/style/heyquin-io