92 lines
4.1 KiB
Markdown
92 lines
4.1 KiB
Markdown
|
# 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`
|