Brand Violet
#5727e7Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
SpatialChat
spatial.chatWebsite preview
The design language
SpatialChat is a airy SaaS marketing surface that treats violet as a single sharp accent against an almost paper-white canvas. The visual rhythm is wide: generous vertical breathing room, centered hero stacks, then alternating two-column feature blocks. Weight lives in typography — Satoshi carries 700-weight display lines at 60px — while UI elements stay flat or float with a barely-there 6%-opacity shadow. Components read as soft rectangles: 12px buttons, 16px cards, hairline #e5e7eb borders. Color is rationed: violet (#5727e7) appears only on primary CTAs, the announcement bar, the 'New' badge, and active states; everywhere else is grayscale. The mood is confident-but-friendly — a product page that wants to feel modern without being cold, and approachable without being playful.
Color palette
brand
Tinted Highlight
#f2f2ffLight supporting surface for subtle backgrounds and section separation.
neutral
Ink Black
#030712Headline text, primary copy at full weight — the deepest near-black, used wherever the system needs maximum contrast on white
Graphite
#222222Secondary text, button labels on filled surfaces, dark UI chrome where pure black is too heavy
Slate
#4b5563Body text, paragraph copy, subheadings — the working gray for sustained reading
Mid Gray
#5c5c5cIcon strokes, list markers, muted labels, secondary metadata — high-frequency utilitarian gray
Steel
#6b7280Input placeholders, helper text, disabled states
Mist
#d1d5dbInput borders at rest, slightly stronger divider lines, de-emphasized outlines
Fog
#e5e7ebDefault hairline borders, card outlines, table dividers, subtle structural separation
Cloud
#f9fafbPage canvas, section background behind cards — the off-white that lifts content without being clinical
Paper
#ffffffCard surfaces, nav bar, button text on violet, input fields — the bright top layer
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
60px · 500 · 1.3The quick brown fox jumps
text-48
48px · 500 · 1.3The quick brown fox jumps
text-44
44px · 500 · 1.3The quick brown fox jumps
heading-lg
40px · 500 · 1.3The quick brown fox jumps
heading
32px · 500 · 1.38The quick brown fox jumps
heading-sm
24px · 500 · 1.4The quick brown fox jumps
subheading
20px · 500 · 1.5The quick brown fox jumps
body
18px · 500 · 1.56The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Satoshi
- Weights
- 400, 500, 600, 700
- Sizes
- 14, 16, 18, 20, 24, 32, 40, 44, 48, 60
- Line height
- 1.30–1.60
- Letter spacing
- normal
- Fallback
- Inter or General Sans
Single-family geometric sans used for everything from 14px helper text up to 60px display headlines. Satoshi's rounded geometric forms give the violet-and-white system a friendlier edge than a neutral grotesque — the open apertures and soft terminals keep even the 700-weight display lines from feeling corporate. Weight 700 owns the hero and section headlines; 600 handles subheadings and emphasized body; 500 is reserved for button labels and badge text; 400 carries paragraphs and UI labels. Free substitute: 'Inter' or 'General Sans' (Fontshare) as the closest open-license match.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 12px
Border radius
cards
16pxlogos
50pxbadges
8pxinputs
12pxbuttons
12pxannouncementBar
0pxSpacing scale
2px4px6px8px10px12px14px15px16px18px20px24px25px28px32px40px48px60px64px71px80px81px95px98px100px165px180px200px210px230pxGuidelines
Do
- Use #5727e7 exclusively for filled primary CTAs, the announcement bar, the 'New' badge, and accent bullets — never for body text or borders
- Set all button radii to 12px and all card radii to 16px — the 4px step between control and container is what makes the system feel intentional
- Reach for Satoshi 700 at 40-60px for any display or section heading; reserve 500 for buttons and 400 for paragraphs
- Pair a filled violet CTA with a ghost-bordered CTA on every hero — the two-button rhythm is the page's signature CTA pattern
- Keep all shadows at rgba(0,0,0,0.06); pick 0 1px 2px for buttons, 0 4px 16px for cards, 0 4px 28px for hero imagery
- Use #e5e7eb for structural dividers and #d1d5db for input borders — the two-step gray scale prevents flat-looking forms
- Set the page canvas to #f9fafb and card surfaces to #ffffff — the off-white base is what keeps the white cards from looking like cutouts
Don’t
- Don't introduce a second chromatic color — violet is the only accent, and adding teal, green, or red will flatten the brand
- Don't set button radius above 14px or below 10px — the 12px pill is calibrated against Satoshi's terminal shapes
- Don't use shadows darker than 6% black or with a colored tint — the system relies on hairline borders and near-invisible shadows
- Don't use Satoshi below 400 weight or above 700 — the system has no light or black variants, and adding them will break the scale
- Don't center-align body paragraphs longer than two lines — left-align descriptions inside the two-column feature sections
- Don't place violet on violet (e.g. violet CTA on violet tint) — the tinted surface #f2f2ff is for highlights, not button states
- Don't fill large content areas with #030712 — dark mode is not part of the system; if a section needs to feel different, use a hairline border and a white card
Components
Announcement Bar
Top-of-page promotional stripFull-width #5727e7 band, white Satoshi 16px/500 text, 12px vertical padding, centered content. Right-side 50px-radius close button on white. The only full-bleed colored band on the site.
Primary CTA Button
High-intent action triggerFilled violet #5727e7, white Satoshi 16px/500 text, 12px radius, 12px vertical × 20px horizontal padding, 0 1px 2px rgba(0,0,0,0.06) shadow. Used for 'Book a Demo' and 'Start for Free'. No arrow glyph inside the pill.
Ghost CTA Button
Secondary action triggerTransparent fill, 1px solid #030712 border, #030712 Satoshi 16px/500 text, 12px radius, 12px × 20px padding. Sits beside the primary CTA as the lower-commitment option. Often paired with a right-arrow icon after the label.
Navigation Link
Top-bar menu itemSatoshi 16px/500 in #030712, no underline, 8px horizontal padding. Dropdown caret is a 4×4 chevron in #030712.
New Badge
Inline nav annotation8px radius pill, #f2f2ff background, Satoshi 12px/500 in #5727e7, 4px vertical × 10px horizontal padding. Signals a recently launched destination without adding a new color.
Login Link
Minimal nav CTAGhost-style: transparent fill, Satoshi 15px/500 in #030712, 12px radius, 12px × 20px padding — visually quieter than the filled primary CTA so the 'Start for Free' button wins the eye.
Hero Headline
Page-anchoring display typeSatoshi 60px/700, #030712, line-height 1.30, centered. Always paired with a 18px/1.56 #4b5563 subhead and the primary+ghost CTA pair below.
Social Proof Row
Trust strip below hero CTAThree inline groups: a G2/Capterra badge pair, a 5-star row with 'Loved by 6M+ Users Worldwide' label, and a Product Hunt #1 card. All sit on white, separated by 16px gutters, Satoshi 14-16px.
Logo Strip Card
Client-logo bandFull-bleed white row, 40px vertical padding, six 80px-tall brand logos evenly spaced (max-width 1200px). Logos rendered in their native brand color at full opacity — this is the only band where multi-color is allowed.
Section Heading
Block-anchoring headlineSatoshi 40px/700, #030712, centered, 1.30 line-height. Followed by an 18px #4b5563 paragraph at 1.56. Sets the rhythm for every content section after the hero.
Feature Section (Two-Column)
Alternating product/feature block48px column gap, left column holds a small section tag pill (8px radius, 1px #e5e7eb border, Satoshi 14px/500), 32px Satoshi 600 heading, bulleted feature list with 8px violet bullet markers, a 2×3 stat grid, and a filled CTA. Right column is a 16px-radius product screenshot card with 0 4px 28px rgba(0,0,0,0.06) shadow.
Feature List Item
Inline benefit bullet8px violet (#5727e7) filled disc, 12px gap to label. Title in Satoshi 16px/600 #030712, description in Satoshi 14px/400 #4b5563. 16px vertical gap between items.
Stat Block
Inline metric cardSatoshi 24px/700 #030712 number on top, Satoshi 14px/400 #4b5563 label below. No border, no background — sits inside the feature section flow.
Product Screenshot Card
Visual proof of the product UI16px radius, white background, 0 4px 28px rgba(0,0,0,0.06) shadow. The image fills edge-to-edge inside the radius. This is the only component where a shadow is heavy enough to read as floating.
Surfaces & elevation
Level 0
Canvas
#f9fafbPage background, section bands
Level 1
Surface
#ffffffNavigation bar, cards, input fields, elevated content blocks
Level 2
Tinted Surface
#f2f2ffSoft violet wash for highlight badges and accent chips
Elevation is whisper-thin: all shadows are 6% black, never deeper. The system never uses shadows to suggest physical depth — they exist only to separate a floating card from the canvas when hairline borders won't do. Borders (#e5e7eb) are the primary separator; shadows are reserved for the hero product visual and feature cards that need to read as 'lifted content' rather than 'inline block'.
Primary CTA button (hover/active)
0 1px 2px rgba(0, 0, 0, 0.06)
Feature card / content block
0 4px 16px rgba(0, 0, 0, 0.06)
Hero product screenshot / large media card
0 4px 28px rgba(0, 0, 0, 0.06)
Layout & imagery
Layout
Page architecture follows a centered-narrow, two-column rhythm. The announcement bar and nav span full-bleed; everything else is constrained to a 1200px max-width container with horizontal auto margins. The hero is a centered stack: 60px headline → 18px subhead → primary + ghost CTA pair → social proof row. Below the hero sits a full-bleed logo strip, then the page alternates between centered narrow text blocks (a 40px section heading + 18px paragraph) and two-column feature sections (text-left, product-screenshot-right, 48px gutter). Sections breathe with 64px vertical gaps. The nav is a sticky-friendly top bar with logo left, four menu items center-left, and three controls (Login, Book a Demo, Start for Free) right. There is no sidebar, no mega-menu visible, and no footer in the captured viewport — the page is mid-scroll.
Imagery
Product screenshots dominate the visual vocabulary — a single large 16px-radius card per feature section, with the live SpatialChat UI visible (video thumbnails, chat panels, avatar bubbles, polls). Screenshots are rendered at full fidelity with their native purple/violet UI elements intact, which lets the brand color echo from the CTAs into the product visual. Below the hero, a full-bleed logo strip carries six client brands in their native colors (Stanford red, McDonald's yellow, Google multicolor, McKinsey blue, Volvo blue, Accenture purple) — this is the one band where multi-color is permitted. There is no lifestyle photography, no stock imagery, and no abstract illustration. Icon style is minimal: small filled violet discs serve as bullet markers, and 4×4 chevrons indicate dropdown menus. The visual rule is: the product IS the photography.
Design notes
Agent Guide
**Quick Color Reference** - text: #030712 - background: #f9fafb - surface: #ffffff - border: #e5e7eb - accent: #5727e7 - primary action: no distinct CTA color **Example Component Prompts** No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. Feature section: two-column grid with 48px gap. Left column: 8px-radius section tag pill (1px #e5e7eb border, Satoshi 14px/500), 32px Satoshi 600 heading in #030712, then a feature list of 4 items each with an 8px violet (#5727e7) bullet disc, 16px/600 title in #030712, 14px/400 description in #4b5563. Below the list, a 3-column stat row (24px/700 #030712 numbers over 14px/400 #4b5563 labels). Right column: product screenshot in a 16px-radius card, #ffffff background, 0 4px 28px rgba(0,0,0,0.06) shadow. 3. Top nav: full-width white bar, 0 1px 0 #e5e7eb bottom border, 16px vertical padding. Logo left in #030712, menu items in Satoshi 16px/500 #030712 with 4×4 chevron carets. Right side: 'Login' as a ghost-style text link, 'Book a Demo' as a 1px-bordered #030712 ghost button, 'Start for Free' as a filled #5727e7 button — all 12px radius. 4. New badge: 8px-radius pill, #f2f2ff background, Satoshi 12px/500 in #5727e7, 4px vertical × 10px horizontal padding. Place inline next to a nav item label. 5. Stat card: no border, no background. Satoshi 24px/700 number in #030712, Satoshi 14px/400 label in #4b5563 below. Three of these sit side by side with 24px gaps.
Similar brands
Notion
Same white-canvas + single-accent + Satoshi-style geometric sans approach, with the same restrained use of shadow and 12px button radius
Linear
Same disciplined grayscale-plus-one-vivid-accent system, similar two-column feature blocks with product screenshots in 16px-radius cards
Cal.com
Same light theme with violet as the sole chromatic accent, same hairline-border + near-invisible shadow elevation approach
Pitch
Same comfortable-density marketing layout with centered hero stacks and alternating two-column feature sections
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
