# 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`

### 계층구조

| 역할 | 폰트 | 크기 | 굵기 | 줄높이 | 자간 |
|------|------|------|--------|-------------|----------------|
| 디스플레이 히어로 | Haas | 48px | 400 | 1.15 | normal |
| 디스플레이 볼드 | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| 섹션 제목 | Haas | 40px | 400 | 1.25 | normal |
| 소제목 | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| 카드 제목 | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| 피처 | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| 본문 | Haas | 18px | 400 | 1.35 | 0.18px |
| 본문 미디엄 | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| 버튼 | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| 캡션 | Haas | 14px | 400–500 | 1.25–1.35 | 0.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`