Electric Violet
#4823ffPrimary action buttons, filled CTAs, link accents, key icon strokes — the deepest saturated violet in the system carries every conversion moment with maximum voltage against the warm canvas
Cake Equity
cakeequity.com
Website preview
The design language
Cake Equity uses a founder-financial command-center language: warm bone-white canvas (#fafaf8) with confident dark near-black type (#18161a), one electric deep-violet primary (#4823ff) that drives every conversion surface, and a single chartreuse accent (#e7ff6e) used sparingly as a highlight receipt on the top bar. The system is quiet and orderly — a single color does the loud work, while lighter tints of violet (#ede9ff, #d9d2ff) build soft structure around content. Typography is split-purpose: Plus Jakarta Sans 700 slams display headlines with negative tracking, while Inter handles all UI and body at measured weights (400/500). Cards and containers round generously at 20px, buttons become fully pill-shaped (100px), and the grid is spacious rather than dense — a financial tool that breathes instead of cramming data.
Color palette
brand
Voltage Mid
#7e78ffHover and active states on the primary violet, selected nav background, secondary fills — carries the brand's chromatic weight when Electric Violet is too loud
accent
Iris Accent
#6d67fbViolet outline accent for tags, dividers, and focused UI edges.
Lilac Wash
#ede9ffSoft section backgrounds, card borders on light surfaces, tinted containers — the lightest tint of the brand violet, used to suggest brand presence without committing to full color
Periwinkle Border
#d9d2ffRepeated decorative border tint on light surfaces — sits between Lilac Wash and Iris Accent to provide mid-violet hairline structure on cards and feature frames
Chartreuse Receipt
#e7ff6ePromotional top banner, highlight callouts, dark-card accent fill — the lone non-violet chromatic in the system, used as a small loud receipt that draws the eye to announcements
Powder Blue
#99cefeSoft highlight washes on product UI mockups, subtle background tints — a cool counterpoint to the warm violet palette, appears only in product screenshots and small badges
neutral
Bone Canvas
#fafaf8Page background, hero canvas, the base layer every surface sits on — a near-white with a barely-warm cast that distinguishes the system from stark pure white
Paper White
#ffffffCard surfaces, elevated panels, button text on dark fills, product UI chrome — the brightest layer above the Bone Canvas
Obsidian Ink
#18161aPrimary text, dominant borders, dark product card backgrounds, button text on light fills — a near-black with the faintest violet cast that ties dark surfaces back to the brand
Carbon Border
#333333Structural borders on cards and dividers, secondary text in dense lists, icon strokes on dark surfaces
Graphite
#222222Navigation borders, secondary button borders, supporting text — a dark neutral that sits between Obsidian Ink and Carbon Border
Slate Helper
#898b91Muted helper text, inactive form labels, low-priority dividers
Lavender Gray
#9e99abMuted secondary text, subtle card borders on lighter surfaces — carries a slight cool-violet undertone that keeps it from clashing with the brand palette
Midnight Surface
#1e1b22Dark feature card backgrounds (e.g. cap table live view), product showcase panels — a violet-tinted near-black for dark cards in a light-themed system
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
77px · 700 · 1 · -0.04px trackingThe quick brown fox jumps
text-63
63px · 700 · 1The quick brown fox jumps
heading
31px · 600 · 1.2 · -0.032px trackingThe quick brown fox jumps
heading-sm
22px · 400 · 1.3 · -0.02px trackingThe quick brown fox jumps
subheading
20px · 400 · 1.4 · -0.01px trackingThe quick brown fox jumps
text-18
18px · 700 · 2The quick brown fox jumps
text-17
17px · 300 · 2The quick brown fox jumps
body
16px · 300 · 1.5 · -0.001px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Plus Jakarta Sans
- Weights
- 700
- Sizes
- 63px, 77px
- Line height
- 1.00
- Letter spacing
- -0.0400em at 77px, -0.0320em at 63px
- Fallback
- Manrope
Display headlines — the only place this font appears, reserved for hero and section titles where a heavy condensed-ish sans slams the page with negative tracking; tighter than Inter at the same size gives display lines extra punch
Additional typeface
Inter
- Weights
- 400
- Sizes
- 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 20px, 22px, 31px
- Line height
- 1.40-1.60
- Letter spacing
- -0.0100em to -0.0010em for body sizes 16-22px, 0em at 14-15px
Body text and subheadings — Inter at 400 with mild negative tracking is the working voice of the system; compact comfortable line-height (1.4-1.5) keeps paragraphs dense without crowding
Additional typeface
Inter
- Weights
- 500
- Sizes
- 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 20px, 22px, 31px
- Line height
- 1.40-1.50
- Letter spacing
- -0.0010em to 0.0040em
Navigation links, card titles, emphasized UI labels, feature sub-headers — the medium weight gives nav and metadata enough presence to scan without competing with headings
Additional typeface
Inter
- Weights
- 600
- Sizes
- 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 20px, 22px, 31px
- Line height
- 1.30-1.50
- Letter spacing
- -0.0100em to -0.0010em
Button labels, badge text, strong inline emphasis — the weight of commitment, used where the user is being asked to act or read something important at small sizes
Additional typeface
Inter
- Weights
- 700
- Sizes
- 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 20px, 22px, 31px
- Line height
- 1.20-1.40
- Letter spacing
- 0.0040em to 0.0500em (uppercase labels, badges)
Section eyebrows, uppercase tracking labels, small-caps-feel tags — the heaviest Inter weight carries tracked-out uppercase eyebrows (e.g. 'FEATURES', 'CAP TABLE MANAGEMENT') that frame sections
Additional typeface
Inter
- Weights
- 300
- Sizes
- 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 20px, 22px, 31px
- Line height
- 1.20-1.50
- Letter spacing
- -0.0200em at 22-31px, -0.0010em at 16-20px
Sub-headlines and sub-copy beneath Plus Jakarta Sans displays — the light weight creates a deliberate typographic contrast where the heavy display does the shouting and the thin Inter does the whispering
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 20px
- Element gap
- 20px
Border radius
tags
999pxcards
20pxicons
50pxsmall
12pxbuttons
100pxSpacing scale
2px4px5px6px8px10px12px14px15px16px20px22px24px25px28px30px32px35px36px40px50px56px60px71px84px98px115px233pxGuidelines
Do
- Use Electric Violet (#4823ff) as the only filled button background — every primary action should commit to this single deep violet
- Round all cards and feature panels to exactly 20px — this is the system's structural radius and should not be reduced
- Use 100px (full pill) border-radius for all buttons, never rectangular button geometry
- Set display headlines in Plus Jakarta Sans 700 at 63-77px with letter-spacing between -0.04em and -0.032em — never substitute Inter for display
- Place the chartreuse (#e7ff6e) accent only on the promotional banner and dark-card highlights — keep it as a receipt, not a theme
- Define cards with 1px tinted borders (#d9d2ff or #ede9ff) rather than drop shadows — the system is flat by design
- Use Inter 300 for sub-copy beneath display headlines to create the heavy-display / light-body typographic contrast
Don’t
- Don't introduce a second primary action color — Electric Violet is the sole CTA fill; all other actions should be outlined or ghost
- Don't use chartreuse (#e7ff6e) for body content, icons, or large fills — it is reserved for the banner receipt and dark-card accents only
- Don't set display headlines in Inter — Plus Jakarta Sans 700 is the only display face, and mixing fonts at display sizes breaks the system's voice
- Don't apply drop shadows to cards or panels — the system is border-defined, and shadows would add unwanted softness
- Don't use rectangular or 8px-radius buttons — all buttons must be fully pill-shaped (100px)
- Don't place white or near-white cards directly on the Bone Canvas without a border — the warm near-white and pure white are too close in luminance and need a tinted border to separate
- Don't use the dark Midnight Surface (#1e1b22) for more than one section per page — dark surfaces are sparing punctuation, not dominant layout
Components
Primary Filled Button
Main conversion CTA (Get started free, Book a demo)Background #4823ff (Electric Violet), text #ffffff in Inter 600 at 15-16px, padding 10px 22px, border-radius 100px (full pill). High-contrast on both #fafaf8 and #ffffff canvases. No border or shadow.
Outlined Action Button
Secondary conversion CTA (Book a demo in nav)Background transparent, border 1.5px #4823ff, text #4823ff in Inter 600 at 15-16px, padding 10px 22px, border-radius 100px. Mirrors the pill geometry of the filled variant.
Ghost Text Link
Inline action (Learn more →)No background or border, text in Inter 500 at 15-16px, color #4823ff with an arrow character. Underline only on hover. Used for tertiary navigation within content.
Promotional Banner Bar
Top-of-page announcementFull-width #e7ff6 (Chartreuse Receipt) background, centered Inter 500 text in #18161a, small close button at right. Height ~40px. The only place chartreuse appears at scale.
Feature Card (Light)
Product feature showcase panelBackground #ffffff, border 1px #d9d2ff (Periwinkle Border), border-radius 20px, internal padding 20px. Contains a product screenshot on the left, headline + bullet list on the right.
Dark Product Showcase Card
Live data or product preview displayBackground #1e1b22 (Midnight Surface), border-radius 20px, padding 20px. Contains user rows with colored avatar tiles, progress bars in #e7ff6 and other brand tints, and accent text in Iris Accent or white.
Testimonial Card
Social proof quote cardBackground #ffffff, border 1px #ede9ff or none, border-radius 20px, padding 20px. Contains quote text in Inter 400, small circular avatar photo, name in Inter 600, title in Inter 400 #898b91.
Navigation Bar
Top-level site navigationBackground transparent over Bone Canvas, logo left, nav links (Product, Solutions, Resources, Customers, Pricing) in Inter 500, right side holds Login text link + Outlined Action Button + Primary Filled Button. Sticky on scroll.
Section Eyebrow Label
Small uppercase label above section headingsInter 700 at 11-13px, letter-spacing 0.05em, uppercase, color #4823ff or Obsidian Ink. Often paired with a small icon glyph (e.g. rocket for FEATURES).
G2 Badge / Award Tile
Third-party trust badge displaySmall card ~80x80px, white background, 1px #ede9ff border, border-radius 12px, contains G2 logo, award title, and quarter label. Displayed in a horizontal row.
Rating Display
Social proof rating indicatorInter 500 numeric rating (e.g. 4.8/5) in Obsidian Ink, followed by 5 small gold/violet star icons, with review count caption in Inter 400 #898b91 below.
Play Button Overlay
Video thumbnail triggerCircular 60px button, background #ede9ff (Lilac Wash) with #4823ff play triangle icon centered, positioned over product screenshot thumbnails to indicate video content.
Avatar Tile
User identifier in product UICircular 32-40px tile with 2-letter initials in white Inter 600, background colored from a fixed palette (violet, blue, orange, green tints). Used in shareholder lists and testimonial cards.
Pill Tag / Badge
Small categorical labelBackground tinted (Lilac Wash, Powder Blue, or Chartreuse), text in matching darker tone, Inter 600 at 12-13px, border-radius 999px, padding 4px 12px. Used for status indicators and labels.
Surfaces & elevation
Level 1
Bone Canvas
#fafaf8Page background, hero section, default canvas
Level 2
Paper White
#ffffffCard surfaces, feature panels, elevated content blocks
Level 3
Lilac Wash
#ede9ffTinted section backgrounds, soft feature containers
Level 4
Chartreuse Receipt
#e7ff6Promotional banner, highlight callout, accent fill on dark cards
Level 5
Midnight Surface
#1e1b22Dark product showcase cards, live data displays
The system deliberately avoids drop shadows in favor of border-based elevation. Cards are defined by 1px tinted borders (Periwinkle Border #d9d2ff or Lilac Wash #ede9ff) on light surfaces, and by their own dark fill on dark surfaces. The only visual separation is color and border, not shadow — this keeps the interface feeling flat, financial, and architectural rather than soft or playful.
Dark Product Showcase Card
0 0 0 1px rgba(24, 22, 26, 0.04)
Layout & imagery
Layout
The page is a max-width 1200px centered column on a Bone Canvas (#fafaf8) background. The hero is a two-column split: left half holds the eyebrow label, oversized display headline, sub-copy, rating row, and a single primary CTA; right half holds a dark Midnight Surface product card showing live cap table data. Below the hero, a full-bleed dark testimonial ticker band runs edge-to-edge, followed by a centered G2 badge row. Feature sections alternate between light (Paper White feature cards with video thumbnails) and slightly tinted (Lilac Wash) backgrounds, each with a left-aligned product screenshot card and right-aligned text + bullet list. Navigation is a top bar with logo left, center nav links, and right-aligned action buttons. Section gaps are ~80px, card padding is consistently 20px, and the grid breathes with generous whitespace rather than packing content.
Imagery
The site is product-UI-driven rather than photography-driven. Visuals consist of dark-themed product screenshots (cap table live views, shareholder lists, equity compliance forms) embedded as showcase cards within the light page. The product chrome is rendered with colored avatar tiles, progress bars in chartreuse and violet, and tabular data rows. The only photographic content is small circular headshots in testimonial cards and an overlapping row of founder faces in the hero. A single purple play-button overlay signals video content. No lifestyle photography, no abstract illustration, no 3D renders — the product UI is the hero visual and everything else is typography.
Design notes
Agent Guide
**Quick Color Reference** - text: #18161a - background: #fafaf8 - surface: #ffffff - border: #d9d2ff - accent: #e7ff6e - primary action: #4823ff (filled action) **3-5 Example Component Prompts** 1. Create a Primary Action Button: #4823ff background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. Build a dark product showcase card: background #1e1b22 (Midnight Surface), border-radius 20px, padding 20px. Header row with white label and a chartreuse (#e7ff6e) pill badge. Three user rows below: circular avatar tile (32px) with 2-letter initials in white Inter 600, name in white Inter 500, and a horizontal progress bar using chartreuse (#e7ff6e) and violet (#7e78ff) fills with a percentage label at right. 3. Build a feature card: Paper White (#ffffff) background, 1px border in Periwinkle Border (#d9d2ff), border-radius 20px, padding 20px. Left side: product screenshot placeholder with a 60px circular Lilac Wash (#ede9ff) play button centered, containing an Electric Violet (#4823ff) triangle. Right side: Inter 400 18px subhead in #18161a, four bullet items each prefixed with a small Electric Violet (#4823ff) check icon, and a 'Learn more →' ghost text link in #4823ff Inter 500. 4. Build a testimonial card: Paper White (#ffffff) background, no border or 1px #ede9ff, border-radius 20px, padding 20px. Quote text in Inter 400 16px #18161a. Bottom row: 40px circular headshot, name in Inter 600 15px #18161a, title in Inter 400 13px Slate Helper (#898b91). 5. Build the top navigation: transparent background over Bone Canvas, height ~64px, padding 0 40px. Left: wordmark logo. Center: nav links in Inter 500 15px #18161a (Product, Solutions, Resources, Customers, Pricing) with dropdown chevrons on some items. Right: 'Login' ghost text link in #18161a, an outlined 'Book a demo' button with 1.5px #4823ff border and #4823ff text at 100px radius, and a filled 'Get started free' button in #4823ff with white text at 100px radius.
Similar brands
Carta
Same cap-table management domain and dark-product-card-in-light-page layout pattern, though Cake uses a more electric violet and tighter pill geometry than Carta's softer blue-green
Pulley
Same equity-management space, similar product-UI-as-hero approach with dark dashboard cards floating on a light canvas, and comparable use of a single saturated brand color against neutral chrome
Mercury
Shared typographic restraint — a single bold display face paired with Inter for UI, pill-shaped buttons, and a light-canvas + dark-elevated-card surface stack
Brex
Similar financial-tool aesthetic with deep saturated brand color on warm off-white canvas, generous card radii, and product screenshots embedded as the primary visual content
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
