Sanity

Difficulty:
Company
Sanity Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryBrand

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Prompt
sm · 12px
md · 24px
lg · 24px
full

Interactive controls use fully rounded pill shapes.

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Derived
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

Sanity is the Content Operating System for the AI era, a back end powering web, mobile, and agentic applications. Its near-black canvas (#0b0b0b) is the default identity rather than a dark mode, waldenburgNormal uses extreme negative tracking at display sizes for a precision-engineered voice, the gray scale stays purely achromatic, and neon green, electric blue (#0052ef), and coral (#f36458) punctuate the dark field.

DeveloperMinimal

Prompt Template

Base Template
Design a Sanity-inspired interface. - Near-black canvas (#0b0b0b) as the default, natural environment -- not a dark "mode" but the primary identity; - waldenburgNormal with extreme negative tracking at display sizes, creating a precision-engineered typographic voice; - Pure achromatic gray scale -- no warm or cool undertones, pure neutral discipline; - Vivid accent punctuation: neon green, electric blue (#0052ef), and coral-red (#f36458) against the dark field; - Pill-shaped primary buttons (99999px radius) contrasting with subtle rounded rectangles (3-6px) for secondary actions. Colors: #0b0b0b, #000000, #f36458, #0052ef with #f36458 accent. Typography: - Background: Sanity Red (.

Variant Prompts

📱 Mobile
Design a mobile app with Sanity aesthetics. Use Sanity color identity with #f36458 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Sanity style. Use Sanity color identity with #f36458 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Sanity design language. Use Sanity color identity with #f36458 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Sanity visual identity. Use Sanity color identity with #f36458 accents. Compelling, conversion-focused.

Usage Examples

Sanity App

Web
Build a web app with Sanity design language and #f36458 color system.

Sanity Dashboard

Dashboard
Create a dashboard using Sanity style with data visualization and - Background: Sanity Red ( typography.

✅ Best For

  • Backend
  • Content management and editing workspaces
  • Editorial-driven product sites

❌ Avoid For

  • Animation-heavy game pages
  • Dark neon tech interfaces

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download