Do hours of design-system review in minutes

A Strawberry-flavored catalog for warm AI-browser surfaces, ink pill actions, coral markers, and assistant-first product patterns.

Explore patterns View components

Automate anything... compare pricing cards, inspect spacing, collect tokens

28Colors

15Type levels

22Components

76Tokens

01 / Colors

Warm cream, ink, coral punctuation

The palette stays quiet: pale canvas, cream panels, ink actions, and tiny fruit-toned signals.

primary

#252522

Ink CTA, send state, chat reply.

signature-coral

#F2805D

Diamonds, chips, popular outline.

canvas

#FFFCFA

Warm page and header base.

surface

#FFFEFE

Elevated prompt and menus.

surfaceAlt

#F7F2ED

Cards, bubbles, CTA panels.

muted

#858481

Descriptions and nav labels.

border

#EFE6DC

Quiet hairlines.

borderStrong

#E6DBD1

Prompt rings and controls.

berry-red

#ED5A31

Fruit mark identity.

leaf-gold

#D6C530

Logo leaf and warning family.

feature-blue

#678FFF

Plan feature geometry.

success

#22C55E

Savings and confirmation badge.

02 / Typography

Soft grotesque, tight headings

Headings are medium-light, compact, and tracked inward; body copy stays calm and loose.

Multiply yourself

display - 72px / 480 / 1.1 / -0.04em / Inter substitute

Do hours of work in minutes

hero - 52.8px / 480 / 1.1 / -0.04em / Inter substitute

Browse with companions

headline-lg - 56px / 480 / 1.1 / -0.04em / Inter substitute

A browser that handles research

title-lg - 40px / 480 / 1.2 / -0.04em / Inter substitute

Plan cards and product panels

title-md - 24px / 480 / 1.4 / -0.03em / Inter substitute

Strawberry copy uses muted hierarchy and practical phrasing.

body-lg - 18px / 400 / 1.4 / -0.0075em / Inter substitute

03 / Buttons

Ink pills, quiet secondary actions

Coral is never the default CTA fill; Strawberry uses ink for action and coral for signal.

button-primary

button-primary-hover

button-primary-active

button-secondary

button-ghost-nav

button-icon

send-button

pricing-chip

04 / Cards & Surfaces

Cream blocks, soft product density

Cards are rounded, flat, and warm. Shadows appear only when a surface behaves like a tool.

GSL

Use-case card

Stacked app icons and a compact CTA make automation scenarios feel native.

See how

Pricing card

A coral outline marks emphasis while keeping the card in the cream family.

Get Intern

Hero input surface

Near-white, softly raised, and ringed with warm border contrast.

Automate

Flat canvas card

Depth can come from spacing and border alone when the surface is secondary.

Tokens

Testimonial tile

Occasional squared corners create a hand-placed grid without losing softness.

Radius

CTA panel

Large cream fields carry short, centered action language.

Download

05 / Brand-Specific Product Patterns

Browser automation as warm UI

These mockups carry Strawberry's identity even without the name: prompt bar, companions, bubbles, app stacks, and geometric pricing marks.

Prompt command surface

Automate prospect research across open tabs...

3 sources attached

FAQ bubble pattern chat

How do credits work?

Credits are used when companions chat or browse for you.

App context stack overlap

CRMGDBPDF

Research across tools

Circular app nodes overlap with cream borders, matching use-case cards.

Migration flow browser -> AI

CSF

Pricing cards plans

Free

2,000 credits

Intern

$20

8,000 credits

Full-time

$250

75,000 credits

Trusted company marquee masked

Trusted by fast-growing companies worldwide

ANTHROPICSTRIPELOVABLEEQTTANDEMANTHROPICSTRIPELOVABLE

06 / Forms

Low-friction product inputs

Inputs use warm borders, quiet labels, and focus rings that stay near ink.

Default input Focus input Select Error stateCheck credentials Textarea

Choices Save context locally Use monthly credits

07 / Spacing

Compact rhythm, generous sections

A simple 4/8 scale supports tight product modules and large page-level breathing room.

xs / 4px

sm / 8px

md / 16px

lg / 24px

xl / 32px

xxl / 48px

section / 120px

08 / Radius

Soft, round, almost pill-shaped

Small UI corners stay practical; main surfaces use 24px and actions use full pills.

4px

Badges, nav

8px

Toggle active

12px

Menus, inputs

16px

Secondary panels

24px

Cards

input

29px

Prompt bar

bubble

28px

Chat bubbles

pill

9999px

CTAs, icons

09 / Elevation

Mostly flat, raised only for tools

Depth comes from surface color, spacing, and radius; shadows mark interactive product surfaces.

Flat card

No shadow. Cream contrast defines the block.

box-shadow: none

Prompt input

Soft lift plus a warm one-pixel ring.

0 6px 24px #0000000D

Toggle active

Tiny elevation for segmented controls.

0 1px 3px #0000001A

10 / Extracted Component Tokens

CSS custom properties

The preview declares every core token in :root and reuses them across all components.

:root {
  --brand-primary: #252522;
  --brand-accent: #F2805D;
  --brand-ink: #252522;
  --brand-muted: #858481;
  --brand-canvas: #FFFCFA;
  --brand-surface: #FFFEFE;
  --brand-surface-alt: #F7F2ED;
  --brand-border: #EFE6DC;
  --brand-border-strong: #E6DBD1;
  --brand-success: #22C55E;
  --brand-warning: #C8B828;
  --brand-error: #EF4343;
  --brand-berry: #ED5A31;
  --brand-leaf: #D6C530;
  --brand-olive: #AD9D25;
  --brand-blue: #678FFF;
  --brand-lavender: #ACA0DF;
  --brand-stroke: #EFEBE7;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 120px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-input: 29px;
  --radius-bubble: 28px;
  --radius-pill: 9999px;
  --shadow-input: 0 6px 24px #0000000D, 0 0 0 1px #E6DBD1;
}