소셜 및 커뮤니티 디자인 시스템
소셜 네트워크, 커뮤니티 플랫폼, 개인 웹사이트에서 추출한 디자인 시스템이에요. 피드, 프로필, 아바타, 게시 컨트롤이 특징이고, 경쾌한 브랜드 색상 하나와 둥글고 친근한 컴포넌트를 쓰는 경우가 많아요.
이 카테고리의 DESIGN.md 예시 2개: Dribbble 및 Snapchat. 각 사이트의 공개 페이지에서 추출한 것으로, 공식 브랜드 가이드라인이 아니에요. 이 형식이 처음이라면 DESIGN.md란 무엇인지 읽어 보세요.
Dribbble
Dribbble의 디자인 시스템은 짙은 네이비에 가까운 검은색(#0d0c22)과 깔끔한 흰색 표면을 기반으로 합니다. 시그니처 핫핑크(#ea4c89) 강조색은 에디토리얼 강조와 인터랙티브 요소의 하이라이트에만 절제해서 사용합니다. 타이포그래피 체계는 모든 굵기에서 Mona Sans 한 가지 서체만 사용하며, 위계는 굵기와 크기만으로 표현합니다. 형태 언어는 알약 모양의 버튼(border-radius: 1e+07px)과 둥근 모서리의 카드(12px 반경)가 정의합니다. 레이아웃은 8px 기준 그리드를 바탕으로 여백을 넉넉하게 두며, 깊이감은 무거운 레이어링보다는 은은한 드롭 섀도로 표현합니다.
Snapchat
Snapchat의 웹 프레젠스는 브랜드의 상징인 #FFFC00 노란색을 중심으로 한 고대비 밝은 테마를 사용합니다. 주요 표면에는 거의 검은색에 가까운 #121314를 적용하고, 페이지 배경은 깔끔한 흰색을 사용합니다. 기본 서체로 Avenir Next를, 보조 서체로 Graphik을 함께 사용하여 친근하면서도 체계적인 타이포그래피 위계를 이룹니다. 버튼, 알약 모양 요소, 태그 같은 상호작용 요소는 완전히 둥근 100px 모서리를 사용하고, 입력창은 은은한 5px 모서리를 사용합니다. 내비게이션은 부드러운 그림자가 드리워진 떠 있는 알약 형태입니다. 콘텐츠는 흰색 텍스트가 겹쳐진 대형 미디어 카드로 보여 주어, 앱 미리보기를 중심에 둔 몰입감 있는 구성을 만듭니다. 전체적인 밀도는 보통 수준이며, 여유 있는 간격과 분명한 시각적 위계를 통해 마케팅 디자인과 제품 UI 관례를 자연스럽게 잇습니다.
원하는 사이트가 없나요?
URL만 붙여 넣으면 어떤 웹사이트든 DESIGN.md로 추출해요. 색상, 타이포그래피, 간격, 토큰을 AI 워크플로에 바로 쓸 수 있어요.