Outseta

Overview

Outseta is a membership management platform designed for creators, communities, and organizations building recurring revenue businesses. The brand embodies a "vibrant-minimalist" aesthetic: a luminous yellow-cream background (#fffacd gradient to #ffffff) paired with bold, high-contrast typography (Kaio for headlines, Inter Var for body) and strategic accent colors—primarily a vivid magenta (#df37a7) and supporting blues (#3898ec, #635bff)—that signal energy, approachability, and technical sophistication. The visual language evokes startup optimism and creative confidence, positioning Outseta as both powerful and accessible to non-technical users.

The brand voice is direct, conversational, and action-oriented. Outseta speaks in the language of creators and entrepreneurs: "Launch and Grow Your Membership," "Everything you need to grow, from payments and protected content to CRM and email." The tone avoids corporate jargon, favoring concrete benefits and clear calls-to-action. Personality traits: pragmatic yet enthusiastic, supportive without being patronizing, solution-focused. Example sentence in brand voice: "Sign up for free and start accepting payments in minutes—no coding required."

Colors

The color system is built on a high-contrast, light-first foundation optimized for clarity and conversion. **Primary (#df37a7)** is the signature magenta accent used exclusively on primary CTAs ("Sign up" buttons), interactive focus states, and brand-critical UI elements. It commands attention without aggression, appearing at 100% opacity on white backgrounds and reduced to rgba(223, 55, 167, 0.1) for subtle focus rings (3px blur). **On-Primary (#ffffff)** ensures text on magenta buttons remains legible at WCAG AAA contrast (21:1). **Secondary (#3898ec)** is a bright sky blue reserved for secondary actions, informational badges, and supporting highlights—it never competes with primary but provides visual rhythm. **Tertiary (#635bff)** is a vivid purple used for tertiary interactions, accen

Typography

The type system pairs a distinctive display typeface (Kaio) with a neutral, highly legible workhorse (Inter Var). **Display (69.75px, 700 weight, -0.04em letter-spacing)** is reserved for hero headlines and major section breaks—the large negative letter-spacing tightens the letterforms, creating visual impact and brand distinctiveness. **Headline-lg (48px, 700 weight)** is used for section titles and prominent subheadings, maintaining the same -0.02em spacing to preserve the brand's geometric precision. **Body-lg (18px, 400 weight, 28px line-height)** is the primary reading size for marketing copy and feature descriptions, with generous line-height (1.56x) to ensure comfortable scanning. **Body-md (16px, 400 weight, 24px line-height)** is the default for form labels, card content, and UI t

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport. The hero section spans full-width with a soft yellow-to-white gradient background (linear-gradient(135deg, #fffacd 0%, #ffffff 100%)), creating a welcoming entry point. Content sections use a gutter of 24px (md spacing) between columns and 40px (lg spacing) for vertical section separation. The container max-width of 1280px ensures readability on ultra-wide displays while maintaining focus on content. Padding follows a semantic scale: **xs (4px)** for micro-spacing inside components, **sm (12px)** for input padding and compact card spacing, **md (24px)** for standard card padding and section gutters, **lg (40px)** for major section breaks and hero padding, **xl (64px)** for top-level page sections.

Elevation & Depth

Depth is conveyed through subtle shadows and layered surfaces rather than dramatic drop-shadows. **Level 1 (Base)**: The page background is #ffffff with no shadow. **Level 2 (Cards & Inputs)**: Cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and a 1px border in {colors.surface-container-high} (#cccccc), creating a soft separation from the background. Inputs use the same shadow at rest. **Level 3 (Hover & Focus)**: On hover, cards elevate to box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), signaling interactivity. Buttons use inset shadows on hover (box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.

Shapes

The shape philosophy is **"Soft-Technical"**—rounded corners are present but restrained, signaling approachability without sacrificing professional credibility. **Buttons and primary CTAs** use 12px border-radius ({rounded.lg}), creating a friendly, modern appearance while remaining clearly clickable. **Cards and containers** use 8px border-radius ({rounded.md}), a subtle softness that doesn't distract. **Input fields** use 4px border-radius ({rounded.DEFAULT}), maintaining a utilitarian feel appropriate to form elements. **Badges and tags** use 100px border-radius ({rounded.full}) for a pill

Components

Action Elements **Button-Primary** is the hero CTA, using {colors.primary} (#df37a7) background with {colors.on-primary} (#ffffff) text, 12px 24px padding, 48px height, and 12px border-radius. On hover, the background shifts to #c91a8f (a darker magenta) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), and the transition occurs over 200ms. Focus state adds a 3px outline in {colors.primary} with 1px offset and a 3px halo shadow (rgba(223, 55, 167, 0.1)). **Button-Secondary** uses a transparent background with a 1px border in {colors.outline} (#9b9b9b) and {colors.on-surface} (#1d1d1f) text. On hover, the background becomes {colors.surface-container-high} (#dddddd) while the border remains unchanged, creating a subtle fill effect. Both buttons use {typography.label-md} (14px, 600 weight)

Do's and Don'ts

**Do**

• Do use {colors.primary} (#df37a7) exclusively for primary CTAs and focus states—never dilute its impact by using it for secondary elements.
• Do maintain 24px padding on cards and 12px padding on inputs; this consistency creates a modular, scalable design system.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to all elevated surfaces; this is the system's signature shadow depth.
• Do use Kaio for headlines (display, headline-lg, headline-md) and Inter Var for body text; this pairing is the brand's typographic identity.
• Do include 200ms transitions on all interactive state changes (hover, focus, active) to signal responsiveness without feeling sluggish.
• Do use the full 6-step surface container stack (#f5f5f5 to #cccccc) to create visual hierarchy in complex layouts.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; use {colors.on-surface} (#1d1d1f) for dark text and {colors.on-primary} (#ffffff) only on colored backgrounds.
• Don't apply border-radius greater than 12px on buttons or cards; the brand uses restrained rounding, not pill-shaped containers.
• Don't use {colors.secondary} (#3898ec) or {colors.tertiary} (#635bff) on primary CTAs; these are supporting accents only.
• Don't omit box-shadows on elevated elements; flat design contradicts the brand's depth-based visual hierarchy.
• Don't use system fonts (system-ui, -apple-system) for headlines; Kaio is the brand's distinctive display typeface and must be loaded via Google Fonts.
• Don't apply opacity changes to primary color for hover states; use the darker magenta (#c91a8f) instead to maintain color integrity.