--- title: "Cake Equity design system" variant: extended source: https://www.cakeequity.com/ captured_at: 2026-10-12 theme: light industry: saas generator: Design DNA (https://four.wiralomi.com/style/cakeequity-com) ai_generated: true ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content" --- # Cake Equity · Design System > Editorial calm with a vivid equity-tech pulse **Theme:** light · **Industry:** saas · **Source:** https://www.cakeequity.com/ · **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._ Cake pairs elegant editorial typography and generous white space with vivid violet calls to action and clear product-interface imagery. The long homepage moves from startup trust signals through alternating product stories to testimonials, FAQs, a human support team, and a dark footer. ## North star Let editorial serif headlines and generous white space lead; reserve vivid violet for clear actions and navigational emphasis. ## Overview The visual identity is led by white space, near-black text, and a distinctive violet accent. White (#ffffff) is the main canvas; pale lavender (#f5f4fb) occasionally separates content, while the footer reverses to Ink (#18161a). Saturated Violet (#4823ff) marks the main calls to action, with softer violet used for category links and labels. Large, light Exposure Light serif headings give the SaaS content an editorial, founder-friendly character; Inter keeps navigation, body copy, and interface details crisp and readable. The opening hero is a balanced two-column composition: headline and concise copy on one side, a team photograph with layered cap-table UI on the other. Across the page, product stories alternate image and text, with logos, portraits, and testimonials providing social proof. Spacious section breaks, restrained hairlines, rounded pills, and a few soft pastel media backdrops keep the dense long-form page composed rather than crowded. ## Colors | Name | Hex | Token | Group | Role | |---|---|---|---|---| | Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, light section backgrounds, and text on dark or violet controls. | | Ink | `#18161a` | `--color-ink` | neutral | Primary heading and body text; also the full-width inverse footer surface. | | Signal Violet | `#4823ff` | `--color-signal-violet` | brand | Primary filled CTA buttons and prominent action emphasis. | | Soft Violet | `#6d67fb` | `--color-soft-violet` | accent | Secondary link text and small category-label accents. | | Lilac Edge | `#bebbff` | `--color-lilac-edge` | accent | Subtle button-edge or media-interface accent; not a dominant page colour. | | Mint Trim | `#ccffc8` | `--color-mint-trim` | semantic | Border detail on the small live-status badge. | | Lavender Mist | `#f5f4fb` | `--color-lavender-mist` | surface | Pale testimonial band and occasional softly tinted content surfaces. | | Quiet Rule | `#dedde4` | `--color-quiet-rule` | neutral | Fine section dividers and understated structural borders. | | Silver Rule | `#e7e7e8` | `--color-silver-rule` | neutral | Additional subtle separators and link or interface borders. | | Live Green | `#078f00` | `--color-live-green` | semantic | Small status text in the live badge, not a primary brand accent. | | Pale Iris | `#ede9ff` | `--color-pale-iris` | surface | Soft lilac backing and gradient colour behind product media. | | Lemon Haze | `#f9fedf` | `--color-lemon-haze` | surface | Pale yellow-green gradient glow around selected product imagery. | | Warm Porcelain | `#fafaf8` | `--color-warm-porcelain` | surface | Subtle warm off-white gradient or section tint. | ### Semantic aliases `--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f4fb` (Lavender Mist) · `--color-surface-2` → `#18161a` (Ink) · `--color-text` → `#18161a` (Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#dedde4` (Quiet Rule) · `--color-accent` → `#4823ff` (Signal Violet) · `--color-accent-2` → `#6d67fb` (Soft Violet) · `--color-on-accent` → `#ffffff` (Gallery White) ### Contrast (WCAG 2.x) | Text | Background | Ratio | Level | |---|---|---|---| | `#18161a` | `#ffffff` | 17.97:1 | AAA | | `#18161a` | `#f5f4fb` | 16.44:1 | AAA | | `#ffffff` | `#f5f4fb` | 1.09:1 | fail | | `#ffffff` | `#18161a` | 17.97:1 | AAA | | `#4823ff` | `#ffffff` | 7.09:1 | AAA | | `#4823ff` | `#f5f4fb` | 6.49:1 | AA | | `#4823ff` | `#18161a` | 2.53:1 | fail | ### Gradients - `radial-gradient(68% 91% at 60% -10%, rgb(237, 233, 255) 0%, rgba(0, 0, 0, 0) 60%), radial-gradient(70% 170% at 105% 105%, rgba(246, 253, 209, 0.7) 0%, rgba(0, 0, 0, 0) 55%), radial-gradient(75% 75% at -5% 105%, rgb(235, ` - `radial-gradient(circle at 0% 100%, rgb(255, 255, 255), rgba(0, 0, 0, 0)), radial-gradient(circle at 0% 0%, rgb(255, 255, 255), rgba(0, 0, 0, 0) 80%), radial-gradient(circle, rgb(250, 250, 248), rgba(0, 0, 0, 0))` ## Typography | Family | Token | Source | Weights | Role | Free substitute | |---|---|---|---|---|---| | Inter | `--font-body` | webfont | 300, 600, 400, 700 | Navigation, body copy, buttons, labels, and compact interface text. | Inter | | Exposure Light | `--font-display` | webfont | 300, 400 | Display and section headlines, giving the page its editorial character. | Cormorant Garamond | - **Inter:** Use mostly light body weights, regular controls, and semibold uppercase eyebrow labels; keep tracking restrained. - **Exposure Light:** Light serif display treatment with tight negative tracking; use sentence case and short, confident line breaks. ### Type scale — Perfect Fourth (ratio ≈ 1.293, base 15.5px) | Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for | |---|---|---|---|---|---|---|---| | display | 56px | 300 | 1 | -0.018em | — | Exposure Light | Large editorial display headline treatment in major hero moments. | | h1 | 44px | 300 | 1 | -0.023em | — | Exposure Light | Primary page headline and prominent section title. | | h2 | 35px | 300 | 1.1 | -0.009em | — | Exposure Light | Major section headings, often centered or paired with feature content. | | h3 | 28px | 300 | 1.1 | -0.011em | — | Exposure Light | Feature and testimonial subheadings. | | h4 | 25.5px | 300 | 1.2 | -0.001em | — | Exposure Light | Smaller feature titles and FAQ questions. | | body | 15.5px | 300 | 1.4 | 0 | — | Inter | Explanatory paragraphs and supporting product copy. | | caption | 14px | 600 | 1.2 | 0.05em | uppercase | Inter | Uppercase compact labels and category captions. | | button | 17px | 400 | 1 | -0.001em | — | Inter | CTA text in rounded primary and secondary buttons. | | nav | 14px | 400 | 1.3 | 0 | — | Inter | Top-level navigation and utility links. | | link | 16px | 300 | 1 | -0.01em | — | Inter | Inline and supporting text links. | | eyebrow | 14px | 600 | 1.2 | 0.05em | uppercase | Inter | Uppercase section identifiers above headings. | ## Spacing & layout - Base unit **2px**, density **comfortable**. - Scale (most used values): 5, 7, 10, 14, 15, 20, 25, 28, 30, 36, 56, 84, 100 px. - Section rhythm 84px · element gap 20px · card padding — · max content width 1296px. The page uses a centered content frame with a measured maximum width of 1296px and a comfortable density. The hero is a left-aligned two-column composition, followed by centered logo and trust bands, then alternating image-and-copy feature splits. Feature groups switch to centered multi-column layouts for audience cards and partner marks. A pale testimonial band and softly tinted FAQ break up the mostly white canvas. Sections breathe with a measured 84px section rhythm and 20px element gap; use these measured values rather than adding arbitrary spacing. ## Shape & elevation - Radius: button `9999px` · media `50%` · badge `9999px` · link `9999px` · xs `10px` · sm `12px` · md `20px` · lg `30px` · pill `9999px` - Shadow `md` (nav): `rgba(0, 0, 0, 0.2) 0px 2px 20px -19px` - Shadow `lg` (text): `rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px` - Shadow `sm` (button): `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px` - Motion: standard transition `0.2s ease` on interactive elements. The interface is mostly flat, relying on white space and fine gray rules rather than cards with heavy shadows. Use thin borders for dividers, outlines, and restrained secondary controls. Layer product UI cards over hero photography or pastel media when needed, while keeping elevation subtle. Buttons and compact navigation may use slight measured shadows, but avoid broad, dramatic depth. ## Imagery Use real, approachable startup-team and support-team photography alongside crisp product screenshots and interface mockups. The hero pairs people with layered cap-table cards; later feature media shows product workflows against soft pastel fields. Use rounded or clipped image framing and keep UI text as part of the screenshot rather than recreating it as decorative illustration. Customer logos, review portraits, and awards act as compact trust signals; pastel greens and lilacs mainly belong to media backdrops and product visuals. ## Components ### Primary CTA Saturated Violet (#4823ff) pill button with white text; measured examples use varied padding and Inter labels. ### Outlined secondary CTA White or transparent pill with a thin violet outline, paired with the filled CTA in hero and lower conversion areas. ### Eyebrow label Compact uppercase Inter semibold label, often violet on a pale lavender pill above a feature heading. ### Feature split Alternating two-column sections pair a product image or UI mockup with a headline, copy, testimonial, and short link list. ### Trust logo band Centered serif heading with a horizontal group of customer or partner marks, kept visually light. ### Testimonial panel Centered Lavender Mist (#f5f4fb) section with a white quote card, attribution, and carousel indicators. ### Status badge Small uppercase live-status pill with green text and a pale green border, used over product media. ### Dark footer Full-width Ink (#18161a) closing area with white brand mark, grouped link columns, address, and trust marks. ### Measured component styles - **Primary button** (“Get started”): background #4823ff · text #ffffff · border 1px solid #4823ff · radius 100px · padding 20px 36px · 400 16.8px Inter - **Secondary button** (“Read story”): background #18161a · text #ffffff · border 1px solid #18161a · radius 100px · padding 15px 30px · 400 16.8px Inter - **Link** (“CAP TABLE MANAGEMENT”): background #f2f1ff · text #6d67fb · radius 50px · padding 7px 20px 5px 20px · 600 14px Inter · uppercase - **Badge** (“MCP NOW LIVE”): background #ebffe9 · text #078f00 · border 1px solid #ccffc8 · radius 50px · padding 5px 10px 5px 25px · 400 11px Inter · uppercase - **Navigation item** (“Product”): transparent background · text #222222 · radius 0px · padding 0px · 400 14px Inter ## Do - Use white as the dominant canvas and preserve generous open space. - Set major headlines in a light editorial serif. - Reserve Signal Violet (#4823ff) for the primary action. - Alternate product imagery and explanatory copy across feature sections. - Use pale lavender bands selectively to distinguish testimonials or FAQ content. - Keep labels, dividers, and controls restrained and readable. ## Don't - Do not turn every section into a boxed card. - Do not use saturated violet as a full-page background. - Do not replace editorial headlines with heavy geometric display type. - Do not crowd the hero with competing actions or decorative copy. - Do not treat illustration-only greens or pastels as dominant brand colours. - Do not add heavy shadows or invented spacing values. ## Agent prompt Build a new Cake Equity page with an airy, editorial SaaS feel. Use Gallery White (#ffffff) as the main canvas and Ink (#18161a) for readable copy; use Signal Violet (#4823ff) for the primary pill CTA and Soft Violet (#6d67fb) for restrained links and labels. Set major headlines in a light serif similar to Exposure Light, with Inter for navigation, body text, controls, and uppercase eyebrows. Keep a centered content frame and comfortable section rhythm. Combine concise copy with authentic team photography and crisp product UI screenshots; alternate media and text in feature sections. Use Lavender Mist (#f5f4fb) sparingly for testimonial or FAQ bands, and soft pastel glows mainly behind product media. Prefer fine hairlines, rounded pills, open space, and subtle layering over card-heavy layouts or strong shadows. ## Page sections (top to bottom) | # | Type | Layout | UX patterns | UI patterns | |---|---|---|---|---| | 1 | hero | Two columns: left-aligned headline and copy beside a large team-photo and product-UI composition. | Primary and secondary CTA, Switching offer, Rating and review proof | Editorial serif headline, Rounded violet CTA, Layered interface cards, Live-status badge | | 2 | logo-cloud | Centered heading above a horizontal row of startup logos. | Customer proof | Centered serif heading, Low-contrast logo row | | 3 | logo-cloud | Centered heading above partner firms organized in several columns and labeled rows. | Partner credibility | Small uppercase row labels, Fine separators, Logo grid | | 4 | stats | Short customer-count statement beside a horizontal row of award badges. | Scale proof, Third-party recognition | Compact headline, Award badge strip | | 5 | feature-split | Two-column product screenshot and copy, with feature links and a customer quote. | Feature discovery, Customer validation | Lavender media backing, Uppercase eyebrow, Link list | | 6 | feature-split | Alternating two-column copy and product mockup. | Scenario modeling, Investor-readiness proof | Pastel media glow, Feature link list, Quote with portrait | | 7 | feature-split | Product checklist media and explanatory copy in a two-column feature row. | Compliance reassurance, Document readiness | Soft blue media field, Compact document UI, Thin separators | | 8 | feature-split | Copy and benefit links alternate with a mobile employee-app mockup. | Employee engagement, Feature discovery | Rounded app media, Eyebrow label, Short link list | | 9 | gallery | Centered heading above five side-by-side audience portrait cards. | Audience browsing | Portrait cards, Small category badges, Rounded image corners | | 10 | testimonials | Full-width pale lavender band with centered intro and a wide quote carousel card. | Social proof, Carousel navigation, Read-story action | White quote panel, Quote mark, Pagination dots | | 11 | feature-grid | Two-column content: an overview and paired CTAs at left, stacked feature explanations at right. | Benefit exploration, Internal links | Editorial heading, Short feature rows, Hairline dividers | | 12 | faq | Centered intro above a narrow, single-column accordion list. | Accordion questions, Objection handling | Pale neutral section, Plus controls, Horizontal rules | | 13 | team | Centered title and introduction above three staff portrait cards. | Human support proof, Team introduction | Rounded portrait frames, White name labels | | 14 | cta | Centered closing message over a broad soft-gradient background with two pill actions. | Conversion CTA, Demo alternative | Three-line serif headline, Primary violet button, Dark secondary button | | 15 | footer | Full-width dark footer with brand and address at left, grouped link columns, and trust marks below. | Site navigation, Legal and trust links | Ink background, White and muted text, Four link groups | ## Source CSS custom properties (selected) ```css --text-light: #0009; --untitled-ui--primary600: #7f56d9; --untitled-ui--primary700: #6941c6; --untitled-ui--primary100: #f4ebff; --red-text: #c0362d; --untitled-ui--primary800: #53389e; --untitled-ui--primary50: #f9f5ff; ``` --- 本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 Generated by Design DNA · https://four.wiralomi.com/style/cakeequity-com