Creative Minds Creative Hands

Color system

Gallery light (Porcelain) with Studio Ink, Atelier Teal primary, Brass boutique accent, and Celadon support.

Porcelain

#F8F7F4

Studio Ink

#141816

Atelier Teal

#1F5C56

Brass

#9A7B4F

Celadon

#A8C5BE

Clay Dust

#B8957A

Mist

#E8E6E1

Destructive

#A63D3D

Typography

Cormorant Garamond for display, Figtree for UI, Source Serif 4 for long-form, IBM Plex Mono for labels.

Display · Cormorant Garamond

Hands that make meaning.

Sans · Figtree

Clear UI copy for portals, forms, and navigation — refined without coldness.

Body · Source Serif 4

Editorial reading for journal stories, course descriptions, and brand narratives.

Mono · IBM Plex Mono

SKU-CH-042 · ORDER #9182

Spacing scale

8-point base scale from 4px to 128px for consistent rhythm across marketing and portals.

4px

8px

12px

16px

24px

32px

48px

64px

Buttons

Quiet corners, generous padding, Atelier ease. Brass reserved for boutique moments.

Cards

Use cards only as interaction or content containers — gallery rings over heavy shadows.

Wheel Foundations

6-week ceramics course

From centering to glaze — guided step by step.

Handmade

Stoneware Bowl

One-of-one · studio made

₹2,400

Custom commission

Quote · deposit · make

Tell us what you need — we respond with a clear quote.

Forms, inputs & dropdowns

Calm fields, clear labels, accessible errors. Select and menus use Radix primitives.

Enrollment inquiry

Sample form pattern for academy intake.

Full name

As it should appear on certificates.

Email

Enter a valid email address.

Discipline

Notes

I agree to studio policies

Email reminders

Adult learner

Child (guardian required)

Navigation, header, sidebar, footer

Marketing header and footer wrap public pages. Portal shell uses shadcn Sidebar.

Marketing header / footer Admin sidebar shell

Sticky translucent header, Explore mega-menu, mobile Sheet, calm footer columns for Learn / Shop / Visit / Portals.

Tables

Dense but readable data for admin ops — hairline separators, muted headers.

Course	Trainer	Fill	Status
Wheel Foundations	Asha K.	10/12	Open
Watercolor Studio	Neil R.	8/10	Open
Kids Clay Camp	Priya M.	12/12	Full

Charts

Recharts via shadcn Chart — brand chart tokens (teal, brass, celadon).

Enrollment vs boutique

Sample admin KPI sparkline area.

Alerts, modals & toasts

Calm feedback — informative first, dramatic only when needed.

Studio hours updated

Saturday open studio now closes at 6pm.

Enrollment confirmed

Your seat in Wheel Foundations is reserved.

Low stock

Stoneware Bowl has 1 unit remaining.

Payment failed

Try another method or contact the studio.

Loading states

Spinners for short waits, skeletons for content-shaped placeholders.

Animations

Atelier ease (cubic-bezier 0.22, 1, 0.36, 1). Fast 150ms · Base 280ms · Slow 480ms. Respects prefers-reduced-motion.

Accessibility

WCAG 2.2 AA target — focus rings, SR-only labels, dialog semantics, reduced motion.

Visible :focus-visible rings using brand teal / celadon
Icon buttons require aria-label
Form errors use role="alert"
Modals trap focus via Radix Dialog
Color is never the only status signal (icons + text)

Responsive grid

container-ch max-width 80rem with fluid padding. Breakpoints: sm 640 · md 768 · lg 1024 · xl 1280.

1

2

3

4

5

6

7

8

9

10

11

12

Example product grid: 1 col mobile · 2 md · 3–4 lg. Portal content uses stacked → split layouts at md+.