styles
← 갤러리

Framer Bold

순수 검정 캔버스 위에 GT Walsheim의 크고 촘촘한 디스플레이 타입과 흰색 알약형 CTA, 그리고 프레이머 블루 액센트를 얹은 극적인 다크 프로덕트 마케팅 스타일.

cinematic-dark dark-nativeproduct-marketingpure-blackhigh-contrastexpressive-display-typegt-walsheimwhite-pill-ctaframer-bluegradient-glowbold
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

프레이머(Framer) 마케팅 사이트에서 추출한 다크 우선의 대담한 프로덕트 마케팅 미학. 배경은 순수 검정(oklch 0 0 0)이 압도적으로 지배하고, 본문·헤드라인은 순백(oklch 1 0 0)으로 대비가 극단적으로 높다. 시그니처는 GT Walsheim Medium의 큰 디스플레이 타입 — 54px에 자간 -2.16px(≈ -0.04em)로 아주 촘촘하게 조여 붙여 표현적이면서도 밀도 있는 인상을 만든다. 주요 행동(Get started·Sign up)은 검정 위의 흰색 알약(pill) 버튼으로, 브랜드 강조는 단일 프레이머 블루(oklch 0.669 0.184 248.8, #0099ff)가 에디터 UI·보더·포커스에만 절제되어 쓰인다. 표면은 #242424·#383838의 미세한 회색 단차와 아주 옅은 흰색 헤어라인(6% 불투명도)으로 나누고, 카드는 8px 라운드에 부드러운 드롭 섀도우로 살짝 떠 있다. 제품 목업 뒤에는 블루·그린(#00bb88)·퍼플(#9869fd)의 낮은 불투명도 그라디언트 글로우가 에너지를 더한다. 프레이머에는 라이트 모드가 실재하지 않으므로, 같은 블루 브랜드를 유지한 깔끔한 화이트 카운터파트를 합성했다.

타입 스케일

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

이중 패밀리: 디스플레이·헤드라인은 GT Walsheim Medium(측정된 H1 54px/500/-2.16px, H2 44px/500/-1.76px — 둘 다 ≈ -0.04em의 아주 촘촘한 음수 자간), 본문·소제목·UI는 Inter Variable(측정 h3 18px/400/-0.2px, body 16·14px). GT Walsheim은 상용 폰트 → Google Fonts 대체는 Manrope(가장 근접한 지오메트릭 그로테스크), 본문 Inter는 그대로. 시그니처는 큰 타이틀의 -0.04em 초촘촘 트래킹 — 이것이 프레이머 특유의 대담하고 밀도 있는 인상을 만든다. 웨이트는 400 본문 / 500 디스플레이·헤딩·CTA. 모노(Input Mono)는 코드·수치 배지에만.

골든 예제 (exemplar)

The AI website builder for standout sites

Design, publish, and scale — pure black canvas, oversized type, one blue accent.

Canvas

Design with an agent

Bento surfaces step up from the black canvas.

CMS

Run your CMS with an agent

Faint hairlines divide, not heavy shadow.

Publish

Ship in one click

Blue is the accent — reserved for action.

Do

  • 순수 검정을 정본 캔버스로 두고 라이트는 같은 블루 브랜드로 파생한다
  • 큰 디스플레이 타이틀을 GT Walsheim(대체 Manrope)로 -0.04em 초촘촘 트래킹을 적용해 대담하고 밀도 있게
  • 주요 CTA는 검정 위 흰색 알약(pill) 버튼으로, 브랜드 블루는 에디터·포커스·강조에만 절제해서
  • 표면은 회색 배경 단차(#242424→#383838)와 옅은 흰색 헤어라인으로 나누고, 제품 목업만 소프트 섀도우로 띄운다
  • 제품 목업/히어로 뒤에 블루·그린·퍼플의 낮은 불투명도 그라디언트 글로우로 에너지를 더한다

Don't

  • 브랜드 블루를 화면 전반에 남용 금지 — 검정+흰색이 주인공, 블루는 강조 신호
  • 디스플레이 타입에 헐거운 자간·라이트 웨이트 금지 — 시그니처는 크고 촘촘한 500 웨이트
  • 순수 검정 캔버스에 두꺼운 드롭 섀도우·과한 글래스 남발 금지(섀도우는 떠 있는 목업에만)
  • 파스텔·저대비 팔레트 금지 — 이 스타일의 본질은 검정/흰색의 극단 대비
  • 밝은 라이트 배경을 정본으로 삼지 말 것 — 다크 네이티브가 기본이다

컴포넌트 노트

button
base: primary(히어로 CTA)는 흰색 알약(pill) — 배경 var(--primary)(다크=흰색) + var(--primary-foreground)(검정) 텍스트, radius 100px(fully round), Inter/GT 16px/500, padding 10–14px 좌우 18–24px, 자간 살짝 음수(-0.2px).
hover: 미세한 배경 명도 전환 + 아주 작은 scale(1.02) 또는 translateY(-1px), 150–250ms ease-standard.
focus: 2px var(--ring) 프레이머 블루 링(box-shadow 0 0 0 2px ring), 오프셋 2px.
disabled: opacity 0.4, cursor not-allowed, hover 무효.
secondary_variant: 다크 회색 표면(var(--secondary) #242424/80%) 위 흰 텍스트, radius 8px 또는 pill. 고스트는 투명 배경 + hover 시 var(--secondary).
accent_variant: 에디터/앱 액션은 프레이머 블루(var(--accent)) 채움 pill/8px(예: Publish 버튼).
card
배경 var(--card)(검정보다 한 단 밝은 #242424), radius var(--radius-box)(8px), padding 24–32px. bento 기능 그리드에 자주 쓰이며 소프트 섀도우로 살짝 떠 있음. 옅은 흰색 헤어라인 보더 옵션.
input
배경 투명 또는 var(--input)(다크 회색), 옅은 헤어라인 보더, radius var(--radius-field)(8px), padding 10–12px 14px, 텍스트 12–14px. placeholder는 var(--muted-foreground). 포커스 시 border→블루 링.
nav
상단 sticky, backdrop-blur 반투명 검정. 좌측 프레이머 워드마크+로고, 중앙 텍스트 링크(12–14px, 흰색 60% → hover 100%), 우측 'Log in' 텍스트 + 흰색 'Sign up' pill. 아주 옅은 하단 헤어라인.
badge
작은 라벨/배지 — radius pill 또는 6px, 12px. 상태색은 chart-*(블루/그린/퍼플/오렌지)를 배경 틴트 + 해당 색 텍스트. 브랜드 블루는 'New'·버전 강조에만.