Creatorships

Overview

Creatorships is an AI-powered creator discovery and influencer marketing platform designed for marketing agencies and micro-agencies seeking data-driven creator partnerships. The design system embraces 'Warm Minimalism'—a contemporary aesthetic that balances the precision of clean, light surfaces (background #fffbf9, text #1f2739) with energetic coral accents (#f26b4d primary, #ea5332 secondary) that signal action, growth, and approachability. The visual language evokes clarity and confidence: users navigate a serene, uncluttered interface punctuated by moments of warmth that guide them toward conversion.

The brand voice is direct, data-informed, and conversational—never jargon-heavy, always outcome-focused. Creatorships speaks to busy marketing professionals who value efficiency and results. Example sentence: 'Our AI finds the creators your competitors haven't discovered yet—and shows you exactly why they're the right fit.'

Colors

The color system is anchored by a warm coral primary (#f26b4d), used exclusively for call-to-action buttons, interactive highlights, and brand moments. This accent sits atop a nearly-white surface stack (surface #fffbf9, surface-bright #ffffff, surface-container #f5ede8) that ensures legibility and calm. The secondary accent (#ea5332) provides emphasis for secondary actions and status indicators, while the tertiary neutral (#556074) grounds the interface for supporting text and disabled states.

Usage rules: Primary (#f26b4d) appears on 'Book a demo' and 'Start Free Trial' buttons with full opacity and rounded-full geometry (border-radius: 9999px). On hover, primary shifts to #ff8e80 (primary-fixed-dim) with a 200ms ease-out transition. The surface stack progresses from #fef9f6 (container-

Typography

The type system uses Outfit exclusively, a geometric sans-serif that communicates modernity and approachability. Display (65.6px, weight 600, line-height 72px, letter-spacing -0.03em) anchors hero sections with commanding presence; headline-lg (48px, 600, 56px line-height) breaks up content zones; body-md (16px, 400, 24px line-height) carries primary narrative. Label-md (14px, 600, 20px line-height, 0.02em letter-spacing) is applied to all interactive elements (buttons, badges, form labels) to create visual hierarchy and scanability. On small labels over busy backgrounds (e.g., stat cards or overlaid badges), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) to ensure contrast without compromising the warm aesthetic. Headline text uses on-surface (#1f2739) at full opacity; body text uses on

Layout

The layout system employs a 12-column grid with a max-width of 1280px, maintaining a fluid center column on mobile (gutter: 24px on desktop, 16px on tablet). The hero section uses asymmetric spacing: lg spacing (40px) separates the headline from supporting copy, while md spacing (24px) sits between the copy and primary CTA. Cards and stat blocks (100K+ Creator Profiles, 30M+ Content Signals) use md padding (24px) internally and are separated by lg spacing (40px) vertically. The header bar (background: rgba(255, 255, 255, 0.3), border-radius: 0px 0px 32px 32px) sits at the top with sm padding (12px 16px), creating a floating effect via backdrop-filter: blur(8px). White-space is generous—never cramped—allowing the warm coral accents to breathe and draw focus naturally.

Elevation & Depth

Depth is achieved through a subtle shadow and surface-color progression system, avoiding heavy drop-shadows that would conflict with the warm, approachable aesthetic. Level 1 (Base): surface-bright (#ffffff) with no shadow, used for primary content areas. Level 2 (Standard Card): surface-bright with elevation.md (box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)) and a 1px border in outline-variant (#d0ccc9), applied to stat cards and content panels. Level 3 (Elevated/Hover): same surface with elevation.lg (box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12)) and a 2px focus ring in primary (#f26b4d) when int

Shapes

The shape philosophy is 'Geometric Warmth'—combining sharp, modern geometry with soft, inviting curves. Buttons and CTAs use border-radius: 9999px (full) to signal approachability and action; this extreme roundness softens the coral accent and makes interactive elements feel friendly rather than corporate. Cards and panels use border-radius: 1.5rem (24px equivalent, rounded.xl) to balance structure with softness. Input fields and secondary containers use border-radius: 0.75rem (12px, rounded.md) for a more neutral, functional appearance. The header bar uses border-radius: 0px 0px 32px 32px (28

Components

Action Elements Primary buttons (button-primary) use background: {colors.primary} (#f26b4d), text: {colors.on-primary} (#ffffff), padding: 8px 24px, height: 40px, border-radius: 9999px, and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1). On hover (button-primary-hover), background shifts to #ff8e80 with transition: background-color 200ms ease-out. On active (button-primary-active), background becomes #e35a3b. Secondary buttons (button-secondary) use transparent background with a 1px border in primary (#f26b4d) and the same padding/height; on hover, the background fills with primary-container (#fff1ee). Ghost buttons (button-ghost) have no border or background; on hover, background becomes surface-container-high (#efe7e2).

Containers & Surfaces Cards (card) use background: {colors.surfa

Do's and Don'ts

**Do**

• Do use primary (#f26b4d) exclusively for primary CTAs and brand moments—never dilute it with secondary uses.
• Do apply rounded-full (border-radius: 9999px) to all interactive buttons to signal warmth and approachability.
• Do maintain generous white-space (lg spacing: 40px) between major content sections to avoid visual fatigue.
• Do use Outfit at 600 weight for all headlines and 400 weight for body text to maintain the clean, modern aesthetic.
• Do apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) to elevated cards and use 200ms ease-out transitions on hover states.
• Do use the surface-container stack (#f5ede8 for standard, #efe7e2 for hover) for secondary backgrounds to maintain visual hierarchy.

**Don't**

• Don't use primary (#f26b4d) for body text, disabled states, or non-interactive elements—reserve it for actions only.
• Don't apply border-radius values smaller than 0.75rem (12px) to buttons or primary interactive elements; this conflicts with the warm, approachable aesthetic.
• Don't stack multiple shadows or use blur values greater than 8px on the header bar; the frosted-glass effect should remain subtle and readable.
• Don't mix Outfit with system fonts or fallbacks in component definitions; always specify Outfit as the primary family.
• Don't use the secondary accent (#ea5332) for primary CTAs or hero moments—it's reserved for secondary actions and status indicators.
• Don't apply text-shadow to body text; use it only on small labels (12px or smaller) over busy backgrounds to maintain readability.