Aubergine
#240029Primary text, icon strokes, hairline borders, and the dark-section fill — the structural ink of the system; every functional border carries this tint rather than neutral gray
Outseta
outseta.comWebsite preview
The design language
Outseta uses a warm sunset-marketplace language: a golden-hour gradient hero (pink to cream to yellow) anchors the page, paired with deep eggplant text (#240029) that gives the interface a grounded, premium feel. The brand color story is purple-forward — nearly all borders, body text, and icon strokes carry the #240029 tint rather than neutral black, which makes even functional chrome feel on-brand. The singular hot pink (#df37a7) does the heavy lifting as the sole action color, keeping commerce moments tight and unambiguous. A mono-spaced eyebrow font (JetBrains Mono at wide tracking) introduces every section, and free-form Permanent Marker annotations float over the hero, giving the marketing surface a hand-built, studio-notebook personality. Components are soft-cornered (6-14px), low-shadow, and sit on white with purple-tinted shadows rather than gray.
Color palette
brand
Fuchsia Signal
#df37a7Primary action fill (Sign up CTA, active states) — the only hot chromatic in the system, reserved exclusively for the conversion moment
Heather
#6d526dPink accent for outlined action borders, linked labels, and lightweight interactive emphasis.
accent
Glowstick
#ffcc11Hero gradient terminal color and decorative accent — a single warm yellow used only for celebration moments and the sunset gradient
Mint
#bbf7d0Green outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color
Strawberry
#ef4444Red outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color
Mango
#22c55eGreen outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color
Hero Glow
#ffbdd3Terminal stop of the hero gradient — a soft rose that opens the sunset wash
neutral
Plum Tinted
#d4ccd4Mauve-tinted light border, the default hairline — always carries a hint of the brand purple rather than being pure gray
Ink
#222222Icon strokes and link text where the brand purple is too saturated; the near-neutral companion to Aubergine
Smoke
#bbadbbSoft border and muted heading accent — a lighter companion to Plum Tinted for secondary dividers
Charcoal
#333333Body text fallback and image-level deep fills
Frost
#767676Input border, form field resting state
Canvas
#ffffffPage background, card surface, button text on dark fills
semantic
Forest
#15803dSuccess badge text and inline success state — a true forest green for confirmations and positive feedback
Honeydew
#dcfce7Success badge background — the soft mint wash behind positive status pills
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
80px · 700 · 1 · -1.6px trackingThe quick brown fox jumps
heading-lg
56px · 700 · 1.1 · -1.12px trackingThe quick brown fox jumps
heading
36px · 700 · 1.2 · -0.14px trackingThe quick brown fox jumps
text-32
32px · 400 · 1The quick brown fox jumps
text-26
26px · 700 · 1.5The quick brown fox jumps
heading-sm
24px · 500 · 1.2 · -0.1px trackingThe quick brown fox jumps
subheading
20px · 500 · 1.4 · -0.16px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · -0.16px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter Var
- Weights
- 400, 500, 600, 700
- Sizes
- 10px, 12px, 14px, 16px, 20px, 24px, 36px
- Line height
- 1.20-1.50
- Letter spacing
- -0.20px at 10px, -0.16px at 12px, -0.14px at 14px, -0.16px at 16px, -0.16px at 20px, -0.20px at 36px
- Fallback
- Inter
- Features
- "calt" on, "cv11" on, "ss02" on, "ss03" on
Workhorse UI and body font — the single axis variable cuts tracking at every size (-0.02em at 10px through -0.004em at 36px), so body text and headings share one family with no jarring weight jumps.
Additional typeface
Kaio
- Weights
- 700
- Sizes
- 36px, 56px, 80px
- Line height
- 1.00-1.20
- Letter spacing
- -0.0200em, -0.0040em
- Fallback
- Boldonse, Inter Tight 800, or General Sans Bold
- Features
- "ss03", "calt", "cv11", "ss02"
Display headlines — bold, ultra-condensed sans with strong character, used at 56-80px for hero statements. The choice of a single bold weight with tight tracking is anti-convention; most SaaS sites pair weight 300 whispers with 700 shouts. Kaio commits fully to one volume.
Additional typeface
JetBrains Mono
- Weights
- 400
- Sizes
- 12px, 14px, 16px
- Line height
- 1.20-1.50
- Letter spacing
- 0.04em at 12-14px, 0.10em at 16px
- Fallback
- IBM Plex Mono, JetBrains Mono
- Features
- "calt", "cv11", "ss02", "ss03"
Section eyebrows and technical labels (e.g. 'STRIPE VERIFIED PARTNER', 'ALL-IN-ONE MEMBERSHIP STACK') — the wide tracking (0.04-0.10em) turns mono into a humanist label voice, not code.
Additional typeface
Permanent Marker
- Weights
- 400
- Sizes
- 16px, 20px
- Line height
- 1.40-1.50
- Letter spacing
- -0.0100em, -0.0080em
- Fallback
- Permanent Marker (Google Fonts)
- Features
- "calt", "cv11", "ss02"
Handwritten annotations layered over the hero gradient ('SEE WHAT OUR CUSTOMERS ARE BUILDING', 'HOOK IN THE FIRST 90 MINUTES') — these are not body text, they are a personality layer; use sparingly to mark sections, not to carry meaning.
Additional typeface
Phosphor
- Weights
- 400
- Sizes
- 24px
- Line height
- 1.00
- Fallback
- Phosphor Icons (Regular)
- Features
- "liga"
Icon system — single weight, single color (Aubergine #240029), 1px-equivalent stroke, used inline with body copy and as standalone glyphs.
Additional typeface
Font Awesome 6 Brands
- Weights
- 400
- Sizes
- 16px, 20px
- Line height
- 1.00
- Letter spacing
- -0.0100em, -0.0090em, 0.0240em
- Features
- "calt", "cv11", "ss02"
Third-party brand glyphs (integration logos, social icons) — kept distinct from Phosphor so the system can mix its own line icons with customer brand marks without visual collision.
Additional typeface
Phosphor-Bold
- Weights
- 400
- Sizes
- 12px, 14px, 16px, 20px, 32px
- Line height
- 1
- Features
- "liga"
Phosphor-Bold — detected in extracted data but not described by AI
Additional typeface
Phosphor-Fill
- Weights
- 400
- Sizes
- 12px, 20px, 32px
- Line height
- 1
- Features
- "liga"
Phosphor-Fill — detected in extracted data but not described by AI
Additional typeface
-apple-system
- Weights
- 400
- Sizes
- 14px
- Line height
- 1.43
- Features
- "calt", "cv11", "ss02"
-apple-system — detected in extracted data but not described by AI
Additional typeface
Family
- Weights
- 400, 500, 700
- Sizes
- 26px
- Line height
- 1.5
- Letter spacing
- -0.001
- Features
- "calt", "cv11", "ss02"
Family — detected in extracted data but not described by AI
Additional typeface
Fraunces
- Weights
- 700
- Sizes
- 36px
- Line height
- 1.2
- Letter spacing
- -0.004
- Features
- "calt", "cv11", "ss02"
Fraunces — detected in extracted data but not described by AI
Additional typeface
Chakra Petch
- Weights
- 700
- Sizes
- 36px
- Line height
- 1.2
- Letter spacing
- -0.004
- Features
- "calt", "cv11", "ss02"
Chakra Petch — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 16px
Border radius
cards
14pxpills
999pxbadges
999pximages
6pxinputs
3pxbuttons
6pxSpacing scale
2px4px6px7px8px12px14px16px24px32px48px85px86px96px120pxGuidelines
Do
- Use Kaio 700 for every display headline at 56-80px — it is the single loud voice; never pair it with a second bold font in the same view.
- Reserve #df37a7 (Fuchsia Signal) for one element per viewport — the primary CTA — and let it be the only hot pink on the page.
- Tint every shadow with the brand purple rgba(32-41,0,36,x); never use neutral black shadows for cards, buttons, or modals.
- Use JetBrains Mono at 0.10em tracking for section eyebrows above every H1/H2 — this is the system's section-break signal.
- Apply the 145deg sunset gradient (pink → cream → yellow) to full-bleed hero bands only; never use it for cards, buttons, or small surfaces.
- Default to 14px radius for cards and 6px for buttons; the 14/6/3 (cards/buttons/inputs) hierarchy is what makes the surfaces feel like distinct material classes.
- Place 1-3 Permanent Marker annotations on the hero only, each pointing at a specific element with a hand-drawn SVG arrow — they are marketing chrome, not navigation.
Don’t
- Do not use #df37a7 for anything other than the primary CTA fill — not for links, not for borders, not for text accents.
- Do not pair Kaio with a second display serif or sans in the same screen — Fraunces and Chakra Petch appearing in the data are isolated decorative moments, not system fonts.
- Do not introduce a fourth border radius — the 999px/14px/6px/3px scale is complete; adding 8px or 10px fragments the material hierarchy.
- Do not place Permanent Marker annotations outside the hero gradient band — they lose contrast and read as broken text on white.
- Do not use neutral black (#000000) for shadows, text, or borders — Aubergine #240029 is the structural ink; black breaks the chromatic consistency.
- Do not stack more than two text colors in one component — the system uses only #240029 (primary) and #6d526d (secondary) for text, plus #d4ccd4 for muted helpers.
- Do not apply the hero gradient to buttons, badges, or icons — it is a page-level atmospheric treatment, not a component fill.
Components
Primary Filled Button
The sole conversion button — Sign up, Start free trial, Get startedFill #df37a7 (Fuchsia Signal), text #ffffff, radius 6px, padding 12px 24px, Inter Var 16px weight 600. Box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05). No hover outline — the color shift is the entire affordance.
Ghost Outlined Button
Secondary action paired next to the primary CTA — Is Outseta for me?, Learn moreBackground transparent, border 1px solid #6d526d (Heather), text #240029, radius 6px, padding 12px 24px, Inter Var 16px weight 500. The muted purple border signals 'second-class' without ever going gray.
Pill Tag / Category
Use-case chips and category labels (NETS, CLUBS, ASSOCIATIONS, COURSES, COMMUNITIES)Background #ffffff, border 1px solid #6d526d, text #240029, radius 999px (full pill), padding 6px 12px, Inter Var 12px weight 500. The pill radius and thin Heather border read as low-emphasis filters, not buttons.
Success Badge
Inline status confirmation — active, verified, connectedBackground #dcfce7 (Honeydew), border 1px solid #bbf7d0 (Mint), text #15803d (Forest), radius 999px, padding 4px 12px, Inter Var 12px weight 500. The three-stop green system (border, fill, text) is the only place green appears — it never leaks into icons or illustrations.
Testimonial Card
Three-up grid of customer quotes below the heroBackground #ffffff, radius 14px, padding 32px, shadow: 0 0 0 1px rgba(41,0,41,0.11), 0 2px 2px rgba(32,0,36,0.05). Contains a 40px circular avatar (Aubergine fill, white initial), a name in Inter Var 16px weight 600 #240029, a role in Inter Var 14px weight 400 #6d526d, and a quote in Inter Var 14px line-height 1.5.
Showcase / Logo Card
Featured customer or product mockup in the hero card rowBackground #ffffff, radius 14px, padding 0 (image bleeds to edges), 6px internal image radius via overflow:hidden. Image fills card with no padding. Used in a 3-column grid below the headline with 16px gaps.
Numbered Step
Three-step process explainer (Create plan, Add script, Copy links)A 24px Aubergine circle with a white 12px weight 600 number inside, followed by Inter Var 16px weight 500 text in #240029. No background card — the circle floats inline with the step text, separated by 12px gap.
Hero Section
The page-opening block — gradient sky, giant headline, dual CTA, showcase cardsFull-bleed background: linear-gradient(145deg, #ffbdd3, #fff1bd 40%, #fff1bd 60%, #ffcb0f). Centered max-width 800px stack: JetBrains Mono 12px eyebrow at 0.10em tracking, Kaio 80px weight 700 headline in #240029, Inter Var 20px subhead, dual CTA row, then a 3-column showcase card row offset upward into the gradient with 16px gaps.
Dark CTA Section
Final conversion band — Get started with Outseta todayFull-bleed background #240029 (Aubergine), padding 80px vertical, white text. Kaio 56px weight 700 headline in #ffffff, Inter Var 16px body in #d4ccd4 (Plum Tinted), Primary Filled Button right-aligned. A product screenshot card breaks the right edge with 14px radius and the standard purple-tinted shadow.
Navigation Bar
Top-of-page header — logo, nav, authWhite background, 1px bottom border #d4ccd4, max-width 1200px centered, 16px vertical padding. Logo (concentric-circle mark + Kaio 20px 'Outseta' wordmark) on the left, Inter Var 14px weight 500 nav links with chevron dropdowns, a GitHub icon, Log in ghost link, and Primary Filled Button on the right. A small 'Migrating from Memberspace?' link with arrow sits as a sub-bar at the right.
Eyebrow Label
Section intro text above every major headline — 'ALL-IN-ONE MEMBERSHIP STACK', 'STRIPE VERIFIED PARTNER'JetBrains Mono 12px weight 400, letter-spacing 0.10em, text #240029, centered, margin-bottom 16px. Optional small 16px Phosphor icon (filled or outlined) to the left with 8px gap. The mono font at extreme tracking is the system's way of saying 'pause, new section'.
Hand-Drawn Annotation
Personality layer on the hero — arrows and notes pointing to the showcase cardsPermanent Marker 16-20px weight 400, text #df37a7 (Fuchsia Signal) or #240029 (Aubergine), slight 2-4px rotation for a casual feel, no fixed positioning. Used 2-3 times per page only, always over the hero gradient, always pointing at a specific element via a hand-drawn SVG arrow.
Input Field
Email capture, form fields, searchBackground #ffffff, border 1px solid #767676 (Frost), radius 3px, padding 12px 16px, Inter Var 16px weight 400 text #240029, placeholder #6d526d. The 3px radius is intentionally sharper than cards/buttons (6-14px), marking inputs as a different material class.
Integration Icon Tile
Third-party tool logos in the integrations row40px square grayscale icon (#222222 or #240029 single-color treatment), no background, 24px gap between tiles, centered in a single row beneath a 'View all' link. The customer-branded marks use Font Awesome 6 Brands; Outseta's own icons use Phosphor.
Surfaces & elevation
Level 0
Canvas
#ffffffPage background, default card surface, nav background
Level 1
Warm Wash
#fff1bdMid-stop of the hero gradient, used as a full-bleed band behind the headline and showcase cards
Level 2
Dark Plum
#240029Full-bleed dark CTA section near page bottom — white text on Aubergine for the final conversion moment
Level 3
Success Wash
#dcfce7Soft mint background for success badges and positive status pills
Every shadow in the system is tinted with the brand purple (rgba(32-41, 0, 36, x)) rather than neutral black. This means even the lowest-elevation card or button casts a shadow that whispers the brand color — elevation is not generic depth, it is an extension of the palette. The result: the interface feels chromatically consistent from card edges to shadow edges.
Card
0px 0px 0px 1px rgba(41,0,41,0.11), 0px 2px 2px 0px rgba(32,0,36,0.05)
Elevated Card
0px 0px 0px 1px rgba(32,0,36,0.11), 0px 1px 1.5px rgba(32,0,36,0.01), 0px 2px 3px rgba(32,0,36,0.02), 0px 4px 6px rgba(32,0,36,0.03), 0px 8px 12px rgba(32,0,36,0.04), 0px 16px 24px rgba(32,0,36,0.05)
Button
inset 0px 0px 0px 1px rgba(255,255,255,0.2), 0px 1px 2px 0px rgba(0,0,0,0.05)
Input
inset 0px 0px 0px 1px rgba(255,255,255,0.2), 0px 1px 2px 0px rgba(0,0,0,0.05)
Image
0px 1px 1.5px rgba(32,0,36,0.01), 0px 2px 3px rgba(32,0,36,0.02), 0px 4px 6px rgba(32,0,36,0.03), 0px 8px 12px rgba(32,0,36,0.04), 0px 16px 24px rgba(32,0,36,0.05)
Layout & imagery
Layout
Full-bleed page with max-width 1200px content centered. The hero is a full-width gradient band with a centered narrow-column stack (max 800px) for the headline and dual CTA, then a 3-column card row that extends wider. Sections flow seamlessly — no dividers, no alternating dark/light bands except one full-bleed dark Aubergine CTA section near the footer. Content rhythm: centered headline stack → 3-column card row → centered quote wall (3-up testimonial grid) → centered integration row with chevron link → centered 3-step process explainer → full-bleed dark CTA. Navigation is a sticky top bar with no mega-menu — flat nav with chevron dropdowns, logo left, auth right. The overall density is comfortable, not compact — 80px section gaps, 24-32px card padding, 16px element gaps.
Imagery
The site is UI-dominant, not image-heavy — no photography, no lifestyle shots, no product hero renders. The visual interest comes from the gradient hero band and a row of three screenshot/showcase cards that act as proof points rather than decorative imagery. The screenshot cards contain real product UI (dashboard, course page, landing builder) shown in the brand's own style. A small set of Phosphor line icons (1px stroke, Aubergine) handle all iconography. The Permanent Marker annotations are the only 'handmade' element and are deliberately rough — they break the polished UI to signal 'built by humans, not a corporation'. No 3D, no illustration, no abstract graphics.
Design notes
Agent Guide
**Quick Color Reference** - text: #240029 (Aubergine) - background: #ffffff (Canvas) - border: #d4ccd4 (Plum Tinted) for hairlines, #6d526d (Heather) for interactive - accent: #ffcc11 (Glowstick) for hero gradient terminal only - primary action: #df37a7 (filled action) - success: #15803d text, #dcfce7 background, #bbf7d0 border **Example Component Prompts** 1. Create a Primary Action Button: #df37a7 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. Create a testimonial card: white background, 14px radius, 32px padding, shadow 0 0 0 1px rgba(41,0,41,0.11) + 0 2px 2px rgba(32,0,36,0.05). Contains a 40px Aubergine circle avatar with white initial, name in Inter Var 16px weight 600 #240029, role in Inter Var 14px weight 400 #6d526d, quote body in Inter Var 14px line-height 1.5 #240029. 3. Create a success badge: background #dcfce7, border 1px solid #bbf7d0, text #15803d, radius 999px, padding 4px 12px, Inter Var 12px weight 500. Use only for active/verified/connected status. 4. Create a dark CTA section: full-bleed background #240029, padding 80px vertical, max-width 1200px centered. Kaio 56px weight 700 headline in #ffffff, Inter Var 16px body in #d4ccd4, Primary Filled Button (#df37a7/#ffffff) right-aligned, product screenshot card with 14px radius on the right edge. 5. Create a section eyebrow + heading pair: JetBrains Mono 12px weight 400 at letter-spacing 0.10em in #240029, margin-bottom 16px. Below it, Kaio 56px weight 700 in #240029 at letter-spacing -1.12px. Use this stack above every major section.
Similar brands
Stripe
Same warm gradient hero treatment (Stripe uses orange-to-pink sky bands), same purple-leaning dark CTA section, and the same confidence to let one bold display headline own the viewport
Linear
Same single-bold-weight display commitment (Linear uses Inter Display exclusively; Outseta uses Kaio at 700 only), same pill-shaped secondary actions, same hairline-border-everywhere approach
ConvertKit
Same creator-economy warmth with a vivid single accent color, same Permanent Marker-style hand-drawn annotations over the hero, same approachable-but-considered tone
Notion
Same mono-font eyebrow labels above every section, same restrained color palette where one accent does all the work, same comfortable-not-compact spacing rhythm
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
