Brand Guidelines

Better Studio design system — colors, typography, components, spacing, and brand identity

Colors

Better Studio follows the 60/30/10 rule: 60% warm neutrals, 30% deep navy text, 10% accent pink & yellow.

60%

Neutral

Warm beige/cream backgrounds

30%

Primary

Deep navy text & UI chrome

10%

Accent

Pink CTAs & yellow highlights

Neutral Palette

Warm beige/cream tones — NOT cold grays.

Primary Palette

Deep navy/indigo tones for text and typography.

Accent 1 — Pink

Primary CTA color. Buttons, text links, brand recognition.

Accent 2 — Yellow/Mustard

Secondary accent for highlights, progress indicators, badges.

Secondary Palettes

Purple

Green

System Colors

Success

Warning

Error

Shades

Not pure black/white to avoid eye strain.

Typography

Figtree is the sole typeface. Weights: 500 (Medium), 600 (SemiBold), 700 (Bold), 800 (ExtraBold).

Headings

H1 Large80px / 800 / 1.1

H165px / 800 / 1.2

H1 Small48px / 800 / 1.1

H2 — Major sections42px / 800 / 1.2

H3 — Sub-sections36px / 800 / 1.2

H4 — Card titles32px / 800 / 1.2

H5 — Feature headings28px / 800 / 1.2

H6 — Panel headers24px / 700 / 1.2

H7 — Small headings, widget titles20px / 700 / 1.2

Subheadlines

Subheadline 1 — Hero descriptive text28px / 500 / 1.4

Subheadline 2 — Section descriptions24px / 600 / 1.4

Subheadline 3 — Card subtitles, feature descriptions20px / 600 / 1.4

Body Text

Paragraph L — The quick brown fox jumps over the lazy dog18px / Medium

Paragraph L Bold — The quick brown fox jumps over the lazy dog18px / Bold

Paragraph M — The quick brown fox jumps over the lazy dog17px / Medium

Paragraph R (Default) — The quick brown fox jumps over the lazy dog16px / Medium

Paragraph R Bold — The quick brown fox jumps over the lazy dog16px / Bold

Paragraph S — The quick brown fox jumps over the lazy dog14px / Medium

Paragraph S Bold — The quick brown fox jumps over the lazy dog14px / Bold

Paragraph XS — The quick brown fox jumps over the lazy dog13px / Medium

Text Links

Links inherit size from context but always use Accent Pink-500 with underline for inline links.

Font Weights

500 Medium

Body, subheadlines, labels

600 SemiBold

Subheadline 2 & 3

700 Bold

H6, H7, bold body

800 ExtraBold

H1–H5, hero headings

Components

Interactive UI elements following the Better Studio design system.

Buttons — 6-Tier Hierarchy

Primary — Pink CTA

Secondary — Dark Navy

Tertiary — Outline/Ghost

Quaternary — Subtle text

Product — Compact inline

Text Link — Underlined

Icon Buttons

Form Inputs

Standard InputHelper text

Error StateThis field is required

Search Input

Select / Dropdown

Checkbox (checked)CheckboxRadio ARadio B

Cards

Standard Card

White background, 12px radius, 1px neutral border.

Elevated Card

Added shadow for modals, popovers, floating panels.

Selected Card

Pink border + tint on selection.

Product Card

3:4 aspect ratio

Generated Status

Generated

shot_001_front.png

Delivered Status

Delivered

shot_002_side.png

Add Card

Add New

Pricing Cards

Starter (Featured)

Starter

For small teams and individuals

€99/month

€1,068 billed annually

Starting from

€9.5/image

Up to 500 images/month

AI model library access

Background removal

Basic retouching

Email support

Enterprise

For large teams and agencies

Custom

Volume pricingContact us

Everything in Starter Plan +

Unlimited images

Custom AI model training

Priority processing

Dedicated account manager

SSO & team management

Custom integrations

Badges & Tags

Solid Badges

PrimarySecondaryPinkPurpleInfoSuccessWarningErrorYellowGradient

Outline Badges

OutlinePinkPurpleSuccessWarning

Tags / Chips

Default Tag SelectedFiltered

Toggle Switches

Off

Disabled

Tabs & Navigation

Underline Tabs

Segmented Control

Large Visual Tabs

Pricing Toggle

Tabs with Badges

Tooltips

Simple tooltip

Info tooltip with icon

System Feedback

Shot approved

Your shot has been approved by the client.

Upload limit reached

You have used 90% of your monthly upload quota.

Generation failed

The AI model encountered an error. Please try again.

Processing started

Your photoshoot is being generated. This may take a few minutes.

Tables

Token	Value	Usage
--bs-cta-default	#FF2551	Primary CTA background
--bs-cta-hover	#D91D43	CTA hover state
--bs-text-primary	#17172D	Primary text color
--bs-text-secondary	#62627E	Secondary text
--bs-bg-page	#FCFBFA	Page background

Contextual Floating Bars

Base Selection Bar

3 items selected

Shot Builder Bar

Compact Bar

Review Bar

Garment Selection Bar

Select garments2 selected

Warning Bar

Some images failed to process

Pose Selection Strip

4 poses

Model Stack Bar

Model 1

Model 2

Model 3

3 models selected

Modals & Overlays

Base Modal

Confirm Action

Are you sure you want to proceed? This action will apply changes to all selected items.

3-Section Modal

Edit Photoshoot Settings

Configure generation parameters

Model selection

Background settings

Lighting profile

Output resolution

Color grading

Form Modal

Create Photoshoot

Name *

Description

Type *

Multi-Step Wizard

Step 2 of 4

Select Background

Studio White

Outdoor Park

Urban Street

Summary / Review Modal

Photoshoot Summary

Review settings before generating

ModelSofia Martinez

BackgroundStudio White

Products12 items

Resolution4096 × 4096

Output FormatPNG

Selection Grid Modal

Select Garments

Choose products for this photoshoot

Blue Jacket

Red Dress

White Tee

Black Pants

Denim Skirt

Silk Blouse

Wool Coat

Linen Shirt

3 selected

Destructive Confirmation

Remove All Products

This will remove all 12 products from this photoshoot. Generated shots will not be affected.

Empty States

No photoshoots yet

Create your first AI photoshoot to see results here.

Spacing & Layout

4px base unit spacing scale, grid system, breakpoints, and elevation.

Spacing Scale

--bs-space-1

4pxIcon-to-text

--bs-space-2

8pxRelated items gap

--bs-space-3

12pxCompact padding

--bs-space-4

16pxStandard padding

--bs-space-5

20pxCard padding

--bs-space-6

24pxSection padding

--bs-space-8

32pxSection separation

--bs-space-10

40pxPage section margins

--bs-space-12

48pxLarge section gaps

--bs-space-16

64pxHero section spacing

Border Radius

4px

8px

12px

pill

20px

full

9999px

Elevation & Shadows

Level 0 — Flat

1px border only

Level 1 — Raised

Hover states

Level 2 — Elevated

Dropdowns

Level 3 — Floating

Modals

Breakpoints

Mobile

0px

Single column, stacked

Tablet

768px

2-col grids, collapsible sidebar

Desktop

1024px

Full sidebar, 3+ col grids

Wide

1440px

Max content width reached

Brand Identity

Logo usage, gradients, tone of voice, imagery guidelines, and iconography.

Gradients

Brand Gradient

135deg, #FF2551 → #FFB800

Rich Gradient

3-stop with underlay

Angular Gradient

#FFB800 → #FF2551 → #F7EFE9

CTA Gradient

Marketing/pricing only

Iconography — Lucide Icons

Lucide icons exclusively. Sizes: 16px (inline), 20px (default), 24px (large).

Actions

save

plus

trash-2

check

arrow-right

refresh-ccw

expand

download

upload

copy

edit-2

eye

eye-off

Navigation

chevron-down

chevron-right

Status / Feedback

check-check

triangle-alert

circle-stop

info

loader-2

Domain

sparkles

package-open

calendar-clock

camera

image

wand-2

Communication

bell

message-circle

share-2

Icon Sizes

16px

Inline

20px

Default

24px

Large

Tone of Voice

Confident but not arrogant

We know AI photography, but we respect traditional craft

Warm but professional

Fashion-world friendliness meets SaaS reliability

Clear but not dumbed-down

Our users are creative professionals, not beginners

Efficient but not cold

We value their time without being robotic

Naming Conventions

Concept	Use	Avoid
AI photo generation	Photoshoot	Generation, Render
Individual result	Shot	Image, Output
Product item	Product	Item, SKU
Collection of shots	Results	Outputs, Deliverables
Client workspace	Project	Workspace, Account
Configuration	Settings	Configuration, Parameters

Do / Don't Quick Reference

Use warm Neutral backgrounds (#FCFBFA, #FAF7F5)
Use Pink-400 (#FF2551) for primary CTAs
Use Figtree font exclusively
Use 8px border-radius as default
Use border-based elevation (1px solid Neutral-200)
Follow 60/30/10 color distribution

DON'T

Use pure black (#000000) anywhere
Use cold gray (#808080, #CCCCCC)
Use generic blue (#0066FF) for buttons or links
Use heavy drop shadows
Use gradients on buttons or text
Mix fonts or use weights not in system

CSS Variables Reference

CSS Variables

.bs-app {
  /* Neutral */
  --bs-neutral-50: #FCFBFA;
  --bs-neutral-100: #FAF7F5;
  --bs-neutral-200: #F2EEEB;
  --bs-neutral-500: #E5DDD6;

  /* Primary */
  --bs-primary-200: #9292A6;
  --bs-primary-250: #62627E;
  --bs-primary-400: #17172D;

  /* Accent Pink */
  --bs-pink-400: #FF2551;
  --bs-pink-500: #D91D43;

  /* Accent Yellow */
  --bs-yellow-400: #FFB800;

  /* Semantic Aliases */
  --bs-bg-page: var(--bs-neutral-50);
  --bs-bg-surface: var(--bs-neutral-100);
  --bs-text-primary: var(--bs-primary-400);
  --bs-text-secondary: var(--bs-primary-250);
  --bs-text-muted: var(--bs-primary-200);
  --bs-border-default: var(--bs-neutral-200);
  --bs-cta-default: var(--bs-pink-400);
  --bs-cta-hover: var(--bs-pink-500);
  --bs-highlight: var(--bs-yellow-400);
}