SpatialChat. Violet pulse on white parchment.
- SaaS
- Light theme
- 11 colors
- 1 typeface
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.
SpatialChat design system
Brand2
Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Light supporting surface for subtle backgrounds and section separation.
Neutrals9
Headline text, primary copy at full weight — the deepest near-black, used wherever the system needs maximum contrast on white
Secondary text, button labels on filled surfaces, dark UI chrome where pure black is too heavy
Body text, paragraph copy, subheadings — the working gray for sustained reading
Icon strokes, list markers, muted labels, secondary metadata — high-frequency utilitarian gray
Input placeholders, helper text, disabled states
Input borders at rest, slightly stronger divider lines, de-emphasized outlines
Default hairline borders, card outlines, table dividers, subtle structural separation
Page canvas, section background behind cards — the off-white that lifts content without being clinical
Card surfaces, nav bar, button text on violet, input fields — the bright top layer
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Paper on Brand Violet
7.37 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
