SaaS 디자인 시스템
소프트웨어와 SaaS 웹사이트에서 추출한 디자인 시스템이에요. 생산성 앱, 프로젝트 관리 도구, CRM 등 서비스형으로 판매되는 제품이 여기에 해당해요. 대부분 절제된 팔레트에 강조색 하나, 명확한 타입 스케일을 조합하기 때문에 대시보드나 제품 마케팅 페이지의 출발점으로 좋아요.
이 카테고리의 DESIGN.md 예시 3개: Figma, Linear 및 Notion. 각 사이트의 공개 페이지에서 추출한 것으로, 공식 브랜드 가이드라인이 아니에요. 이 형식이 처음이라면 DESIGN.md란 무엇인지 읽어 보세요.
Figma
Figma의 마케팅 사이트는 명확한 흑백 모노크롬 시스템을 바탕으로 하며, 독자적인 가변 폰트 figmaSans를 중심에 두고 있습니다. 디자인은 타이포그래피가 주도하는 방식으로, 88px/56px의 큰 디스플레이 제목은 자간을 좁게 조여 가벼운 굵기 330의 본문 텍스트와 대비를 이룹니다. CTA 버튼은 검은색 바탕에 흰색 글자를 넣은 완전히 둥근 알약 모양(border-radius: 9999px)을 사용합니다. 레이아웃은 그리드 기반으로, 최대 콘텐츠 너비는 1440px이며 섹션 상하 여백은 80px로 넉넉하게 잡혀 있고, 바탕은 깔끔한 흰색입니다. 깊이감 표현은 최소화되어 있으며, 그림자는 oklch 기반의 은은한 오버레이를 사용합니다. 푸터 배너에는 연보라색 포인트 컬러 #cb9fd2가 등장합니다. 전체적인 미감은 자신감 있고, 타이포그래피적으로 세련되며, 브랜드를 전면에 드러내는 느낌입니다.
Linear
Linear의 디자인 시스템은 엔지니어링 팀을 위해 만들어진, 다크 모드를 우선으로 한 고밀도 제품 UI입니다. 표면 팔레트는 거의 검은색인 #08090a와 #0f1011을 기준으로 하며, 사이드바, 카드, 패널을 구분하기 위해 여러 단계의 어두운 회색을 겹겹이 사용합니다. 타이포그래피는 Inter Variable만 사용하고, 디스플레이 크기에서는 정교한 음의 자간을 적용합니다. 인라인 코드에는 Berkeley Mono를 씁니다. 모서리 반경은 의도적으로 작게 유지되며, 주로 2~6px을 사용하고 알약 모양은 배지와 상태 칩에만 제한적으로 씁니다. 입체감은 강한 레이어 효과보다는 1px 안쪽 테두리와 낮은 불투명도의 그림자로 표현합니다. 기본 CTA 색상은 Linear의 상징적인 인디고 #5e6ad2이며, 회원가입 버튼과 주요 링크에 사용됩니다.
Notion
Notion의 마케팅 홈페이지는 짙은 네이비(#02093a) 히어로 섹션과 밝은(#f6f5f4) 본문 영역을 결합한 구성입니다. 모든 텍스트 역할에 커스텀 서체인 NotionInter를 사용합니다. 레이아웃은 거터 28px의 12열 그리드를 기반으로 하며, 카드에는 8px, 알약형 요소에는 9999px의 이중 모서리 반경을 적용합니다. 플로팅 UI 요소에는 여러 겹으로 이루어진 점진적 그림자 시스템을 사용합니다. 브랜드 블루(#2537b1)는 CTA와 강조 요소에 쓰이며, gray-200부터 gray-900까지의 의미 기반 회색 단계가 모든 텍스트와 표면의 위계를 구성합니다.
원하는 사이트가 없나요?
URL만 붙여 넣으면 어떤 웹사이트든 DESIGN.md로 추출해요. 색상, 타이포그래피, 간격, 토큰을 AI 워크플로에 바로 쓸 수 있어요.