skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-sanity

Apply Sanity's design system tokens, typography, and components when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#design tokens#ui design#sanity#dark theme#brand styling
One-click install
npx skills add https://github.com/deepparser/skills --skill design-sanity-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-sanity
Source: https://github.com/deepparser/skills/tree/main/design-sanity
Command: npx skills add https://github.com/deepparser/skills --skill design-sanity-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Sanity's visual identity requires exact design tokens—colors, typography scales, spacing, and component styles—that are tedious to reverse-engineer manually. This Skill provides the complete Sanity design system so generated UI matches the brand precisely. ## Core Features & Use Cases - Complete Design Tokens: Exact color palette (near-black #0b0b0b canvas, coral-red #f36458 CTA, electric blue #0052ef hover states), typography scale with negative letter-spacing, and 8px-based spacing system. - Component Specifications: Detailed styles for pill buttons, dark cards, form inputs, navigation, and badges with hover/focus behaviors. - Light & Dark Previews: Bundled HTML preview files (preview.html, preview-dark.html) showing the design system implemented in both themes for visual verification. - Use Case: When asked to build a landing page or dashboard styled like Sanity, the Skill supplies every hex value, font size, border radius, and layout rule needed to produce an on-brand result. ## Quick Start Create a landing page hero section styled like Sanity with a dark background, coral-red pill CTA button, and tight-tracked display typography.

Frequently Asked Questions about design-sanity

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a UI that looks like Sanity's website?▼

Use the design tokens in this Skill: a near-black #0b0b0b canvas, white primary text, #b9b9b9 secondary text, coral-red #f36458 pill CTAs, and electric blue #0052ef for all hover states. Typography uses tight negative letter-spacing on headings with IBM Plex Mono for technical labels.

What fonts does the Sanity design system use?▼

Sanity uses waldenburgNormal for display and body text with IBM Plex Mono for code and technical labels. Since waldenburgNormal is a custom typeface, the Skill recommends Inter or Space Grotesk as substitutes, with IBM Plex Mono available on Google Fonts.

Does the Sanity design system support light mode?▼

Yes, the Skill includes both light and dark theme HTML previews. The dark theme is the primary identity, but the light preview shows how tokens adapt to light surfaces with #f7f7f7 backgrounds and dark text.

What border radius values does Sanity's design system allow?▼

The system uses 3px for inputs, 5px for ghost buttons, 6px for cards, 12px for large containers, and 99999px full pills for CTAs and badges. Values between 13px and 99998px should not be used.

How does Sanity handle elevation and shadows in dark UI?▼

Elevation is colorimetric rather than shadow-based: surfaces shift from #0b0b0b to #212121 to #353535 to indicate depth. Traditional offset drop shadows are avoided; only ring shadows and border-based containment are used.

Related Skills

Explore More Design & Creative Skills→
code-vibe-academycode-vibe-academy
2

architecte-contenu

Structures website information with sitemaps, content strategy documents, and Markdown wireframes.

Official
Advanced
aifredoaiaifredoai

frontend-design

Generate production-grade frontend interfaces with unique aesthetics and user experience.

Official
Advanced
AI-Staffing-Solution-Consultants-LLCAI-Staffing-Solution-Consultants-LLC

agency-ui-designer

Creates design systems, component libraries, and accessible interface specifications with CSS design tokens.

Official
Intermediate
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced