개발 도구 디자인 시스템
개발 도구와 인프라 웹사이트에서 추출한 디자인 시스템이에요. 호스팅, 데이터베이스, API, IDE, DevOps 제품이 여기에 해당해요. 많은 사이트가 어두운 배경, 고정폭 폰트 강조, 정식 컴포넌트로 스타일링된 코드 블록을 쓰고, 촘촘하고 기술적인 타이포그래피를 갖추고 있어요.
이 카테고리의 DESIGN.md 예시 3개: Neon, Railway 및 Supabase. 각 사이트의 공개 페이지에서 추출한 것으로, 공식 브랜드 가이드라인이 아니에요. 이 형식이 처음이라면 DESIGN.md란 무엇인지 읽어 보세요.
Neon
Neon의 디자인 시스템은 다크 모드를 우선으로 하는 개발자 중심 브랜드로, 거의 검은 바탕(#000000, #18191b)에 선명한 네온 그린 기본 색상(#00e599)과 이를 보조하는 중간 톤의 그린(#34d59a)을 사용합니다. 타이포그래피는 UI와 본문에 Inter, 코드와 데이터에 GeistMono를 조합하며, 두 서체 모두 자간을 좁게 조정했습니다. 간격은 4px 기본 격자를 따르고, 모서리 반경은 4px로 일관되게 최소화되어 있습니다. 입체감은 그림자보다 테두리 대비로 표현하며, 하나의 은은한 드롭섀도만 절제해서 사용합니다. 히어로 영역에는 화면 전체를 채우는 애니메이션 데이터 시각화 배경이 적용되어, 데이터베이스와 인프라를 다루는 브랜드 정체성을 강화합니다.
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을 적용합니다.
Supabase
Supabase는 다크 모드를 기본으로 하는 디자인 시스템으로, 거의 검은색에 가까운 짙은 배경(oklch ~0.19)을 바탕으로 합니다. 선명한 녹색 브랜드 포인트 컬러(#3ecf8e / #3fcf8e)가 시각적 중심을 잡아 줍니다. 레이아웃은 반응형 기능 카드 그리드를 중심으로 구성되며, 디스플레이 제목에는 Manrope, 본문과 UI 텍스트에는 Inter 서체를 사용합니다. 모노스페이스와 코드가 필요한 모든 영역에는 Source Code Pro를 적용합니다. 색상 체계는 의미 기반 이름을 가진 oklch 커스텀 속성으로 구축되어 있습니다. 카드는 12px 모서리 반경과 은은한 테두리 처리를 적용하고, 버튼은 6–8px 모서리 반경을 사용합니다. 전체적인 밀도는 중간 수준이며, 8px 기본 간격 그리드를 따릅니다.
원하는 사이트가 없나요?
URL만 붙여 넣으면 어떤 웹사이트든 DESIGN.md로 추출해요. 색상, 타이포그래피, 간격, 토큰을 AI 워크플로에 바로 쓸 수 있어요.