# Figma Playful 새하얀 캔버스에 검정 텍스트·CTA로 뼈대를 잡고, 히어로에 피그마 시그니처 멀티컬러(레드·오렌지·퍼플·블루·그린)를 콜라주처럼 흩뿌리는 밝고 장난스러운 프로덕트 마케팅 스타일 — 크롬은 절제, 컬러가 성격을 만든다. - taxonomy: playful-maximalism · multicolor-brand, playful, product-saas, clean-chrome, gradient-collage, generous-whitespace, black-cta, rounded-friendly, design-tool · complexity=medium - page types: landing, marketing, app, portfolio - best for: 밝고 발랄한 프로덕트/SaaS 랜딩 페이지, 크리에이티브·디자인 도구 마케팅 사이트, 멀티컬러 브랜드를 가진 스타트업 히어로, 친근한 온보딩·기능 소개 페이지 - avoid for: 엄숙한 금융·법률·엔터프라이즈 코퍼릿 사이트, 다크 시네마틱 프로덕트 UI, 흑백 에디토리얼·인쇄 감성 콘텐츠, 고밀도 데이터 대시보드 - provenance: website (Figma: The collaborative canvas for design, code, and AI) — confidence: colors_neutral=computed-css, colors_brand=vision-inferred, typography=computed-css, radius=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred, effects=vision-inferred, light=computed-css, dark=vision-inferred ## Design rules # 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. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Figma Playful — theme.css (generated, do not edit) */ :root { --radius: 16px; --radius-selector: 9999px; --radius-field: 8px; --font-sans: figmaSans, "figmaSans Fallback", "SF Pro Display", "Inter", system-ui, helvetica, sans-serif; --font-mono: figmaMono, "figmaMono Fallback", "SF Mono", menlo, monospace; --font-display: figmaSans, "figmaSans Fallback", "SF Pro Display", "Inter", system-ui, helvetica, sans-serif; --spacing: 8px; --shadow: 0px 0px 0px 1px color-mix(in oklab, oklch(0 0 0) 16%, transparent); --ks-display-weight: 400; --ks-display-tracking: -0.022em; --background: oklch(1 0 0); --foreground: oklch(0 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0 0 0); --primary: oklch(0 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.970 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.970 0 0); --muted-foreground: oklch(0.475 0 0); --accent: oklch(0.591 0.244 291.7); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.652 0.234 26.7); --destructive-foreground: oklch(1 0 0); --border: oklch(0.925 0 0); --input: oklch(0.925 0 0); --ring: oklch(0.591 0.244 291.7); --chart-1: oklch(0.652 0.234 26.7); --chart-2: oklch(0.714 0.186 41.3); --chart-3: oklch(0.591 0.244 291.7); --chart-4: oklch(0.747 0.154 234.2); --chart-5: oklch(0.742 0.182 153.0); } .dark { --background: oklch(0.160 0 0); --foreground: oklch(0.970 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.970 0 0); --popover: oklch(0.225 0 0); --popover-foreground: oklch(0.970 0 0); --primary: oklch(0.970 0 0); --primary-foreground: oklch(0.160 0 0); --secondary: oklch(0.255 0 0); --secondary-foreground: oklch(0.920 0 0); --muted: oklch(0.255 0 0); --muted-foreground: oklch(0.680 0 0); --accent: oklch(0.680 0.200 293.0); --accent-foreground: oklch(0.160 0 0); --destructive: oklch(0.680 0.210 26.7); --destructive-foreground: oklch(0.160 0 0); --border: oklch(0.300 0 0); --input: oklch(0.300 0 0); --ring: oklch(0.680 0.200 293.0); --chart-1: oklch(0.700 0.210 26.7); --chart-2: oklch(0.760 0.170 44.0); --chart-3: oklch(0.680 0.200 293.0); --chart-4: oklch(0.780 0.150 234.2); --chart-5: oklch(0.780 0.170 153.0); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

The intelligent canvas for infinite creativity

One bright workspace where design, code, and ideas come together — and the color does the talking.

Get started Watch the demo
Design
Prototype
Build
Ship
#ocean #goldenhour #silhouette +8 others

Design anything you can imagine

Turn your ideas into sites, apps, and products.

Build with intention

Dev tools that carry design all the way to production.

Move fast, together

One shared canvas for your entire product team.

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/figma.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `