Rosie's taste, written down.

A taste profile is everything that makes a brand recognisably itself — tokens, voice, patterns, the whole feel. This is Rosie's, ready for the team or any AI tool to build with.

Explore

Essence + Personality

Capable BUT warm

Capable but friendly. Rosie fights cold, intimidating AI aesthetics with warm purple energy and soft edges. Every screen should feel like a helpful person is on your side — organized, clear, and genuinely approachable.

Personality

A 35-year-old office manager who's great at her job and actually likes people. She wears lavender, speaks clearly without being stiff, and makes sure everyone feels taken care of. People say: "She's so organized, but never makes you feel bad about it."

In one line

Capable but friendly. AI that feels like a helpful person, not intimidating software.

— Rosie design system

Always do

Five principles

The non-negotiables. Every decision should be defensible against this list.

01
Warm Purple
Purple is primary, but warm and friendly, never cold or royal
02
Approachable Tech
AI should feel like a helpful person, not intimidating software
03
Breathing Room
Generous whitespace lets content feel confident, not cramped
04
Soft Edges
Rounded shapes everywhere; nothing sharp or aggressive
05
Clear Hierarchy
Bold headlines, lighter body text, obvious CTAs

Never

Five guardrails

If a design choice could be described by any of these, it's wrong for Rosie.

Cold blues or grays as primary colors
Robotic or clinical UI aesthetics
Sharp corners on buttons or cards
Dense, overwhelming layouts
Corporate jargon over conversational tone

Brand

Logo & marks

The mark and the wordmark. Clear-space rules and usage guidance are coming in v1.1 — for now, treat the mark as self-contained and reach for the wordmark when you need the name to carry.

Mark

/brand/logos/rosie-mark.svg

Wordmark

/brand/logos/rosie-wordmark.svg

Color

Palette

Click any value to copy. Roles describe semantic intent — never reference hex values directly in code.

background

Page background

#FFFFFF

var(--color-background)

background-subtle

Cards & light surfaces

#FBF7FF

var(--color-background-subtle)

foreground

Primary text

#2A143C

var(--color-foreground)

foreground-secondary

Body text

#2B143DB3

var(--color-foreground-secondary)

foreground-muted

Captions & helper text

#A89FB3

var(--color-foreground-muted)

accent

Primary buttons & links

#9332E0

var(--color-accent)

accent-hover

Button hover state

#822AC6

var(--color-accent-hover)

accent-highlight

Gradient top stop, borders

#A83FC1

var(--color-accent-highlight)

border

Subtle borders

#E8E0F0

var(--color-border)

accent-light

Light backgrounds & badges

#EAD7FD

var(--color-accent-light)

highlight

Sea green callouts

#27C3A7

var(--color-highlight)

dark

Deep purple, shadows

#49097D

var(--color-dark)

disabled-background

Disabled control surface

#D8D4DE

var(--color-disabled-background)

Accessibility

Contrast grid

WCAG ratings for every text/background pair. AA is the floor; AAA is the goal for body copy.

Text →	foreground	foreground-secondary	accent	dark
background	Aa 16.62AAA	Aa 16.53AAA	Aa 5.57AA	Aa 12.97AAA
background-subtle	Aa 15.71AAA	Aa 15.63AAA	Aa 5.26AA	Aa 12.26AAA
accent	Aa 2.99Fail	Aa 2.97Fail	Aa 1.00Fail	Aa 2.33Fail
accent-light	Aa 12.37AAA	Aa 12.31AAA	Aa 4.14Fail	Aa 9.66AAA
highlight	Aa 7.48AAA	Aa 7.44AAA	Aa 2.50Fail	Aa 5.84AA
dark	Aa 1.28Fail	Aa 1.27Fail	Aa 2.33Fail	Aa 1.00Fail

Typography

Type system

Display: Outfit. Body: Outfit (with Inter for dense data).

Hero · Outfit 700 · 72px

Never miss a call again.

H1 · Outfit 800 · 56px

Capable, never cold.

H2 · Outfit 700 · 40px

Built like a real teammate.

H3 · Outfit 700 · 28px

What Rosie hears.

Body large · Outfit 400 · 20px

Rosie picks up on the first ring and routes the right calls to your team.

Body · Outfit 400 · 18px

Configure a number, train Rosie on your business, and start answering.

Caption · Outfit 500 · 14px

Updated 2 min ago

Shape

Soft edges, always

Three radii, three jobs. Pills for action, soft squares for content, modest curves for inputs.

button

50px

var(--radius-button)

card

16px

var(--radius-card)

input

9999px

var(--radius-input)

Spacing

The breathing-room scale

Five tokens cover ~95% of layouts. Whitespace is the loudest brand signal Rosie has.

section-y

var(--spacing-section-y)

96px

section-x

var(--spacing-section-x)

50px

card-padding

var(--spacing-card-padding)

24px

gap-sm

var(--spacing-gap-sm)

20px

gap-lg

var(--spacing-gap-lg)

40px

Elevation

Soft, intentional shadows

Soft, intentional depth. `card` lifts surfaces, `button` seats controls, `focus-ring` signals keyboard focus.

card

var(--shadow-card)

0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.04), 0 8px 24px -6px rgba(0, 0, 0, 0.08)

button

var(--shadow-button)

0 1px 2px rgba(16, 24, 40, 0.05)

focus-ring

var(--shadow-focus-ring)

0 0 0 4px rgba(173, 93, 239, 0.24)

Voice & Tone

How Rosie talks

Active voice, contractions OK, no exclamation marks unless something is genuinely worth celebrating. The personality from the top of the doc, all the way down to the buttons.

Context

In brand

Off brand

Hero headline

Yes

Never miss a call again.

AI-powered telephony solutions for the modern enterprise.

Empty state

Yes

No calls yet. We'll be ready when they ring.

No data available.

Error

Yes

That number didn't go through. Want to try again?

Error 4019: Invalid input parameter.

Success

Yes

Done. Your team will see this in their inbox.

Operation completed successfully.

Confirmation

Yes

Sure you want to delete this? It's gone for good.

Are you sure you want to perform this destructive action?

CTA

Yes

Try Rosie free

Click here to start your trial today!

Components

Themed primitives

Every primitive is wired to Rosie's tokens. Drop these in product code with zero per-page CSS.

Buttons

Pill radius. Primary uses a top-lit purple gradient; hover flattens to accent-hover. Secondary and ghost hold the supporting levels.

Inputs

Full pill radius, purple-tinted border, focus shifts to accent with a soft glow.

Badges

Light purple for status, warm yellow for emphasis, solid for live signals.

BetaMost popularLiveArchived

Card

Subtle purple background, 16px radius, generous internal padding. The default surface for grouping content.

Inbound call · 2m 14s

Booked

Caller asked about Saturday availability. Rosie booked 10:30am with Maya and sent a confirmation SMS.

Use with AI

Make Rosie Claude-ready

Rosie is built so AI tools can read the design system as a source of truth. Drop these files into Claude Design for visual work or Claude Code for production implementation.

For Claude Design (visual prototyping)

Install the portable skill so Claude Design has the full brand narrative and token table in memory.

For Claude Code (production implementation)

Point Claude Code at this repo. Rules live in CLAUDE.md and .claude/skills/rosie-design/. Every visual decision references a token.

Example prompt

Paste this into Claude Code to kick off work inside the system.

Build a pricing page for Rosie. Use only tokens from
design-system/tokens.json and primitives from
components/primitives/. Stay in voice per DESIGN.md §8.

For agents

Hand off to AI

Copy the source-of-truth files straight into Claude Design or Claude Code. The design system goes anywhere these files go.

DESIGN.md

Narrative source of truth — for Claude Design

9,914 chars

tokens.json

W3C DTCG tokens — for Claude Code

3,368 chars

tokens.css

Generated CSS variables — for any consumer

1,478 chars

Open in Claude Design

Copy the DESIGN.md and a session preamble, then open Claude Design in a new tab.