큐레이션 · 오픈 · 무료

Airtable

AI 기반 데이터 관리를 통해 팀 워크플로우를 하나로 연결하는 통합 작업 공간입니다.

01

디자인 DNA

디지털 스프레드시트와 프로젝트 관리 도구의 결합

02

컬러

흰색 배경 위의 깔끔하고 고대비의 흑백 구성이며, 포인트 색상은 최소한으로 사용합니다.

03

타이포그래피

humanist-sans

• display48px · 500
• heading32px · 500
• body20px · 400

Haas Groot Disp는 큰 디스플레이 제목에 사용합니다. · Haas는 본문과 UI 요소에 사용합니다. · 글꼴 크기가 커질수록 행간은 좁아집니다. · 본문 텍스트의 자간은 약간 양(+)의 값을 가집니다.

04

여백

수직 간격은 4px 기본 단위를 기준으로 표준 증가폭을 따릅니다.

05

표면 (라운드 / 그림자 / 경계선)

메인 잉크 색상을 사용한 불투명도가 낮은 섬세한 1px 테두리입니다.

rgba(15, 48, 106, 0.05) 0px 0px 20px 0px · rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset

06

레이아웃

데스크톱에서는 넓은 여백을 가진 표준 중앙 정렬 콘텐츠입니다.

07

모션과 인터랙션

hover 시 미세한 색상 및 배경 전환. · 매끄러운 요소 가시성 변화.

hover 시 버튼 색상이 약간 어두워지거나 채우기 색상이 변경됩니다. · 미세한 스케일 또는 색상 피드백.

08

컴포넌트

• button 흰색 텍스트가 있는 단색 흑색 기본 버튼과 검은색 테두리가 있는 흰색 보조 버튼입니다. 둥근(필)형과 직사각형 변형이 있습니다.
• card 미세한 둥근 모서리가 있는 밝은 회색 배경 카드입니다.
• chip 스크린샷에 해당 없음.
• input 미세한 테두리가 있는 표준 텍스트 입력 필드입니다.
• hero 중앙 정렬된 제목과 부제목, 두 가지 CTA 버튼이 있으며, 그 아래에는 신뢰할 수 있는 기업 로고들이 나열됩니다.

09

보이스와 금지 목록

• 톤 전문적이고 명확하며, 엔터프라이즈에 초점을 맞춥니다.
• 헤드라인 연결성과 효율성을 강조하는 간결하고 이점 중심적인 문장입니다.
• CTA 직접적이고 행동을 유도하는 문구입니다('무료로 시작하기', '데모 예약').

• bright, saturated accent colors를 사용하지 마세요 — 스크린샷은 흑백 위주의 단색 팔레트를 보여줍니다.
• decorative 또는 script fonts를 사용하지 마세요 — 스크린샷은 깔끔하고 현대적인 sans-serif 타이포그래피를 보여줍니다.
• 무겁고 복잡한 shadows를 사용하지 마세요 — 스크린샷은 거의 평면에 가까운 최소한의 엘리베이션을 가진 섬세한 디자인을 보여줍니다.
• 레이아웃을 어지럽히지 마세요 — 스크린샷은 넉넉한 여백과 집중된 콘텐츠 영역을 보여줍니다.
• dark mode를 기본값으로 사용하지 마세요 — 스크린샷은 깨끗한 흰색 배경을 기본 캔버스로 보여줍니다.
• 불규칙하거나 지나치게 장난스러운 border-radius를 사용하지 마세요 — 스크린샷은 일관된, 주로 직사각형 또는 미세하게 둥근 모서리를 보여줍니다.
• 피하기: 전문 용어
• 피하기: 지나치게 캐주얼한 언어
• 피하기: 과장된 표현

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko