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

design-superhuman

Apply Superhuman's design system tokens when generating UI interfaces.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating Superhuman's distinctive visual identity in UI work requires knowing exact color values, non-standard font weights, and spacing rules that are hard to guess from screenshots alone. ## Core Features & Use Cases - Complete Design Tokens: Provides exact colors (Mysteria Purple #1b1938, Lavender Glow #cbb7fb, Warm Cream #e9e5dd), typography specs with non-standard weights (460, 540, 600, 700), and a binary 8px/16px border-radius system. - Component Guidance: Covers buttons, cards, forms, navigation, elevation, spacing scale, and responsive breakpoints with do's and don'ts. - Light and Dark Previews: Bundled preview.html and preview-dark.html files show the full token catalog rendered as living style guides for visual verification. - Use Case: When asked to build a landing page styled like Superhuman, generate a hero with the deep purple gradient, 64px headline at weight 540 and 0.96 line-height, and a warm cream CTA button. ## Quick Start Use the Superhuman design skill to create a landing page hero section with the purple gradient and warm cream button.

Frequently Asked Questions about design-superhuman

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

FAQPage Schema
How do I make a UI look like Superhuman's website?▼

Apply Superhuman's design tokens: a deep purple hero gradient (#1b1938), white content background, Warm Cream (#e9e5dd) buttons with 8px radius, and Lavender Glow (#cbb7fb) as the only accent color. Use tight 0.96 line-height on headlines and 1.50 on body text.

What font and weights does the Superhuman design system use?▼

It uses Super Sans VF, a variable font with non-standard weight stops of 460, 540, 600, and 700. Weight 460 is the default body weight, and 540 is used for display headlines, with system-ui fallbacks when the font is unavailable.

Does this design system support dark mode?▼

Yes, the skill includes a preview-dark.html file rendering the full token catalog on dark surfaces (#121111 background) with adjusted text opacities and lavender-tinted elevation. Both light and dark theme references are bundled for verification.

What border radius values should I use for Superhuman-style components?▼

Use only two radius values: 8px for buttons and inline elements, and 16px for cards and containers. The system deliberately avoids pill shapes and micro-rounding to maintain its minimal aesthetic.

When should I avoid using the Superhuman design style?▼

Avoid it when the project needs saturated semantic colors, heavy shadows, decorative illustrations, or multiple accent hues. Superhuman's system relies on extreme restraint with one accent color and border-based depth rather than shadows.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
KARENLHAOKARENLHAO
1

frontend-design

Generate frontend interfaces and components with HTML/CSS, React, or Vue.

Community
Advanced
Javeria-JavaidJaveria-Javaid

ui-visual-validator

Validates UI modifications through visual evidence, design system compliance, and accessibility checks.

Community
Intermediate
synqingsynqing

brand-guidelines

Apply Anthropic brand colors, typography, and visual identity guidelines.

Community
Basic