AI 디자인 시스템
AI 제품, 모델, 연구 웹사이트에서 추출한 디자인 시스템이에요. 어시스턴트, 모델 제공업체, AI 도구가 여기에 해당해요. 차분한 에디토리얼 타이포그래피에 따뜻한 뉴트럴 팔레트를 조합한 곳도 있고, 개발자 제품처럼 어둡고 기술적인 느낌을 택한 곳도 있어요.
이 카테고리의 DESIGN.md 예시 4개: Anthropic, Harvey, Paperclip 및 xAI. 각 사이트의 공개 페이지에서 추출한 것으로, 공식 브랜드 가이드라인이 아니에요. 이 형식이 처음이라면 DESIGN.md란 무엇인지 읽어 보세요.
Anthropic
Anthropic의 디자인 시스템은 절제된 미감과 타이포그래피 중심의 정체성을 지닌 것이 특징입니다. 두 가지 맞춤 서체인 Anthropic Serif와 Anthropic Sans를 기반으로 하며, 따뜻한 아이보리 배경(#faf9f5) 위에 구성됩니다. 팔레트는 매우 간결하게 정리되어 있습니다. 따뜻한 오프화이트 바탕에 거의 검은색에 가까운 #141413을 사용하고, 보조 텍스트와 테두리에는 차분한 스톤 계열 톤을 적용합니다. 대형 세리프 디스플레이 타이포그래피가 에디토리얼 느낌의 중심을 잡고, 거의 검은색 배경에 아이보리 텍스트를 올린 다크 패널 섹션은 극적인 대비를 만들어 냅니다. 전체적으로 넉넉한 여백, 강한 타이포그래피 대비, 장식 요소를 배제한 구성을 통해 지적인 진지함과 안전을 우선하는 미션을 전달합니다.
Harvey
Harvey의 디자인 시스템은 전용 이중 서체 체계를 중심으로 구성되어 있습니다. 편집물다운 권위를 위해 HarveySerifFont를, 기능적 명확성을 위해 HarveySansFont를 사용합니다. 내비게이션 바는 따뜻한 near-black 색상(#0f0e0d)이고, 콘텐츠 영역은 오프화이트 아이보리(#fafaf9)입니다. 팔레트는 의도적으로 단색조를 따르며, 따뜻한 회색 계열 단계(gray-50부터 gray-950까지)를 사용하고 강조 색조는 쓰지 않습니다. 고위험 법률 업무에 어울리는 신뢰감과 절제를 나타내기 위해서입니다. 요소의 높이감은 그림자보다 표면 대비로 표현합니다. 히어로 제목은 72px 크기의 큰 세리프체를 사용해 타이포그래피의 권위를 즉시 드러내며, 본문과 UI 요소에는 맞춤 산세리프체를 적용합니다. 간격은 8px 기본 격자를 따르며, xs, sm, md, xl, 2xl과 같이 이름이 붙은 간격 토큰을 사용합니다.
Paperclip
Paperclip은 AI 에이전트 관리 플랫폼으로, 거의 검은색인 배경(#0a0a0a)과 흰색(#ffffff) 전경 텍스트를 바탕으로 한 대담한 다크 캔버스 디자인이 특징입니다. 히어로 영역은 마젠타, 바이올렛, 틸, 오렌지, 옐로 등 다섯 가지 색이 어우러진 선명한 그라데이션 일러스트레이션으로 구성되며, 쌓여 있는 알약 모양 캡슐 형태가 어두운 바탕 위에서 화려하고 역동적인 시각적 정체성을 만들어 냅니다. 타이포그래피는 자간을 좁힌 굵은 Inter Tight 제목, Inter 본문 및 UI 텍스트, JetBrains Mono 코드 및 상태 표시를 조합했습니다. 주요 CTA는 어두운 배경 위의 흰색 알약 모양 버튼으로 표현됩니다. 제품 UI 전반에서는 의미 체계를 담은 초록색(#22c55e) 상태 시스템이 에이전트와 작업의 상태를 알려 줍니다. 내비게이션은 하단에 얇은 경계선만 둔 최소한의 평면적 구성입니다.
xAI
xAI의 마케팅 사이트는 --color-ivory(#f9f8f6)와 --color-white(#ffffff)를 기반으로 한 따뜻한 오프화이트 표면 팔레트를 사용하며, 주요 텍스트와 전경색으로는 거의 검정에 가까운 #0a0a0a를 씁니다. 타이포그래피 체계는 큰 디스플레이 제목에 universalSansDisplay(60~72px, 자간을 강하게 좁힌 설정)를, 본문과 UI 문구에 universalSans를, 코드와 터미널 맥락에 GeistMono를 나누어 사용합니다. 라운드 처리는 CTA 버튼과 태그에 적용된 9999px의 필(pill) 형태가 주를 이루며, 카드에는 12px, 입력 필드에는 6px을 씁니다. 그림자 깊이는 최소한으로 절제되어 있어, 카드에만 부드러운 다중 레이어 드롭 섀도를 적용하고 대부분의 표면은 평평하게 처리합니다. 전체적인 분위기는 기술적이면서도 프리미엄한 느낌입니다. 색상은 절제되어 있고 여백은 넉넉하며, 강렬한 모노스페이스 코드 미학으로 개발자에게 신뢰감을 전달합니다.
원하는 사이트가 없나요?
URL만 붙여 넣으면 어떤 웹사이트든 DESIGN.md로 추출해요. 색상, 타이포그래피, 간격, 토큰을 AI 워크플로에 바로 쓸 수 있어요.