다운로드

Airtable 디자인 시스템.

Airtable 디자인 시스템 — 스프레드시트와 데이터베이스의 하이브리드. 다채롭고 친근한 구조화된 데이터 미학.

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

실제 적용 모습 보기

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

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

디자인 토큰

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

서피스

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

텍스트

  • --fg #181d26
  • --fg-2 #333333
  • --muted rgba(4, 14, 32, 0.69)
  • --meta var(--muted)

테두리

  • --border #e0e2e6
  • --border-soft #eef0f3

액센트

  • --accent #1b61c9
  • --accent-on #ffffff
  • --accent-hover #254fad
  • --accent-active color-mix(in oklab, var(--accent), black 14%)

시맨틱

  • --success #006400
  • --warn #eab308
  • --danger #dc2626

타이포그래피

  • --font-display "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif
  • --font-body Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif
  • --font-mono ui-monospace, "SF Mono", "JetBrains 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 40px
  • --text-4xl 48px
  • --leading-body 1.35
  • --leading-tight 1.2
  • --tracking-display 0

간격

  • --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 12px
  • --radius-md 16px
  • --radius-lg 24px
  • --radius-pill 9999px

엘리베이션

  • --elev-flat none
  • --elev-ring 0 0 0 1px var(--border)
  • --elev-raised 0 0 1px rgba(0, 0, 0, 0.32), 0 0 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(45, 127, 249, 0.28), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06)

포커스

  • --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

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

Category: 디자인 & 크리에이티브 스프레드시트-데이터베이스 하이브리드. 다채롭고 친근하며 구조화된 데이터 미학.

1. 비주얼 테마 및 분위기

Airtable의 웹사이트는 흰색 캔버스에 딥 네이비 텍스트（#181d26）와 Airtable Blue（#1b61c9）를 기본 인터랙티브 액센트로 사용하여 “세련된 단순함”을 전달하는 깔끔한 엔터프라이즈 친화적 플랫폼입니다. Haas 폰트 패밀리（디스플레이 + 텍스트 변형）는 전체적으로 포지티브한 자간을 적용해 스위스 정밀 타이포그래피 시스템을 구축합니다.

주요 특징：

  • 딥 네이비 텍스트（#181d26）를 사용한 흰색 캔버스
  • Airtable Blue（#1b61c9）가 기본 CTA 및 링크 색상
  • Haas + Haas Groot Disp 듀얼 폰트 시스템
  • 본문 텍스트의 포지티브 자간（0.08px–0.28px）
  • 버튼 12px 반경, 카드 16px–32px
  • 블루 톤 멀티레이어 그림자：rgba(45,127,249,0.28) 0px 1px 3px
  • 시맨틱 테마 토큰：--theme_* CSS 변수 명명

2. 색상 팔레트 및 역할

기본색

  • 딥 네이비 (#181d26)：기본 텍스트
  • Airtable Blue (#1b61c9)：CTA 버튼, 링크
  • 흰색 (#ffffff)：기본 표면
  • Spotlight (rgba(249,252,255,0.97))：--theme_button-text-spotlight

시맨틱

  • 성공 초록 (#006400)：--theme_success-text
  • 약한 텍스트 (rgba(4,14,32,0.69))：--theme_text-weak
  • 보조 활성 (rgba(7,12,20,0.82))：--theme_button-text-secondary-active

중립색

  • 다크 그레이 (#333333)：보조 텍스트
  • 미드 블루 (#254fad)：링크/액센트 블루 변형
  • 테두리 (#e0e2e6)：카드 테두리
  • 라이트 표면 (#f8fafc)：미묘한 표면

그림자

  • 블루 톤 (rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset)
  • 소프트 (rgba(15,48,106,0.05) 0px 0px 20px)

3. 타이포그래피 규칙

폰트 패밀리

  • 기본：Haas，폴백：-apple-system, system-ui, Segoe UI, Roboto
  • 디스플레이：Haas Groot Disp，폴백：Haas

계층구조

역할폰트크기굵기줄높이자간
디스플레이 히어로Haas48px4001.15normal
디스플레이 볼드Haas Groot Disp48px9001.50normal
섹션 제목Haas40px4001.25normal
소제목Haas32px400–5001.15–1.25normal
카드 제목Haas24px4001.20–1.300.12px
피처Haas20px4001.25–1.500.1px
본문Haas18px4001.350.18px
본문 미디엄Haas16px5001.300.08–0.16px
버튼Haas16px5001.25–1.300.08px
캡션Haas14px400–5001.25–1.350.07–0.28px

4. 컴포넌트 스타일링

버튼

  • 기본 블루：#1b61c9，흰색 텍스트, 16px 24px 패딩, 12px 반경
  • 흰색：흰색 배경, #181d26 텍스트, 12px 반경, 1px 흰색 테두리
  • 쿠키 동의：#1b61c9 배경, 2px 반경（샤프）

카드：1px solid #e0e2e6，16px–24px 반경

인풋：표준 Haas 스타일링

5. 레이아웃

  • 간격：1–48px（8px 기준）
  • 반경：2px（소），12px（버튼），16px（카드），24px（섹션），32px（대），50%（원형）

6. 깊이

  • 블루 톤 멀티레이어 그림자 시스템
  • 소프트 앰비언트：rgba(15,48,106,0.05) 0px 0px 20px

7. 해야 할 것과 하지 말아야 할 것

해야 할 것：CTA에 Airtable Blue 사용，포지티브 트래킹으로 Haas 사용，12px 반경 버튼

하지 말아야 할 것：포지티브 자간 생략，무거운 그림자 사용

8. 반응형 동작

브레이크포인트：425–1664px（23개 브레이크포인트）

9. Agent 프롬프트 가이드

  • 텍스트：딥 네이비（#181d26）
  • CTA：Airtable Blue（#1b61c9）
  • 배경：흰색（#ffffff）
  • 테두리：#e0e2e6
모드
design-system
장면
design
서피스
web
Manifest ID
design-system-airtable

태그

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