Sanity

Overview

Sanity's website is a developer-content platform rendered as a nocturnal command center — dark, precise, and deeply structured. The entire experience sits on a near-black canvas (#0b0b0b).

The signature typographic voice is waldenburgNormal — a distinctive, slightly geometric sans-serif with tight negative letter-spacing (-0.32px to -4.48px at display sizes). IBM Plex Mono handles code and technical labels.

Key Characteristics

• Near-black canvas (#0b0b0b) as the default, natural environment
• waldenburgNormal with extreme negative tracking at display sizes
• Pure achromatic gray scale
• Vivid accent punctuation: neon green, electric blue (#0052ef), coral-red (#f36458)
• Pill-shaped primary buttons (99999px radius)

Do's and Don'ts

Use the achromatic gray scale as the foundation. Apply Electric Blue (#0052ef) as the universal hover state. Keep primary CTAs as full-pill shapes with coral-red (#f36458).

개요

Sanity의 웹사이트는 야간 명령 센터로 렌더링된 개발자 콘텐츠 플랫폼으로, 어둡고 정확하며 깊이 있게 구성되어 있습니다. 전체 경험은 거의 검은색 캔버스(#0b0b0b) 위에 있습니다.

시그니처 활자체 음성은 WaldenburgNormal입니다. 독특하고 약간 기하학적인 산세리프체로 음수 간격이 촘촘합니다(디스플레이 크기에서 -0.32px~-4.48px). IBM Plex Mono는 코드 및 기술 라벨을 처리합니다.

주요 특징

• 검은색에 가까운 캔버스(#0b0b0b)를 기본 자연 환경으로 사용합니다
• waldenburgNormal(디스플레이 크기에서 극단적인 음수 추적 포함)
• 순수 무채색 그레이스케일
• 선명한 악센트 구두점: 네온 그린, 일렉트릭 블루(#0052ef), 코랄 레드(#f36458)
• 알약 모양의 기본 버튼(99999픽셀 반경)

해야 할 일과 하지 말아야 할 일

무채색 그레이 스케일을 기초로 사용하세요. 범용 호버 상태로 일렉트릭 블루(#0052ef)를 적용합니다. 기본 CTA를 산호색(#f36458)을 사용하여 전체 알약 모양으로 유지합니다.

概要

Sanity の Web サイトは、夜間の指令センターとしてレンダリングされた開発者コンテンツ プラットフォームであり、暗く、正確で、深く構造化されています。エクスペリエンス全体がほぼ黒のキャンバス (#0b0b0b) 上に表示されます。

特徴的なタイポグラフィー音声は、waldenburgNormal です。マイナスの文字間隔が狭い (ディスプレイ サイズで -0.32 ピクセルから -4.48 ピクセル) 独特の、わずかに幾何学的なサンセリフです。 IBM Plex Mono はコードと技術ラベルを処理します。

主な特徴

• デフォルトの自然環境としてのほぼ黒のキャンバス (#0b0b0b)
• waldenburgNormal、ディスプレイ サイズでの極端なネガティブ トラッキング
• 純粋な無彩色グレースケール
• 鮮やかなアクセント句読点: ネオン グリーン、エレクトリック ブルー (#0052ef)、コーラルレッド (#f36458)
• 錠剤型のプライマリ ボタン (半径 99999 ピクセル)

推奨事項と禁止事項

無彩色のグレースケールを基礎として使用します。エレクトリック ブルー (#0052ef) をユニバーサル ホバー状態として適用します。プライマリ CTA は、コーラルレッド (#f36458) のフルピル形状にしてください。

Visual Identity & Brand Recognition

What makes Sanity's design system memorable is not any single element but the cohesive interaction of its parts. The #0b0b0b brand color, the consistent use of waldenburgNormal across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Visual Identity & Brand Recognition

What makes Sanity's design system memorable is not any single element but the cohesive interaction of its parts. The #0b0b0b brand color, the consistent use of waldenburgNormal across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Visual Identity & Brand Recognition

What makes Sanity's design system memorable is not any single element but the cohesive interaction of its parts. The #0b0b0b brand color, the consistent use of waldenburgNormal across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Related Design Systems

Explore similar design languages from the same category:

• Replicate Design System
• Webflow Design System
• Linear Design System
• Supabase Design System