Decision needed: campaign offer
- Awaiting your decision
The status is neutral because a decision is not payment.
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 night 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
Confirmed money · wire emerald_confirmed
#045d43
night: #2ec493
Credited reward · wire gold_earned
#b8862f
night: #e8b547
Neutral decision · wire amber_decision
#c4c8d2
night: #645d9a
Neutral information · wire blue_info
#c4c8d2
night: #645d9a
Explicit failure · wire red_negative
#b03050
night: #e5557a
Neutral closure · wire grey_closed
#c4c8d2
night: #645d9a
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"
component · Text className="font-display text-menu"
Eyebrow
component · Text className="font-display text-eyebrow uppercase"
FontFamilyDisplay: Poppins · FontFamilyBody: DM Sans
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
Jaded by Nicole
Creator card specimen using a real seed portrait.
component · CreatorCard
component · mediaControlButtonClass
1 of 3 specimen slots
component · BudgetMeter
No media kit
component · MediaKitAffordance
component · EmbassyCrown
CE
component · Monogram
component · BessieAvatar
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.
Hero specimen
Make work
Real creator portraits and shared hero typography.
component · HeroBand
Create
Compatibility export specimen.
component · GradientHero (compatibility alias of HeroBand)
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
component · MarketingVignette kind="funded"
Balance
Dr.Althea Vitamin C Serum Launch
Released
Earned and cashed out
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
component · MarketingVignette kind="brief"
Media specimen
Give the work room to speak.
component · MediaRow · MediaThumb
Build together.
component · StatementPanel
Start
Make the first step clear.
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.
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.
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.
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.
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.
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
Neutral states stay neutral. Emerald confirms money, gold marks credited rewards, and red is reserved for explicit failures with readable recovery text. All six wire colour identifiers are shown; the presentation mapping decides the visible treatment.
component · ChatCardView · semantic context · wire amber_decision
Payout sent
- Confirmed money
Net payout$1,080.00
component · SystemCardView · semantic context · wire emerald_confirmed
Milestone points credited
- Earned recognition
This gold treatment is reserved for an explicitly credited reward.
component · ChatCardView · semantic context · wire gold_earned
Submission could not be processed
- Action needed
Try again after checking the file and connection.
component · ChatCardView · semantic context · wire red_negative
Information only
- For your awareness
Informational updates stay neutral; they are not money, rewards or failures.
component · ChatCardView · semantic context · wire blue_info
Closed without a balance change
- Closed
A routine closure is neutral: no money moved and no failure occurred.
component · SystemCardView · semantic context · wire grey_closed
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.