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

계층구조

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