Skip to main content
Published reference

Creator Embassy design system

Real components, real tokens, shared with the app. All example numbers and states on this page are specimens.

component · Container width="wide" · Heading · Text · CredentialLabel

Rules

Emerald means money and action. The gradient means brand. Gold means earned. Purple is the creator accent.

The content stays light. Dark bands frame navigation, heroes, footers and product specimens. Use the dark surface ladder inside those bands.

Labels carry meaning alongside colour. Keep body text at AA contrast and respect reduced motion.

Palette

Choose a semantic role before choosing a colour. Swatch labels stay on the light ground for readability.

Primary emerald

  • ColorPrimary

    #067a53

  • ColorEmeraldDeep

    #067a53

  • ColorEmerald

    #0e6e4a

  • ColorEmeraldOnDark

    #22b284

Purple and gradient

  • ColorPurple

    #7918ee

  • ColorPurpleOnDark

    #a56bff

  • GradientFrom

    #f9969d

  • GradientTo

    #7918ee

Dark ladder

  • ColorSurfaceCanvas

    #04011c

  • ColorSurfaceSidebar

    #231c54

  • ColorSurfaceCard

    #231c54

  • ColorSurfaceElevated

    #231c54

  • ColorBorderDefault

    #393362

  • ColorBorderEmphasis

    #645d9a

  • ColorTextPrimary

    #ffffff

  • ColorTextSecondary

    #bcbacb

  • ColorTextMuted

    #918cb8

Light neutrals

  • ColorSurfaceCanvasLight

    #fbfbfd

  • ColorSurfaceSidebarLight

    #f4f5f8

  • ColorSurfaceCardLight

    #ffffff

  • ColorSurfaceElevatedLight

    #ffffff

  • ColorBorderHairlineLight

    #e3e5eb

  • ColorBorderStrongLight

    #c4c8d2

  • ColorInkPrimaryLight

    #181b25

  • ColorInkSecondaryLight

    #4b5263

  • ColorInkMutedLight

    #62697a

Gold earned

  • ColorGold

    #b8862f

  • ColorGoldStrong

    #a87c0a

  • ColorGoldOnDark

    #e8b547

  • ColorGoldInk

    #7a5a1a

--gradient-accent · GradientFrom · GradientTo

Status colours

  • CHAT_CARD_COLOR_TREATMENTS.emerald_confirmed.edge

    #045d43

  • CHAT_CARD_COLOR_TREATMENTS.gold_earned.edge

    #b8862f

  • CHAT_CARD_COLOR_TREATMENTS.amber_decision.edge

    #646464

  • CHAT_CARD_COLOR_TREATMENTS.blue_info.edge

    #646464

  • CHAT_CARD_COLOR_TREATMENTS.red_negative.edge

    #b03050

  • CHAT_CARD_COLOR_TREATMENTS.grey_closed.edge

    #c4c8d2

Type

Poppins carries display and navigation. DM Sans carries readable body copy.

Build

component · Text className="font-display text-hero-display max-sm:!text-[clamp(32px,8vw,56px)]"

H1

component · Text className="font-display text-h1 max-sm:!text-[32px]"

H2

component · Text className="font-display text-h2 max-sm:!text-[28px]"

H3

component · Text className="font-display text-h3 max-sm:!text-[26px]"

H4

component · Text className="font-display text-h4 max-sm:!text-[24px]"

Body

component · Text className="font-sans text-body"

Menu

component · Text className="font-display text-menu"

Eyebrow

component · Text className="font-display text-eyebrow uppercase"

FontFamilyDisplay: Poppins · FontFamilyBody: DM Sans

Buttons

Emerald leads the action. Every button is a pill, with a visible focus state.

Light ground

component · Button variant="primary" size="sm"

component · Button variant="primary" size="md"

component · Button variant="primary" size="lg"

component · Button variant="accent" size="sm"

component · Button variant="accent" size="md"

component · Button variant="accent" size="lg"

component · Button variant="outline" size="sm"

component · Button variant="outline" size="md"

component · Button variant="outline" size="lg"

component · Button variant="ghost" size="sm"

component · Button variant="ghost" size="md"

component · Button variant="ghost" size="lg"

Dark band

component · Button variant="primary" size="sm"

component · Button variant="primary" size="md"

component · Button variant="primary" size="lg"

component · Button variant="accent" size="sm"

component · Button variant="accent" size="md"

component · Button variant="accent" size="lg"

component · Button variant="outline" size="sm"

component · Button variant="outline" size="md"

component · Button variant="outline" size="lg"

component · Button variant="ghost" size="sm"

component · Button variant="ghost" size="md"

component · Button variant="ghost" size="lg"

Chips and badges

Gold signals something earned. Badge families retain their current product shapes.

neutral

component · Badge tone="neutral"

primary

component · Badge tone="primary"

accent

component · Badge tone="accent"

highlight

component · Badge tone="highlight"

outline

component · Badge tone="outline"

GOLD

component · GmvTierBadge tier="gold"

5

component · LevelBadge level={5}

BEAUTY

component · CategoryCrestBadge category="beauty"

ELITE

component · EmbassySizeBadge tier="elite"

TITAN

component · TitanSealBadge isTitanMember

GOLD5BEAUTY

component · CreatorBadgeRow

TITANBEAUTYELITE

component · BrandBadgeRow

Cards

Use light cards in the app. Reserve the surface ladder for marketing bands. Numbers below are specimens.

Card specimen

One idea per card.

Keep the next step clear.

Specimen

component · Card tone="light" · CardHeader · CardTitle · CardDescription · CardContent · CardFooter

Card specimen

One idea per card.

Keep the next step clear.

Specimen

component · Card tone="dark" · CardHeader · CardTitle · CardDescription · CardContent · CardFooter

Balance specimen

$120

Specimen only

component · StatCard

No results specimen

Explain what can happen next.

component · EmptyState

component · Skeleton · SkeletonText · SkeletonCard

Portrait of Jaded by Nicole

Jaded by Nicole

Creator card specimen using a real seed portrait.

component · CreatorCard

1 of 3 specimen slots

component · BudgetMeter

No media kit

component · MediaKitAffordance

component · EmbassyCrown

CE

component · Monogram

component · BessieAvatar

Jaded by Nicole

component · Avatar

component · AvatarStack

Forms

Give every control a label. Put errors beside the field and preserve keyboard access.

Use a name people recognise.

component · Field · Input

Enter a valid email address.

component · Field error · Input aria-invalid

component · Label · Textarea

component · Field · Select

component · CheckboxField · Checkbox

Drop an image or browse

Disabled specimen. No files are uploaded.

component · ImageUploadField disabled

component · Dialog

Marketing components

Dark bands frame the story. The gradient carries the brand. Every number here is a specimen, not a platform fact.

Creator EmbassyGet started

Hero specimen

Make work

Real creator portraits and shared hero typography.

component · HeroBand

Creator EmbassyGet started

Create

Compatibility export specimen.

component · GradientHero (compatibility alias of HeroBand)

  • Dr.Althea
  • Owala
  • PAVOI
  • RENPHO
  • NEEWER

component · GradientBrandBar

Creators specimen
12
Brands specimen
3
Released specimen
$120

component · StatBar specimen

component · GhostWord

Dr.Althea

Dr.Althea Vitamin C Serum Launch

Funded

Budget committed

Brands commit the budget up front.

component · MarketingVignette kind="funded"

Balance

Dr.Althea Vitamin C Serum Launch

Released

RELEASED ON APPROVAL

You earn dollars and cash out dollars.

component · MarketingVignette kind="wallet"

Brief

Dr.Althea Vitamin C Serum Launch

  • Film in natural light
  • Show the serum texture and dropper
  • Tag the TikTok Shop product link

Approved

RELEASED ON APPROVAL

Approval checks the work against the brief you both agreed to.

component · MarketingVignette kind="brief"

Jaded by Nicole

Media specimen

Give the work room to speak.

component · MediaRow · MediaThumb

Build together.

component · StatementPanel

  1. Start

    Make the first step clear.

  2. Create

    Show the work.

component · ProcessRow

Footer band specimen

component · FooterBand

4.5(12 ratings)No ratings yet

component · RatingSummary

Embassy Score specimen: excellent

Excellent 95

Embassy Score

How this brand treats creators, from Embassy data.

Funded & Active

95 out of 100

Excellent
  • Creator rating specimenUnrated

    Specimen only, not live brand data.

Based on 12 rated events.

component · EmbassyScoreBadge · EmbassyScorePanel band="excellent"

Embassy Score specimen: strong

Strong 80

Embassy Score

How this brand treats creators, from Embassy data.

Funded & Active

80 out of 100

Strong
  • Creator rating specimenUnrated

    Specimen only, not live brand data.

Based on 12 rated events.

component · EmbassyScoreBadge · EmbassyScorePanel band="strong"

Embassy Score specimen: fair

Fair 60

Embassy Score

How this brand treats creators, from Embassy data.

Funded & Active

60 out of 100

Fair
  • Creator rating specimenUnrated

    Specimen only, not live brand data.

Based on 12 rated events.

component · EmbassyScoreBadge · EmbassyScorePanel band="fair"

Embassy Score specimen: low

Needs work 30

Embassy Score

How this brand treats creators, from Embassy data.

Funded & Active

30 out of 100

Needs work
  • Creator rating specimenUnrated

    Specimen only, not live brand data.

Based on 12 rated events.

component · EmbassyScoreBadge · EmbassyScorePanel band="low"

Embassy Score specimen: new

New

Embassy Score

How this brand treats creators, from Embassy data.

Inactive

New brand

Not enough rated history yet.

  • Creator rating specimenUnrated

    Specimen only, not live brand data.

Based on 0 rated events.

component · EmbassyScoreBadge · EmbassyScorePanel band="new"

App expression

Night navigation, brand gradient heroes and emerald balances bring the signature language into the light app. Purple marks creator surfaces; gold stays earned.

Creator Embassy
Search ⌘K

Creator

My Brands
Wallet
CreatorBrand

component · AppChrome

Welcome back

Home hero specimen.

Earned so far specimen
$1,250.00
Available specimen
$250.00
Pending review specimen
$100.00

component · AppHeroHeading · StatBar hero specimen

Tinted icon chip specimen

Discover, money and chat

component · IconChip · CardEyebrow

Balance specimen
$250.00
Earned to date specimen
$1,250.00
Pending review specimen
$100.00

component · StatBar emerald balance specimen

Chat colours

Emerald confirmed, gold earned, amber decision, blue info, red negative, grey closed. Name the status as well as colouring it.

Chat colour specimen

  • emerald confirmed
  • gold earned
  • amber decision

Status is always named in words as well as colour.

Open details

component · ChatCardView · chatCardChipStyle

Chat colour specimen

  • blue info
  • red negative
  • grey closed

Status is always named in words as well as colour.

Open details

component · SystemCardView

Motion

Respect prefers-reduced-motion. Marquees and reveals stop; counters show their final values.

MotionButton
400ms
MotionCounter
1200ms
MotionDuration1
150ms
MotionDuration2
300ms
MotionDuration3
500ms
MotionMarquee
120s

Use the shared durations for feedback. Motion should support the next step without delaying it.