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

design-warp

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Warp's warm, dark, editorial visual identity requires exact design tokens that are hard to reverse-engineer manually. This Skill provides the complete design system so generated UI matches Warp's brand without guesswork. ## Core Features & Use Cases - Complete Design Tokens: Exact color values (Warm Parchment #faf9f6, Earth Gray #353534), typography scale (Matter Regular at 80px–11px), spacing, and border-radius scales. - Component Specifications: Detailed styling for dark pill buttons, frosted tags, bordered cards, forms, and navigation with hover and focus states. - Visual Reference Previews: Bundled light and dark theme HTML previews (preview.html, preview-dark.html) for verifying exact CSS implementation details. - Use Case: When asked to build a landing page styled like Warp, generate a hero section with 80px Matter Regular heading at -2.4px letter-spacing, warm parchment text on a near-black background, and a restrained dark pill CTA. ## Quick Start Use the design-warp skill to create a landing page hero section styled like Warp's website.

Frequently Asked Questions about design-warp

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

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

Invoke this skill when generating UI and it applies Warp's exact design tokens: warm near-black backgrounds, Warm Parchment (#faf9f6) text, Matter Regular typography, and dark pill buttons (#353534 with 50px radius). The bundled HTML previews show reference implementations.

What colors does the Warp design system use?▼

Warp uses an almost monochromatic warm gray palette: Warm Parchment (#faf9f6) for primary text, Ash Gray (#afaeac) for body text, Stone Gray (#868584) for secondary text, and Earth Gray (#353534) for buttons. No bold accent colors are used.

What typography does Warp's design system use?▼

Warp uses the Matter font family at Regular weight (400) for nearly all text, including headlines up to 80px with -2.4px letter-spacing. Matter Medium (500) appears only for card titles and buttons, with Geist Mono for code and Inter as a UI supplement.

Does the Warp design system support dark mode?▼

Yes, the skill includes both a light theme preview (preview.html) and a dark theme preview (preview-dark.html). Warp's identity is inherently dark-first, using warm near-black backgrounds with cream-tinted text rather than pure white.

When should I not use the Warp design system?▼

Avoid this system when a design requires bold accent colors, heavy drop shadows, gradients, or glassmorphism effects. Warp's identity is deliberately restrained: monochromatic warm grays, flat elevation, and no text above Medium weight.

Related Skills

Explore More Design & Creative Skills→
Kael-DeanKael-Dean

frontend-design

Design production-grade frontend interfaces with cohesive design systems and polished code.

Community
Advanced
RUSHYOPRUSHYOP

ts-frontend-engineer

Implement type-safe TypeScript frontend codebases across React, Vue, Svelte, and other frameworks.

Community
Advanced
indigoai-usindigoai-us

bolder

Enhance typography, color, spacing, and motion in UI components while preserving usability.

Official
Advanced
ArnavPuriArnavPuri
3

design-context

Establish and manage design context with brand identity, color palettes, and typography.

Community
Intermediate