Brand identity

The complete reference for Piccaso's visual and verbal language. Colors, typography, spacing, motion, layout, and tone — with interactive examples and clear dos and don'ts for every decision.

Brand Identity

Colors

Six tokens make up the entire palette. Green leads, purple accents creative contexts, orange punctuates. Charcoal and cream are the neutrals. Never hardcode hex values — always reference CSS tokens.

Hierarchy rules

Green is the hero accent

Primary CTAs, focus rings, key interactive moments. White or cream text on green fill.

Purple is the creative accent

Connector lines, creative workflow UI, decorative accents in dark contexts. Never use as a CTA fill.

Orange is the loudest color

Max once per section, never as a background. One punchy emphasis element only.

Blue is for information

Links, info states, subtle accents. Never compete with green.

Charcoal is a text color and dark mode highlighter

Use for body/display text on light backgrounds and as an accent layered on dark mode surfaces. Dark section backgrounds come from the theme (bg-foreground), not this token.

Cream is a light mode accent/highlighter

Use as a surface tint or highlight on light mode — muted cards, subtle section fills. Not a general background replacement for white.

In context

Primary CTA

Green fill, white text

Status tag

Live

Green for success states

Dark section

Theme dark background, background text.

→ Key actions in green

Brand Identity

Typography

Two fonts, clear roles. IM Fell Great Primer brings editorial authority to display text. DM Sans keeps everything readable and warm at body and UI scale.

Display

IM Fell Great Primer

H1 only

Serif. Old-world editorial character. Always weight 400. Always scaleX(0.87) via .font-serif class or .type-h1-page / .type-h1-article utilities.

Headlines / Body / UI

DM Sans

H2 and below, all body text

Humanist sans. Warm but clean. Weights in use: 100, 200, 300, 400, 500, 600. H2 uses weight 200. Eyebrow uses weight 200. Never 700.

Type tester

Click any row below to expand token details.

H1Page Title

The AI visual studio

72px

IM Fell Great Primer

↓

H1Article Title

Building a visual identity

52px

IM Fell Great Primer

↓

H2Section Heading

Everything your brand needs

44px

DM Sans

↓

H3Card Heading

Visual generation

28px

DM Sans

↓

H4Feature Title

AI-native workflow

22px

DM Sans

↓

H5Label

Brand consistency

18px

DM Sans

↓

H6Small Heading

Upload assets

15px

DM Sans

↓

Body LGBody Large

Piccaso helps brands create studio-quality visuals at scale.

18px

DM Sans

↓

BodyBody

Generate, iterate, and export brand-consistent visuals from a single creative hub.

16px

DM Sans

↓

Body SMBody Small

Published March 2025 · 5 min read

14px

DM Sans

↓

SmallSmall

By continuing you agree to our terms of service.

12px

DM Sans

↓

EyebrowEyebrow

The platform

11px

DM Sans

↓

Serif condensing (H1 only)

Serif is now used for H1 only. All H1 serif elements must have transform: scaleX(0.87) applied. Use .type-h1-page or .type-h1-article — these include the transform. H2 now uses DM Sans weight 200.

Brand Identity

Border radius

Five tokens, five contexts. Never mix them or use arbitrary values. Rounded images are explicitly banned — photos are always straight-edged.

8px

Button

--radius-btn

Buttons, inputs, form elements

12px

Card

--radius-card

Cards, panels, containers

16px

Large

--radius-lg

Large containers, modals, drawers

9999px

Pill

--radius-pill

Pills, tags, badges, toggles

0px

Image

--radius-image

All photos and images — always straight-edged

Token	Value	Use
`var(--radius-btn)`	8px	Buttons, inputs, form elements
`var(--radius-card)`	12px	Cards, panels, containers
`var(--radius-lg)`	16px	Large containers, modals, drawers
`var(--radius-pill)`	9999px	Pills, tags, badges, toggles
`var(--radius-image)`	0px	All photos and images — always straight-edged

Radius nesting

Radius shrinks as elements nest inward — large container wraps cards, cards wrap buttons.

--radius-lg · 16px · Large container

--radius-card · 12px

Visual generation

Studio-quality lifestyle shots in seconds.

--radius-card · 12px

Brand consistency

Lock in your brand voice across every asset.

Image radius — no exceptions

Correct

borderRadius: var(--radius-image) → 0px

Wrong

Never round image corners — conflicts with editorial character

Brand Identity

Shadows

One shadow level is active on the marketing site — shadow-100. All higher levels belong to the studio app. Never use Tailwind's built-in shadow utilities — only the token system.

Active on www

Level 1 — Subtle

All cards, list items, hero frame

The only shadow used on the marketing site. Rests flat — lifts to shadow-100 on hover.

.shadow-100

↑ Hover the card to see shadow-100 in action

Inactive on www — studio app only

Levels 2–6 are reserved for the studio app. Never use these on the marketing site.

shadow-200shadow-300shadow-400shadow-500shadow-600

Class	Status	Use
`.shadow-100`	Active — www	All cards, list items, hero browser frame
`.shadow-200`	Studio app only	—
`.shadow-300`	Studio app only	—
`.shadow-400`	Studio app only	—
`.shadow-500`	Studio app only	—
`.shadow-600`	Studio app only	—

Brand Identity

Spacing

All spacing follows an 8px base unit. Ten tokens cover everything from icon micro-gaps to hero-level breathing room. Never use values outside this scale.

--space-1

4pxMicro gaps, icon padding

--space-2

8pxTight component gaps

--space-3

12pxSmall internal gaps

--space-4

16pxComponent gaps (default)

--space-6

24pxMedium gaps, container padding

--space-8

32pxCard padding

--space-12

48pxLarge gaps

--space-16

64pxMobile section padding

--space-24

96pxDesktop section padding

--space-32

128pxHero-level spacing

Semantic spacing tokens

Token	Value	Rule
`var(--section-padding-y)`	96px (desktop)	Applied via .section class — never use custom py-* on sections.
`var(--section-padding-y-mobile)`	64px (mobile)	Automatically applied via .section at <640px breakpoint.
`var(--card-padding)`	32px	Standard internal padding for all cards. Never less than 24px.
`var(--component-gap)`	16px	Default gap between elements inside a component.

Section padding in action

96px top padding (desktop) via .section

↕ Section content area

96px bottom padding (desktop) via .section

Brand Identity

Padding

Where and how spacing tokens apply to specific component types. Toggle padding guides to see the exact values applied to each element.

Section content area

Page section

Applied via the .section class. Never use custom py-* on section elements.

.section

96px top & bottom

64px on mobile

Context	Token / Class	Value	Notes
Section (desktop)	`.section / --section-padding-y`	96px vertical	Never override with py-*
Section (mobile)	`.section / --section-padding-y-mobile`	64px vertical	Auto at <640px via .section
Card internal	`--card-padding`	32px all sides	Minimum 24px inside any card
Container gutter	`--container-padding-x`	24px horizontal	Built into .container — no extra px-*
Component gap	`--component-gap`	16px	Default gap between elements
Button (sm)	`py-2 px-4`	8px / 16px	Pair with --radius-btn
Button (lg)	`py-3 px-6`	12px / 24px	Pair with --radius-btn
Form input	`py-2.5 px-3`	10px / 12px	Pair with --radius-btn

Brand Identity

Motion

Animation communicates state and hierarchy — nothing more. Every transition uses one of three durations and one of two easings. No bouncy springs on marketing pages.

Durations

Micro — 150ms

var(--duration-micro)

Hover states, color changes, toggles

Standard — 250ms

var(--duration-standard)

Standard transitions, panel slides

Entrance — 400ms

var(--duration-entrance)

Scroll reveals, page entrance animations

Easing comparison

Ease Out Expo

var(--ease-out-expo)

Entrances — starts fast, decelerates sharply

Ease Standard

var(--ease-standard)

Hover states — smooth, symmetric feel

Stagger entrance

Visual generation
Brand consistency
Campaign creative
Instant export

0.08s stagger · 400ms · ease-out-expo

What animates

✓Hover states (opacity, color, shadow, scale)
✓Page section entrances on scroll (fade + translate-y)
✓Toggles and switches
✓The hero ViewToggle indicator (spring via Framer Motion)
✓The Lottie logo animation (on hover)
✓Marquee / scroll animations (linear, infinite)

What does not animate

✗Text content changes (e.g. dark/light mode copy swap)
✗Layout shifts or reflows
✗Background color changes on theme switch
✗Images loading in

Stagger children

When animating a list into view, stagger each child by 0.08s delay. Duration scales with distance — hover = 150ms, full section entrance = 400ms. Never use 400ms for a hover.

Brand Identity

Layout

Three widths govern the entire site. Section backgrounds bleed edge-to-edge. Content is always wrapped in .container. Long-form text uses .container-prose.

Container widths

Full bleed

100%

Section background only — never content

Container

1280px

All section content — use .container class

Prose

720px

Blog/docs long-form text — .container-prose

Token	Value	Class	Use
`var(--container-max-width)`	80rem / 1280px	`.container`	All section content wrappers
`var(--container-prose)`	45rem / 720px	`.container-prose`	Blog posts, docs, long-form text
`var(--container-padding-x)`	1.5rem / 24px	`(built into both)`	Horizontal gutter — do not add extra px-*

<section className="bg-foreground">
  <div className="mx-auto w-full max-w-7xl px-6">
    {/* content here */}
  </div>
</section>

Brand Identity

Tone of voice

Calm, precise, confident. Like a master craftsperson who doesn't need to shout. No exclamation marks. No em-dashes in headlines. Sentences under 20 words.

Calm, precise, confident.

Like a master craftsperson who doesn't need to shout.

Casing rules

Element	Casing	Example
Headlines	`Sentence case`	"The AI visual studio for brands"
Eyebrows	`ALL CAPS`	"THE PLATFORM"
CTAs	`Sentence case`	"Get early access"
Navigation	`Title Case`	"Early Access"
Body copy	`Sentence case`	"No briefing documents required."

Before / after — pick a category

Do — Headline casing

Modern day Piccaso for AI-native ecommerce brands

Don't — Headline casing

Modern Day Piccaso For AI-Native Ecommerce Brands

Sentence case always. Only the first word and proper nouns are capitalised.

Banned words

Never use Oxford buzzwords in any copy — headlines, body, CTAs, or UI labels.

leveragesynergyseamlessgame-changingrevolutionarycutting-edgeunlockempowerdisrupt

Brand identity

Colors

Hierarchy rules

In context

Typography

Border radius

Radius nesting

Image radius — no exceptions

Shadows

Active on www

Spacing

Semantic spacing tokens

Section padding in action

Padding

Motion

Durations

Layout

Container widths

Tone of voice

Casing rules

Before / after — pick a category

Banned words

Your brand deservesbetter visuals.

Your brand deserves
better visuals.