name: atelier-design
version: alpha
description: >
  A warm paper-and-ink sketchbook landing page for an online art school. The
  surface is a creamy off-white (#F4EEE2) wash, draped in a multiply SVG grain
  texture, with everything tilted a degree or two as if pinned to a wall. The
  voltages are painterly: ultramarine #3F5C9A, terracotta #A85A33 and sage
  #6E8C4F, set against near-black ink #33302B. The type story pairs the
  hand-drawn Caveat script for headlines, the typewriter Special Elite for
  micro-labels, and clean Karla for body. Signature moves: self-drawing SVG line
  illustrations (GSAP stroke-dashoffset), washi-tape and polaroid cards with
  clip-path torn edges, a pencil-dot cursor trail, and a hand-sketched technique
  map. Nothing has a real corner radius — cards are torn paper, badges are
  wobbly organic blobs.
colors:
  # Surface
  paper: '#F4EEE2'         # primary page surface, card fills, light text on dark sections
  paper-warm: '#e7ddc8'    # student-wall section background
  cork: '#6b5b45'          # courses corkboard section base
  ink: '#33302B'           # darkest section bg (enrolment), borders, body text, near-black
  # Brand voltages
  ultramarine: '#3F5C9A'   # "See" accent, watercolour swatch, step labels, blob borders
  terracotta: '#A85A33'    # eyebrow labels, washi tape, scrollbar, oil swatch, sketched arrows
  sage: '#6E8C4F'          # checkmarks, "free first lesson", botanical doodles, swatch
  # Text
  body-soft: '#4a463f'     # hero paragraph body
  # Hairlines / decoration handled via ink borders + grain texture overlay

Atelier Nº9

atelier-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Atelier Nº9 is a handmade-feeling landing page for an online art school, built to look like a page torn from an artist's sketchbook. The whole document sits on a creamy paper surface #F4EEE2 with color:#33302B ink type, and almost every panel carries a .grain overlay — an inline SVG feTurbulence fractal noise at opacity:0.08 and mix-blend-mode:multiply — so the cream never reads flat. The palette behaves like a limited paint set: ultramarine #3F5C9A, terracotta #A85A33 and sage #6E8C4F rotate as accents over near-black ink #33302B, and two sections invert to dark grounds (#6b5b45 corkboard, #33302B enrolment). The signature move is line that draws itself: GSAP animates strokeDashoffset on hand-drawn SVG paths — a bust illustration in the hero, arrows on a technique map, checkmarks, the "back to top" squiggle. Cards are physical objects: white polaroids and torn-paper panels (clip-path polygons) held down by translucent washi .tape, each rotated a few degrees. A canvas pencil-dot trail follows the cursor in the hero. Geometry is deliberately imperfect — no rounded-corner radii anywhere except organic "blob" badges (border-radius:48% 52% 55% 45%) and a few swatch dots — and the type is loud and informal.

Colors

Surface. The base is paper #F4EEE2, used for the page background, card fills, and as light text on dark sections. paper-warm #e7ddc8 backs the student salon-hang section. The courses section drops onto a cork #6b5b45 ground with a radial #7a6850 → #5e4f3c overlay; the enrolment section goes fully dark on ink #33302B.

Ink / text. ink #33302B is the near-black workhorse: body copy, SVG stroke color, the 6px frame borders on student work, and the dark blob badge. Body text on dark/photo elements is set as #33302B at reduced opacity (/75, /70, /60). The hero lede uses a softer body-soft #4a463f.

Brand voltages. Three painterly accents rotate by role, never blended: ultramarine #3F5C9A (the word "See", watercolour swatch, several step eyebrows, map blob borders), terracotta #A85A33 (almost every eyebrow label, the washi tape rgba(168,90,51,0.28), the scrollbar thumb, sketched dashed arrows, oil swatch), and sage #6E8C4F (checkmarks, the "free first lesson" note, botanical doodle lines, the all-work swatch).

Typography

Three Google Fonts loaded via one @import: Caveat (hand-drawn script, display/headline), Special Elite (typewriter, micro-labels and eyebrows), and Karla (clean grotesque, body). All are open-source, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(3.5rem,7.5vw,7rem)	700	0.82	—	Hero H1 (Caveat)
heading	clamp(2.5rem,6vw,4.5rem)	700	1.0	—	Section H2 (Caveat)
card-title	~30px (text-3xl)	700	tight	—	Card/step/mentor titles (Caveat)
price	48–60px (text-5xl/6xl)	700	—	—	Price figures (Caveat)
eyebrow	12px (text-xs)	400	—	widest	Section eyebrows (Special Elite, uppercase)
meta	10–11px	400	wider	—	Course codes, mentor credits (Special Elite)
body	16–18px (text-base/lg)	400	relaxed	—	Paragraphs (Karla)
body-sm	14px (text-sm)	400	normal	—	Card body, fine print (Karla)
note	24px (text-2xl)	400	—	—	Handwritten marginalia (Caveat)

Layout

Base unit is 4px on Tailwind's scale; common rhythm is py-20/py-24 section padding and gap-6/gap-10/gap-12/gap-16. Content centers in max-w-5xl/max-w-6xl containers with px-6. The page is a vertical stack of full-width sections, each relative overflow-hidden with its own grain overlay. Signature compositions: a two-column hero (text left, self-drawing SVG bust right, with a centered seam-gradient down the middle); a horizontal scroll-snap "scrap strip" of torn step cards; an absolutely-positioned technique map of organic blob nodes wired together by self-drawing arrows; a tilted polaroid grid on the corkboard; and a masonry-ish salon hang of framed student work beside a sticky filter card. Whitespace is generous; the imperfection comes from per-element transform:rotate(...) between roughly -7° and +7°.

Elevation & Depth

Depth is physical, not digital. Cards cast soft drop shadows (box-shadow:0 8px 20px rgba(0,0,0,0.12) on step cards, shadow-xl polaroids, up to 0 18px 40px rgba(0,0,0,0.5) on the featured enrolment ticket). The grain overlay (mix-blend-mode:multiply, opacity:0.08) adds paper tooth everywhere. Washi .tape strips add a translucent rgba(168,90,51,0.28) highlight with a tiny 0 1px 2px rgba(0,0,0,0.1) lift. Student work uses thick 6px solid ink frames instead of shadow. There is no glass/blur UI; the only blur is a soft radial color-bleed behind the hero headline.

Shapes

The radius story is "no radius." There are no rounded-lg cards — corners are either truly square or deliberately torn via clip-path:polygon(...) (step cards, enrolment tickets) so edges look ripped from a pad. The exceptions: organic blob badges on the technique map use lopsided border-radius:48% 52% 55% 45%-style values (never a true circle), and a few tiny rounded-full color dots in the footer/filter. Pills don't exist; buttons are either a wobbly hand-drawn SVG outline or a plain bordered box.

Components

• Hand-drawn CTA (ink-btn + SVG) — "Start Drawing →" sits on a hand-sketched SVG outline (stroke:#33302B, width 2.4), label in Special Elite. Hover lifts and rotates -1° (translateY(-2px) rotate(-1deg)).
• Bordered button — enrolment "ENROL →"/"JOIN →": Special Elite uppercase, border-2 border-[#33302B], no radius, px-6 py-3.
• Solid button — featured "ENROL NOW →": background:#33302B, paper text.
• Step card — white fill, torn clip-path polygon, ~-2°/+2° rotation, grain overlay, washi tape at top, Special Elite step label in an accent + Caveat title + Karla body. box-shadow:0 8px 20px rgba(0,0,0,0.12), w-[280px].
• Polaroid card (.polaroid) — paper fill, p-3 pb-14, shadow-xl, rotated; image h-56 object-cover, Special Elite course code (accent) + Caveat title + muted mentor line. Hover: straighten + lift + scale (rotate(0) translateY(-12px) scale(1.03)), bigger shadow, raised z.
• Mentor card — like polaroid but w-[230px], pb-8, washi tape, Caveat name.
• Blob node — ~120px square with lopsided border-radius, border-2 in an accent, paper or ink fill, Special Elite centered label.
• Enrolment ticket — paper, torn clip-path, big drop shadow, washi tape, Special Elite tier label (accent) + Caveat price + Karla blurb + button.
• Swatch filter (.swatch-filter) — torn-edge color chip (clip-path) + Special Elite label; hover scale(1.12) rotate(-3deg).
• Washi tape (.tape) — 90×30px, rgba(168,90,51,0.28), multiply blend, rotated, pinning cards.

Motion

The hallmark is self-drawing line. A JS helper sets each path's stroke-dasharray/strokeDashoffset to its true length, then GSAP animates strokeDashoffset → 0: the hero bust draws on load (duration 2s, staggered delay 0.3 + i*0.18, power1.inOut); technique-map arrows, checkmarks, the dashed connector arrow and the "back to top" return arrow draw on scroll via ScrollTrigger (start:'top 85–95%', durations 0.5–1.6s). Interaction motion: polaroids transition:transform/box-shadow .35s ease, ink-btn and swatch-filter .2s ease hover transforms. A <canvas> pencil-dot trail follows the pointer in the hero, fading dots (a -= 0.018 per frame).

Iconography

Almost no conventional icon set. Decorative glyphs come from game-icons-transparent (jsDelivr) — vine-leaf and wrapping-star SVGs — recolored with CSS filter:invert(...) and dropped at low opacity as ornament. Functional "icons" are inline hand-drawn SVG paths: the checkmark (stroke:#6E8C4F, width 3.5), the technique-map arrowhead marker (stroke:#33302B), the clip/clothespin and pencil-trail. There is no Tabler/ Lucide stroke icon system; stroke widths are illustrative (1.4–3.5).

Do's and Don'ts

• Do keep the grain overlay on every section — it's what makes the cream feel like paper.
• Do tilt elements a few degrees and pin cards with washi tape; imperfection is the brand.
• Do rotate the three accents by role and keep them unmixed (ultramarine, terracotta, sage over ink).
• Do use Caveat for anything expressive, Special Elite only for small uppercase labels, Karla for readable body.
• Don't introduce rounded-corner cards or pills — corners are square or torn.
• Don't add glassmorphism, neon glows, or flat material shadows; depth is soft paper drop-shadow + tape.
• Don't straighten everything to a rigid grid or center all type; the layout is a curated wall, not a dashboard.

Known Gaps

• Spacing and radius are inferred from Tailwind utility classes; there is no authored token scale in the HTML, so the spacing/radius scales in the helper files are reconstructed (4px base).
• The grain texture, color-bleed gradient, and pencil-trail are runtime/visual effects; their exact rendered appearance is approximated from the source values.
• Type sizes for card titles/prices are taken from Tailwind classes (text-3xl/text-5xl/text-6xl) mapped to their default px values.