Outseta. A warm gradient sky hanging over deep plum night.
- SaaS
- Light theme
- 16 colors
- 12 typefaces
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.
Outseta design system
Brand3
Primary 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
Primary action fill (Sign up CTA, active states) — the only hot chromatic in the system, reserved exclusively for the conversion moment
Pink accent for outlined action borders, linked labels, and lightweight interactive emphasis.
Accent5
Hero gradient terminal color and decorative accent — a single warm yellow used only for celebration moments and the sunset gradient
Green outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color
Red outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color
Green outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color
Terminal stop of the hero gradient — a soft rose that opens the sunset wash
Neutrals6
Icon strokes and link text where the brand purple is too saturated; the near-neutral companion to Aubergine
Body text fallback and image-level deep fills
Input border, form field resting state
Soft border and muted heading accent — a lighter companion to Plum Tinted for secondary dividers
Mauve-tinted light border, the default hairline — always carries a hint of the brand purple rather than being pure gray
Page background, card surface, button text on dark fills
semantic2
Success badge text and inline success state — a true forest green for confirmations and positive feedback
Success badge background — the soft mint wash behind positive status pills
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Canvas on Aubergine
18.97 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
