styles
← 갤러리

Figma Playful

새하얀 캔버스에 검정 텍스트·CTA로 뼈대를 잡고, 히어로에 피그마 시그니처 멀티컬러(레드·오렌지·퍼플·블루·그린)를 콜라주처럼 흩뿌리는 밝고 장난스러운 프로덕트 마케팅 스타일 — 크롬은 절제, 컬러가 성격을 만든다.

playful-maximalism multicolor-brandplayfulproduct-saasclean-chromegradient-collagegenerous-whitespaceblack-ctarounded-friendlydesign-tool
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

피그마(figma.com) 마케팅 사이트에서 추출한 밝고 다채로운 프로덕트 스타일. 골격은 의외로 절제되어 있다 — 순백 배경(oklch 1), 순검정 본문·CTA(oklch 0), 넉넉한 여백, 얇은 회색 헤어라인 내비. 성격은 크롬이 아니라 컬러가 만든다: 히어로의 그라디언트 카드 콜라주와 피그마 로고의 시그니처 5색(레드 #ff3737, 오렌지 #ff7237, 퍼플 #874fff, 블루 #12bbff, 그린 #24cb71)이 밝은 여백 위에서 튄다. 프라이머리는 지배적 CTA 색인 검정이고, 멀티컬러는 액센트·차트 역할로 배치해 카드·칩·일러스트에서 발랄함을 낸다. 타이포는 figmaSans(→Inter 대체)로, 큰 타이틀도 굵게 키우지 않고 400 웨이트에 음수 자간(-0.022em)만 촘촘히 줘 담백하게 크게 쓴다. 라운드는 버튼 8px·카드 16px로 부드럽고, 상태 배지·내비 pill은 완전 원형. 사이트에 다크 모드가 없어 다크 세트는 같은 멀티컬러 브랜드를 근검정 캔버스에 맞춰 합성했다.

타입 스케일

display Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
lead Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
small Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen

figmaSans 단일 패밀리(프로프라이어터리 → Inter 대체). 시그니처는 '크게 쓰되 굵게는 안 쓴다' — 실측 H1 56px가 웨이트 400(레귤러)에 letter-spacing -1.25px(≈-0.022em)다. 큰 타이틀도 볼드가 아니라 400 + 촘촘한 음수 자간으로 담백하고 우아하게 크다. 웨이트는 실측 320/330/400: 본문·헤딩 400, 리드/서브텍스트에 얇은 330. 대문자 트래킹 라벨은 쓰지 않는다(에디토리얼과의 차이).

골든 예제 (exemplar)

The intelligent canvas for infinite creativity

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

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.

Do

  • 골격은 순백 배경 + 순검정 텍스트/CTA로 깔끔하게 잡고, 성격은 멀티컬러로 낸다
  • 피그마 5색(레드·오렌지·퍼플·블루·그린)을 카드·칩·일러스트·차트에 포인트로 흩뿌린다
  • 프라이머리 CTA는 검정 채움 pill/버튼, 액센트·초점은 브랜드 퍼플
  • 큰 타이틀은 굵게 키우지 말고 400 웨이트 + 음수 자간(-0.022em)으로 담백하게 크게
  • 라운드는 부드럽게(버튼 8px·카드 16px·배지 pill), 여백은 넉넉히

Don't

  • 본문 텍스트를 컬러로 물들이지 말 것 — 컬러는 카드/칩/일러스트에, 본문은 검정
  • 큰 타이틀에 볼드(700+) 남발 금지 — 시그니처는 400 + 촘촘한 자간
  • 두꺼운 드롭 섀도우로 구획 나누기 금지 — 헤어라인 + 컬러 채움 카드로
  • 배경 전체를 그라디언트로 덮지 말 것 — 그라디언트는 히어로 일러스트 안에만
  • 다크를 정본으로 삼지 말 것 — 이 스타일의 본질은 밝은 순백 캔버스다
  • 대문자 트래킹 라벨(에디토리얼식) 금지 — 톤이 친근한 문장체다

컴포넌트 노트

button
base: primary는 배경 var(--primary) 검정 + var(--primary-foreground) 흰 텍스트, radius var(--radius-field)(8px), padding 12px 22px, 폰트 16px/400. 지배적 CTA('Get started for free').
hover: 배경을 살짝 밝게(검정→진회색) 또는 미세 scale(1.02), 150–250ms ease-standard.
focus: 2px var(--ring) 퍼플 링(box-shadow 0 0 0 2px ring, 오프셋 2px).
disabled: opacity 0.4, cursor not-allowed.
secondary_variant: 아웃라인: 배경 투명, 1px var(--border) 헤어라인, 텍스트 var(--foreground)(예: 'Contact sales'). radius 8px.
ghost_variant: 내비 링크: 배경 투명, 텍스트 var(--foreground), hover 시 미세 배경 var(--secondary).
card
배경 var(--card), radius var(--radius)(16px), 헤어라인 또는 섀도우 없이 컬러 채움으로 구분. 강조 카드는 chart-*/accent 컬러를 배경으로 풀 채움하고 흰 텍스트를 얹는다(발랄한 브랜드 카드). padding 24–32px.
input
배경 흰색, 1px var(--border) 헤어라인, radius var(--radius-field)(8px), padding 12px 14px. placeholder var(--muted-foreground). 포커스 시 border→var(--ring) 퍼플 + 얇은 링.
nav
상단, 흰 배경 + 1px 연회색 하단 헤어라인. 좌측 멀티컬러 피그마 마크, 중앙 드롭다운 링크(16px, 검정), 우측 'Log in' 텍스트 + 아웃라인 'Contact sales' + 검정 'Get started for free' pill.
badge
상태/카테고리 배지 — radius 9999px pill, 12–14px. chart-* 브랜드색을 채움 또는 10% 틴트로. 발랄한 컬러 태그(#ocean, #goldenhour류).