# Figma Playful

## Overview
A bright, colorful product-marketing aesthetic with a clean skeleton and a multicolor soul. The chrome is deliberately restrained — pure white canvas, pure black text and CTAs, generous whitespace, thin gray hairlines. Personality is not carried by the layout; it is carried by color. Figma's signature five brand hues spill across the hero as a gradient collage and reappear as accent chips, filled cards, and chart colors. The rule: keep the frame calm so the color can play.

## Colors & Roles
Neutral foundation is honest black-and-white (measured): `background` pure white (oklch 1), `foreground` and `primary` pure black (oklch 0). Primary is black because the site's dominant CTAs ("Get started for free", "Allow all cookies") are all black fills. The color lives in `accent` and `chart-1..5`: the Figma brand five — red (oklch 0.652/0.234/27), orange (0.714/0.186/41), purple (0.591/0.244/292), blue (0.747/0.154/234), green (0.742/0.182/153) — sampled directly from the logo pixels. `accent` = `ring` = brand purple, used for emphasis and focus only. Body text stays black; color belongs on cards, chips, illustrations, and data — never on running text.

## Typography Rules
One family, figmaSans (proprietary → Inter fallback). The signature move is "big but not bold": the measured H1 is 56px at weight **400** with letter-spacing −1.25px (≈ −0.022em). Large titles get their presence from size and tight negative tracking, not from heavy weight. Weights observed are 320/330/400 — 400 for body and headings, a lighter 330 for lead/subtext. No uppercase tracked labels (that is the editorial idiom, not this one); the voice is friendly sentence-case. Scale ratio ≈ 1.25.

## Layout Principles
Wide container (~1440px). Hero is left-aligned copy beside a right-side brand-illustration collage. Feature sections use 2–3 column card/illustration grids with a short heading + lead + colorful visual. Vertical rhythm is large — section gaps `clamp(5rem, 10vw, 9rem)`. Airy white space is the stage; color reads as points on it.

## Depth & Elevation
Restrained. The measured shadow is a 1px inset hairline (rgba(0,0,0,0.16)), effectively a border-shadow. Soft drop shadows are reserved for truly floating elements (popovers, dropdowns, the cookie banner). Section cards separate by color fill or hairline, not by heavy shadow. Gradients appear only inside hero illustration cards (coral→peach, purple→indigo, teal→green); the page background stays flat white.

## Shapes
Friendly, rounded. Buttons and inputs 8px, cards 16px, status badges and nav CTAs full pills (9999px). Corners are soft by rule — the opposite of the editorial zero-radius idiom.

## Component Stylings
- **Button**: primary = black fill, white text, 8px radius, padding 12px 22px, 16px/400. Hover darkens slightly or micro-scales (1.02). Focus = 2px purple ring. Secondary = transparent + 1px hairline ("Contact sales"). Ghost = nav links, transparent with a faint hover fill.
- **Card**: white fill, 16px radius, separated by hairline or color. Emphasis cards fill a chart-*/accent brand color full-bleed with white text.
- **Input**: white fill, 1px hairline, 8px radius; focus border → purple ring.
- **Nav**: white bar with a 1px light-gray bottom hairline. Multicolor Figma mark left, dropdown links center (16px black), right side "Log in" + outlined "Contact sales" + black "Get started for free" pill.
- **Badge**: pill, 12–14px, brand color fill or 10% tint (playful color tags).

## Motion
Lively but not gimmicky. Opacity fades + 8–12px slides, hover micro-scale (1.02). A small `pop` keyframe for playful entrances. Avoid heavy spring overshoot and parallax overuse.

## Do's and Don'ts
**Do:** keep the frame black-and-white and clean; scatter the five brand colors on cards/chips/illustrations/charts; make primary CTAs black; use brand purple for accent and focus; keep big titles at weight 400 with −0.022em tracking; soft radii and airy space.
**Don't:** color body text; go bold (700+) on large titles; divide with heavy shadows; flood the whole background with gradient; treat dark mode as canonical; use uppercase tracked labels.

## Responsive Behavior
The wide grid collapses to a single column on mobile; the hero collage stacks below the copy. Display type scales via `clamp()`. Nav condenses to a menu; the black "Get started" pill stays prominent.

## Agent Prompt Guide
> Build this in the 'Figma Playful' style: bright product-marketing with a clean skeleton and a multicolor soul. Pure white background, pure black text and primary CTAs, generous whitespace, thin gray hairlines instead of heavy shadows. Personality comes from Figma's five brand colors (red, orange, purple, blue, green) as accents, chart colors, filled cards, pills, and a gradient hero-illustration collage — never on body text. Accent and focus rings are brand purple. figmaSans (Inter fallback): large headings stay weight 400 with tight −0.022em tracking. Friendly radii (8px buttons, 16px cards, pills). Author a near-black dark mode keeping the same vivid multicolor brand.

## Known Gaps / Confidence
The stage-1 extractor fell back to `domcontentloaded` and measured **only pure black and white** — reliable for the neutral skeleton (`colors_neutral: computed-css`), but it captured **none of the brand palette**. The five brand colors and the vivid yellow were therefore reconstructed by directly pixel-sampling the Figma logo and hero collage from the light screenshots (`colors_brand: vision-inferred`, approximate — logo-render hues, not official brand hex, and the hero cards are gradients not flat fills). `radius.box` was taken from the button/card samples (8/16px), not the draft's 9999px (which came from pills/dots). `border` uses the visible nav hairline (#e6e6e6), not the measured white noise value. There is **no native dark mode** on figma.com, so the dark set is synthesized. The `playful-maximalism` family is an honest-but-imperfect fit: the site's chrome is actually clean and restrained (closer to corporate-clean), and the "playful/maximalist" reading comes from the multicolor brand and hero collage rather than layout density — captured in `style_tags` as `clean-chrome`. figmaSans is proprietary; Inter is the practical Google-Fonts fallback.