다운로드

Webflow 디자인 시스템.

Webflow 디자인 시스템 — 비주얼 웹 빌더. 블루 액센트의 세련된 마케팅 사이트 미학.

이 플러그인 사용 → GitHub에서 보기 →

실제 적용 모습 보기

동일한 디자인 토큰을 웹사이트, 앱, 슬라이드, 포스터 등 다양한 아티팩트 종류에 적용한 모습입니다. 스크린샷이 아니라 이 시스템으로 다시 스킨을 입힌 오리지널 목업입니다.

웹사이트
슬라이드
앱
포스터

디자인 토큰

Open Design 토큰 규약을 따르는 56개의 토큰 — agent가 어떤 아티팩트든 테마를 입힐 때 읽는 것과 동일한, 구조화된 팔레트, 타입, 간격, 모션 값입니다.

서피스

  • --bg #ffffff
  • --surface #ffffff
  • --surface-warm var(--surface)

텍스트

  • --fg #080808
  • --fg-2 #363636
  • --muted #5a5a5a
  • --meta #ababab

테두리

  • --border #d8d8d8
  • --border-soft #ebebeb

액센트

  • --accent #146ef5
  • --accent-on #ffffff
  • --accent-hover #0055d4
  • --accent-active color-mix(in oklab, var(--accent), black 14%)

시맨틱

  • --success #00d722
  • --warn #ffae13
  • --danger #ee1d36

타이포그래피

  • --font-display "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif
  • --font-body "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif
  • --font-mono "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace

타입 스케일

  • --text-xs 12px
  • --text-sm 14px
  • --text-base 16px
  • --text-lg 20px
  • --text-xl 24px
  • --text-2xl 32px
  • --text-3xl 56px
  • --text-4xl 80px
  • --leading-body 1.6
  • --leading-tight 1.04
  • --tracking-display -0.01em

간격

  • --space-1 4px
  • --space-2 8px
  • --space-3 12px
  • --space-4 16px
  • --space-5 20px
  • --space-6 24px
  • --space-8 32px
  • --space-12 48px
  • --section-y-desktop 96px
  • --section-y-tablet 64px
  • --section-y-phone 48px

모서리 반경

  • --radius-sm 4px
  • --radius-md 4px
  • --radius-lg 8px
  • --radius-pill 9999px

엘리베이션

  • --elev-flat none
  • --elev-ring 0 0 0 1px var(--border)
  • --elev-raised 0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09)

포커스

  • --focus-ring 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)

모션

  • --motion-fast 150ms
  • --motion-base 200ms
  • --ease-standard cubic-bezier(0.2, 0, 0, 1)

레이아웃

  • --container-max 1200px
  • --container-gutter-desktop 24px
  • --container-gutter-tablet 16px
  • --container-gutter-phone 12px

Webflow에서 영감을 받은 디자인 시스템

Category: 디자인 & 크리에이티브 비주얼 웹 빌더. 블루 액센트의 세련된 마케팅 사이트 미학.

1. 비주얼 테마 & 분위기

Webflow 웹사이트는 시각적으로 풍부하고 도구 중심의 플랫폼으로, 깔끔한 흰색 배경, 시그니처 Webflow 블루（#146ef5）, 그리고 풍부한 보조 색상 팔레트（퍼플, 핑크, 그린, 오렌지, 옐로, 레드）를 통해 “코드 없이 디자인하기”를 전달합니다. 커스텀 WF Visual Sans Variable 폰트는 디스플레이에 웨이트 600, 본문에 웨이트 500을 사용해 자신감 있고 정밀한 타이포그래피 시스템을 구성합니다.

주요 특징：

  • 화이트 캔버스에 니어 블랙（#080808）텍스트
  • Webflow 블루（#146ef5）를 프라이머리 브랜드 & 인터랙티브 색상으로 사용
  • WF Visual Sans Variable——웨이트 500–600의 커스텀 가변 폰트
  • 풍부한 보조 팔레트：퍼플 #7a3dff, 핑크 #ed52cb, 그린 #00d722, 오렌지 #ff6b00, 옐로 #ffae13, 레드 #ee1d36
  • 보수적인 4px–8px 보더 반경——날카롭고 둥글지 않음
  • 다층 그림자 스택（5단계 캐스케이딩 그림자）
  • 대문자 레이블：10px–15px, 웨이트 500–600, 넓은 자간（0.6px–1.5px）
  • 버튼 hover 시 translate(6px) 애니메이션

2. 색상 팔레트 & 역할

프라이머리

  • 니어 블랙（#080808）：프라이머리 텍스트
  • Webflow 블루（#146ef5）：--_color---primary--webflow-blue, 프라이머리 CTA 및 링크
  • 블루 400（#3b89ff）：--_color---primary--blue-400, 밝은 인터랙티브 블루
  • 블루 300（#006acc）：--_color---blue-300, 어두운 블루 변형
  • 버튼 호버 블루（#0055d4）：--mkto-embed-color-button-hover

보조 액센트

  • 퍼플（#7a3dff）：--_color---secondary--purple
  • 핑크（#ed52cb）：--_color---secondary--pink
  • 그린（#00d722）：--_color---secondary--green
  • 오렌지（#ff6b00）：--_color---secondary--orange
  • 옐로（#ffae13）：--_color---secondary--yellow
  • 레드（#ee1d36）：--_color---secondary--red

뉴트럴

  • 그레이 800（#222222）：다크 보조 텍스트
  • 그레이 700（#363636）：미드 텍스트
  • 그레이 300（#ababab）：음소거 텍스트, 플레이스홀더
  • 미드 그레이（#5a5a5a）：링크 텍스트
  • 보더 그레이（#d8d8d8）：보더, 디바이더
  • 보더 호버（#898989）：호버 보더

그림자

  • 5단계 캐스케이드：rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px

3. 타이포그래피 규칙

폰트：WF Visual Sans Variable, 폴백：Arial

역할크기웨이트줄 높이자간비고
디스플레이 히어로80px6001.04-0.8px
섹션 제목56px6001.04normal
서브 제목32px5001.30normal
기능 타이틀24px500–6001.30normal
본문20px400–5001.40–1.50normal
표준 본문16px400–5001.60-0.16px
버튼16px5001.60-0.16px
대문자 레이블15px5001.301.5pxuppercase
캡션14px400–5001.40–1.60normal
뱃지 대문자12.8px5501.20normaluppercase
마이크로 대문자10px500–6001.301pxuppercase
코드：Inconsolata（보조 고정폭 폰트）

4. 컴포넌트 스타일링

버튼

  • 투명：텍스트 #080808, 호버 시 translate(6px)
  • 화이트 서클：반경 50%, 흰색 배경
  • 블루 뱃지：#146ef5 배경, 반경 4px, 웨이트 550

카드：1px solid #d8d8d8, 반경 4px–8px

뱃지：블루 틴트 배경 10% 불투명도, 반경 4px

5. 레이아웃

  • 간격：분수 스케일（1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px）
  • 반경：2px, 4px, 8px, 50%——보수적이고 날카로움
  • 브레이크포인트：479px, 768px, 992px

6. 깊이：5단계 캐스케이딩 그림자 시스템

7. 권장 사항 & 금지 사항

  • 권장：웨이트 500–600의 WF Visual Sans Variable 사용. CTA에 블루（#146ef5）사용. 반경 4px. 호버 시 translate(6px).
  • 금지：기능적 요소의 반경을 8px 이상으로 설정하지 않기. 프라이머리 CTA에 보조 색상 사용하지 않기.

8. 반응형：479px, 768px, 992px

9. Agent 프롬프트 가이드

  • 텍스트：니어 블랙（#080808）
  • CTA：Webflow 블루（#146ef5）
  • 배경：화이트（#ffffff）
  • 보더：#d8d8d8
  • 보조：퍼플 #7a3dff, 핑크 #ed52cb, 그린 #00d722
모드
design-system
장면
design
서피스
web
Manifest ID
design-system-webflow

태그

  • design-system
  • first-party
  • design
  • design-creative