DESIGN.md 예시
공개 웹사이트에서 추출한 실제 DESIGN.md 파일이에요. 각 파일에는 사이트의 색상, 타이포그래피, 간격, 컴포넌트가 AI 코딩 에이전트가 읽는 형식으로 담겨 있어요. 카드를 열어 미리 보고 저장소에 복사하세요.
각 사이트의 공개 페이지에서 추출한 것으로, 공식 브랜드 가이드라인이 아니에요. 이 형식이 처음이라면 DESIGN.md란 무엇인지 읽어 보세요.
Airbnb
Airbnb의 디자인 시스템은 단일 독점 가변 폰트(Airbnb Cereal VF)를 중심으로 구축되어 있으며, 짙은 차콜(#222222)과 밝은 그레이를 기반으로 한 거의 무채색에 가까운 중립 팔레트를 사용합니다. 브랜드의 상징적인 "Rausch" 코랄 핑크(#ff385c)는 기본 CTA와 로고에만 제한적으로 사용됩니다. 레이아웃은 반응형 사진 카드 그리드로 이루어지며, 이미지와 텍스트의 비율을 여유 있게 가져갑니다. 카드에는 20px의 부드러운 둥근 모서리가 적용되고, 여러 겹으로 된 은은한 그림자 시스템이 강한 대비 없이 섬세한 깊이감을 만들어 냅니다. 핵심 사용자 행동을 하나로 묶는 검색창은 눈에 잘 띄는 알약 모양의 컨테이너로 구성되어 있습니다.
Anthropic
Anthropic의 디자인 시스템은 절제된 미감과 타이포그래피 중심의 정체성을 지닌 것이 특징입니다. 두 가지 맞춤 서체인 Anthropic Serif와 Anthropic Sans를 기반으로 하며, 따뜻한 아이보리 배경(#faf9f5) 위에 구성됩니다. 팔레트는 매우 간결하게 정리되어 있습니다. 따뜻한 오프화이트 바탕에 거의 검은색에 가까운 #141413을 사용하고, 보조 텍스트와 테두리에는 차분한 스톤 계열 톤을 적용합니다. 대형 세리프 디스플레이 타이포그래피가 에디토리얼 느낌의 중심을 잡고, 거의 검은색 배경에 아이보리 텍스트를 올린 다크 패널 섹션은 극적인 대비를 만들어 냅니다. 전체적으로 넉넉한 여백, 강한 타이포그래피 대비, 장식 요소를 배제한 구성을 통해 지적인 진지함과 안전을 우선하는 미션을 전달합니다.
Apple
CSSOM 빈도 분석으로 추출했으며 LLM 해석을 거치지 않은 디자인 토큰입니다.
Dribbble
Dribbble의 디자인 시스템은 짙은 네이비에 가까운 검은색(#0d0c22)과 깔끔한 흰색 표면을 기반으로 합니다. 시그니처 핫핑크(#ea4c89) 강조색은 에디토리얼 강조와 인터랙티브 요소의 하이라이트에만 절제해서 사용합니다. 타이포그래피 체계는 모든 굵기에서 Mona Sans 한 가지 서체만 사용하며, 위계는 굵기와 크기만으로 표현합니다. 형태 언어는 알약 모양의 버튼(border-radius: 1e+07px)과 둥근 모서리의 카드(12px 반경)가 정의합니다. 레이아웃은 8px 기준 그리드를 바탕으로 여백을 넉넉하게 두며, 깊이감은 무거운 레이어링보다는 은은한 드롭 섀도로 표현합니다.
Duolingo - The world’s most popular way to learn
CSSOM 빈도 분석으로 추출한 디자인 토큰이며, LLM 해석은 거치지 않았습니다.
Figma
Figma의 마케팅 사이트는 명확한 흑백 모노크롬 시스템을 바탕으로 하며, 독자적인 가변 폰트 figmaSans를 중심에 두고 있습니다. 디자인은 타이포그래피가 주도하는 방식으로, 88px/56px의 큰 디스플레이 제목은 자간을 좁게 조여 가벼운 굵기 330의 본문 텍스트와 대비를 이룹니다. CTA 버튼은 검은색 바탕에 흰색 글자를 넣은 완전히 둥근 알약 모양(border-radius: 9999px)을 사용합니다. 레이아웃은 그리드 기반으로, 최대 콘텐츠 너비는 1440px이며 섹션 상하 여백은 80px로 넉넉하게 잡혀 있고, 바탕은 깔끔한 흰색입니다. 깊이감 표현은 최소화되어 있으며, 그림자는 oklch 기반의 은은한 오버레이를 사용합니다. 푸터 배너에는 연보라색 포인트 컬러 #cb9fd2가 등장합니다. 전체적인 미감은 자신감 있고, 타이포그래피적으로 세련되며, 브랜드를 전면에 드러내는 느낌입니다.
Harvey
Harvey의 디자인 시스템은 전용 이중 서체 체계를 중심으로 구성되어 있습니다. 편집물다운 권위를 위해 HarveySerifFont를, 기능적 명확성을 위해 HarveySansFont를 사용합니다. 내비게이션 바는 따뜻한 near-black 색상(#0f0e0d)이고, 콘텐츠 영역은 오프화이트 아이보리(#fafaf9)입니다. 팔레트는 의도적으로 단색조를 따르며, 따뜻한 회색 계열 단계(gray-50부터 gray-950까지)를 사용하고 강조 색조는 쓰지 않습니다. 고위험 법률 업무에 어울리는 신뢰감과 절제를 나타내기 위해서입니다. 요소의 높이감은 그림자보다 표면 대비로 표현합니다. 히어로 제목은 72px 크기의 큰 세리프체를 사용해 타이포그래피의 권위를 즉시 드러내며, 본문과 UI 요소에는 맞춤 산세리프체를 적용합니다. 간격은 8px 기본 격자를 따르며, xs, sm, md, xl, 2xl과 같이 이름이 붙은 간격 토큰을 사용합니다.
IKEA
IKEA의 글로벌 홈페이지는 굵고 평평한 디자인 시스템을 바탕으로 하며, 상징적인 IKEA Yellow(#ffdb00)를 주요 액션 영역으로, IKEA Blue(#0058a3)를 브랜드 로고 강조색으로 사용합니다. 전체 타이포그래피 체계는 Noto IKEA라는 단일 커스텀 서체로 구성되며, 400과 700 두께를 사용해 본문 14px에서 디스플레이 제목 51px까지 촘촘하게 정의된 크기 체계를 따릅니다. 입체감은 그림자가 아니라 색의 대비와 레이아웃 구조를 통해 전달됩니다. 레이아웃은 최대 너비 90rem의 컨테이너와 데스크톱 기준 1.5rem의 그리드 간격을 사용하며, 상호작용 요소에는 8px 모서리 반경 토큰을 일관되게 적용합니다. 오프화이트 배경(#fffefb)은 짙은 #111111 텍스트와 어우러져 따뜻함을 더하고, 대비가 높아 읽기 쉽고 접근성이 좋은 화면을 만들어 냅니다.
Klarna
Klarna의 디자인 시스템은 세련된 짙은 네이비 기본 색상(#0b051d)을 중심으로 하며, 시그니처 핑크(#ffa8cd)를 비롯한 밝은 강조 색상을 함께 사용합니다. Klarna 전용 폰트와 시스템 폰트를 함께 사용하고, 32px을 가장 많이 쓰는 둥근 모서리를 강조하며, 접근성을 위해 높은 명암 대비를 유지합니다. 넉넉한 여백과 명확한 타이포그래피 위계를 통해 전문성과 친근함의 균형을 맞춘 디자인입니다.
Linear
Linear의 디자인 시스템은 엔지니어링 팀을 위해 만들어진, 다크 모드를 우선으로 한 고밀도 제품 UI입니다. 표면 팔레트는 거의 검은색인 #08090a와 #0f1011을 기준으로 하며, 사이드바, 카드, 패널을 구분하기 위해 여러 단계의 어두운 회색을 겹겹이 사용합니다. 타이포그래피는 Inter Variable만 사용하고, 디스플레이 크기에서는 정교한 음의 자간을 적용합니다. 인라인 코드에는 Berkeley Mono를 씁니다. 모서리 반경은 의도적으로 작게 유지되며, 주로 2~6px을 사용하고 알약 모양은 배지와 상태 칩에만 제한적으로 씁니다. 입체감은 강한 레이어 효과보다는 1px 안쪽 테두리와 낮은 불투명도의 그림자로 표현합니다. 기본 CTA 색상은 Linear의 상징적인 인디고 #5e6ad2이며, 회원가입 버튼과 주요 링크에 사용됩니다.
Magentix Studio
Magentix Studio는 AI 중심 제품 스튜디오의 모습을 에디토리얼하고 아트 갤러리 같은 분위기의 디자인으로 표현합니다.
Neon
Neon의 디자인 시스템은 다크 모드를 우선으로 하는 개발자 중심 브랜드로, 거의 검은 바탕(#000000, #18191b)에 선명한 네온 그린 기본 색상(#00e599)과 이를 보조하는 중간 톤의 그린(#34d59a)을 사용합니다. 타이포그래피는 UI와 본문에 Inter, 코드와 데이터에 GeistMono를 조합하며, 두 서체 모두 자간을 좁게 조정했습니다. 간격은 4px 기본 격자를 따르고, 모서리 반경은 4px로 일관되게 최소화되어 있습니다. 입체감은 그림자보다 테두리 대비로 표현하며, 하나의 은은한 드롭섀도만 절제해서 사용합니다. 히어로 영역에는 화면 전체를 채우는 애니메이션 데이터 시각화 배경이 적용되어, 데이터베이스와 인프라를 다루는 브랜드 정체성을 강화합니다.
Notion
Notion의 마케팅 홈페이지는 짙은 네이비(#02093a) 히어로 섹션과 밝은(#f6f5f4) 본문 영역을 결합한 구성입니다. 모든 텍스트 역할에 커스텀 서체인 NotionInter를 사용합니다. 레이아웃은 거터 28px의 12열 그리드를 기반으로 하며, 카드에는 8px, 알약형 요소에는 9999px의 이중 모서리 반경을 적용합니다. 플로팅 UI 요소에는 여러 겹으로 이루어진 점진적 그림자 시스템을 사용합니다. 브랜드 블루(#2537b1)는 CTA와 강조 요소에 쓰이며, gray-200부터 gray-900까지의 의미 기반 회색 단계가 모든 텍스트와 표면의 위계를 구성합니다.
Paperclip
Paperclip은 AI 에이전트 관리 플랫폼으로, 거의 검은색인 배경(#0a0a0a)과 흰색(#ffffff) 전경 텍스트를 바탕으로 한 대담한 다크 캔버스 디자인이 특징입니다. 히어로 영역은 마젠타, 바이올렛, 틸, 오렌지, 옐로 등 다섯 가지 색이 어우러진 선명한 그라데이션 일러스트레이션으로 구성되며, 쌓여 있는 알약 모양 캡슐 형태가 어두운 바탕 위에서 화려하고 역동적인 시각적 정체성을 만들어 냅니다. 타이포그래피는 자간을 좁힌 굵은 Inter Tight 제목, Inter 본문 및 UI 텍스트, JetBrains Mono 코드 및 상태 표시를 조합했습니다. 주요 CTA는 어두운 배경 위의 흰색 알약 모양 버튼으로 표현됩니다. 제품 UI 전반에서는 의미 체계를 담은 초록색(#22c55e) 상태 시스템이 에이전트와 작업의 상태를 알려 줍니다. 내비게이션은 하단에 얇은 경계선만 둔 최소한의 평면적 구성입니다.
PayPal
PayPal의 네덜란드어 홈페이지는 선명한 하늘색(#60cdff) 히어로 섹션과 극도로 굵은 검은색 디스플레이 타이포그래피(PayPal Pro w900)를 중심으로 한 대담하고 소비자 지향적인 디자인을 보여 줍니다. 내비게이션은 흰색 바탕에 검은색 텍스트를 사용하며, 테두리만 있는 "Inloggen" 버튼과 채워진 검은색 "Rekening openen" 버튼이라는 뚜렷이 구분되는 두 가지 CTA 버튼을 갖추고 있습니다. 페이지 상단에는 짙은 네이비색 공지 배너가 자리합니다. 전체적으로 고대비, 둥근 알약형 모서리, 브랜드 서체 중심의 표현을 사용하여 폭넓은 소비자 금융 이용자층에게 신뢰감과 접근성을 전달합니다.
Railway
Railway의 디자인 시스템은 짙은 네이비 계열의 거의 검은 표면(#13111c, #0b0b0f)을 기반으로 한 다크 중심의 개발자 플랫폼 UI입니다. 고대비의 오프화이트 텍스트(#f7f7f8)와 보라색 브랜드 강조색(#853bce / #553f83)이 특징적입니다. 히어로 영역에는 에디토리얼한 무게감을 주기 위해 IBM Plex Serif를 사용하고, 모든 UI 문구는 Inter가 담당하며, 코드가 표시되는 곳에는 JetBrains Mono와 SF Mono를 씁니다. 입체감은 드롭 섀도 대신 rgba(255,255,255,0.2) 1.5px inset 흰색 발광 테두리로 표현되어, UI 전체에 유리 패널 같은 분위기를 줍니다. 간격 체계는 4px 단위를 기준으로 하며, 8/12/16/24/32의 리듬이 뚜렷합니다. 모서리 반경은 대체로 4px로 작게 유지되고, 카드와 히어로 컨테이너에는 선택적으로 8px과 16px을 적용합니다.
Shopify
Shopify의 마케팅 홈페이지는 화면 전체를 채우는 역동적인 동영상 히어로 섹션을 사용하며, 배경은 #02090a의 거의 검은색으로 위쪽 흰색 내비게이션 바와 강하게 대비됩니다. 주요 브랜드 강조색은 선명한 민트 그린 #36f4a4이며, 하이라이트와 인터랙티브 상태에만 절제해서 사용합니다. 타이포그래피는 디스플레이 및 에디토리얼 제목에 NeueHaasGrotesk를, UI 본문에 Inter-Variable을 나누어 적용합니다. CTA 버튼은 완전히 둥근 필(pill) 형태(border-radius: 9999px)를 사용합니다. 전체적인 시스템은 자신감 있고 고대비이며 열망을 자극하는 느낌으로, 방문자를 판매자로 전환하도록 설계되어 있습니다.
Snapchat
Snapchat의 웹 프레젠스는 브랜드의 상징인 #FFFC00 노란색을 중심으로 한 고대비 밝은 테마를 사용합니다. 주요 표면에는 거의 검은색에 가까운 #121314를 적용하고, 페이지 배경은 깔끔한 흰색을 사용합니다. 기본 서체로 Avenir Next를, 보조 서체로 Graphik을 함께 사용하여 친근하면서도 체계적인 타이포그래피 위계를 이룹니다. 버튼, 알약 모양 요소, 태그 같은 상호작용 요소는 완전히 둥근 100px 모서리를 사용하고, 입력창은 은은한 5px 모서리를 사용합니다. 내비게이션은 부드러운 그림자가 드리워진 떠 있는 알약 형태입니다. 콘텐츠는 흰색 텍스트가 겹쳐진 대형 미디어 카드로 보여 주어, 앱 미리보기를 중심에 둔 몰입감 있는 구성을 만듭니다. 전체적인 밀도는 보통 수준이며, 여유 있는 간격과 분명한 시각적 위계를 통해 마케팅 디자인과 제품 UI 관례를 자연스럽게 잇습니다.
Stripe
Stripe의 마케팅 홈페이지는 엄격하게 관리되는 디자인 시스템(HDS, Stripe Design System)을 바탕으로 합니다. 가벼운 굵기(300~400)의 가변 폰트 "sohne-var"를 사용하고, 짙은 네이비에서 인디고로 이어지는 브랜드 팔레트는 #533afd(Stripe Indigo)를 중심으로 구성되어 있습니다. 대표적인 특징은 화면 전체를 채우는 스펙트럼 그라데이션 히어로입니다. 컴포넌트는 4~6px의 낮은 모서리 반경과 평면에 가깝고 최소한의 그림자를 사용하며, 8px 기본 간격 그리드에 맞춰 구조화되어 있습니다. 전체적인 톤은 권위 있으면서도 친근합니다. 자신감 있는 타이포그래피와 절제된 색 사용을 통해 금융 인프라를 전달합니다.
Supabase
Supabase는 다크 모드를 기본으로 하는 디자인 시스템으로, 거의 검은색에 가까운 짙은 배경(oklch ~0.19)을 바탕으로 합니다. 선명한 녹색 브랜드 포인트 컬러(#3ecf8e / #3fcf8e)가 시각적 중심을 잡아 줍니다. 레이아웃은 반응형 기능 카드 그리드를 중심으로 구성되며, 디스플레이 제목에는 Manrope, 본문과 UI 텍스트에는 Inter 서체를 사용합니다. 모노스페이스와 코드가 필요한 모든 영역에는 Source Code Pro를 적용합니다. 색상 체계는 의미 기반 이름을 가진 oklch 커스텀 속성으로 구축되어 있습니다. 카드는 12px 모서리 반경과 은은한 테두리 처리를 적용하고, 버튼은 6–8px 모서리 반경을 사용합니다. 전체적인 밀도는 중간 수준이며, 8px 기본 간격 그리드를 따릅니다.
The Onion
The Onion의 디자인 시스템은 디지털화된 풍자 신문의 느낌을 살린 스타일입니다. 검은색의 굵고 좁은 고딕체 헤드라인이 중심을 이루며, 섹션 라벨, 트렌딩 배지, CTA에 사용되는 짙은 숲 녹색(#006b3a) 브랜드 강조색이 깔끔한 흰색 및 밝은 회색 바탕과 대비를 이룹니다. 타이포그래피가 핵심 디자인 도구로, Adobe Fonts의 좁은 고딕 및 세미 컨덴스드 서체인 tablet-gothic과 rocky-condensed가 헤드라인을 주도하고, 본문은 utopia-std-caption이 담당합니다. 레이아웃은 정보 밀도가 높아서 촘촘한 카드 그리드, 하단 테두리로 구분되는 기사 구분선, 그리고 구조 요소에 거의 둥근 모서리가 없는 형태로 구성됩니다. 입체감 표현은 최소화되어 있으며, 오버레이 요소에만 은은한 그림자가 적용되어 있습니다.
Uber
Uber의 디자인 언어는 깔끔한 미니멀리즘과 생동감 있는 일러스트레이션을 결합하여, 친근하면서도 전문적인 교통 플랫폼의 인상을 만들어 냅니다. 선명한 흑백 기반은 명확성과 가독성을 제공하고, 컬러풀한 히어로 일러스트레이션은 따뜻함과 사람 사이의 연결감을 더합니다. 타이포그래피는 브랜드 일관성을 위해 커스텀 서체 패밀리인 UberMove에 의존하며, 넉넉한 여백이 인터페이스 전반에 숨 쉴 공간을 만들어 줍니다.
WIRED
WIRED의 디자인 시스템은 고대비와 에디토리얼 중심의 모노크롬 체계입니다. 독자적인 타이포그래피 체계(Breve Text, WIRED Mono, WiredDisplay, Apercu)를 기반으로 하며, 색채 팔레트는 거의 사용하지 않습니다. #000000 검정이 2961회로 가장 많이 쓰이며 텍스트, 테두리, 아이콘, 인터랙티브 상태를 중심에서 잡아 줍니다. #ffffff 흰색은 기본 바탕면을 이룹니다. 강조색은 아주 절제되어 있으며, 구독 버튼에만 브랜드 블루 #057dbc가 쓰입니다. 레이아웃은 8px 기본 간격을 바탕으로 한 여러 단으로 나뉜 기사 그리드를 사용하고, 그림자 없이 평평한 면을 유지하며, 기본 모서리 반경은 4px로 최소화되어 있습니다. 타이포그래피가 가장 뚜렷한 특징입니다. 본문은 19px Breve Text를 사용하고, 섹션 라벨은 자간을 넓힌 대문자 WIRED Mono로, 디스플레이 제목은 WiredDisplay로 표현합니다. 전체적인 인상은 권위 있고 정보 밀도가 높으며, 무엇보다 읽는 흐름을 우선하는 스타일입니다.
xAI
xAI의 마케팅 사이트는 --color-ivory(#f9f8f6)와 --color-white(#ffffff)를 기반으로 한 따뜻한 오프화이트 표면 팔레트를 사용하며, 주요 텍스트와 전경색으로는 거의 검정에 가까운 #0a0a0a를 씁니다. 타이포그래피 체계는 큰 디스플레이 제목에 universalSansDisplay(60~72px, 자간을 강하게 좁힌 설정)를, 본문과 UI 문구에 universalSans를, 코드와 터미널 맥락에 GeistMono를 나누어 사용합니다. 라운드 처리는 CTA 버튼과 태그에 적용된 9999px의 필(pill) 형태가 주를 이루며, 카드에는 12px, 입력 필드에는 6px을 씁니다. 그림자 깊이는 최소한으로 절제되어 있어, 카드에만 부드러운 다중 레이어 드롭 섀도를 적용하고 대부분의 표면은 평평하게 처리합니다. 전체적인 분위기는 기술적이면서도 프리미엄한 느낌입니다. 색상은 절제되어 있고 여백은 넉넉하며, 강렬한 모노스페이스 코드 미학으로 개발자에게 신뢰감을 전달합니다.
원하는 사이트가 없나요?
URL만 붙여 넣으면 어떤 웹사이트든 DESIGN.md로 추출해요. 색상, 타이포그래피, 간격, 토큰을 AI 워크플로에 바로 쓸 수 있어요.