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

design-zapier

Apply Zapier's design system tokens, typography, and component styles to UI generation.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating Zapier's distinctive warm, border-forward visual identity requires exact design tokens that are hard to guess, leading to off-brand interfaces with wrong colors, fonts, and spacing. ## Core Features & Use Cases - Complete Design Token Catalog: Exact color values (Zapier Orange #ff4f00, Cream White #fffefb, Sand #c5c0b1), typography scales for Degular Display, Inter, and GT Alpina, and an 8px-based spacing system. - Component Specifications: Detailed styling for buttons, cards, forms, tab navigation with inset box-shadow underlines, and border-first elevation without shadows. - Light and Dark HTML Previews: Bundled preview.html and preview-dark.html files show every token visualized for verification of exact CSS values. - Use Case: When asked to build a landing page or dashboard styled like Zapier, invoke this skill to generate UI code using the correct cream background, warm neutrals, and orange CTA treatment. ## Quick Start Create a Zapier-style landing page with a hero section, orange CTA button, and integration cards using the design-zapier skill.

Frequently Asked Questions about design-zapier

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

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

Use the design tokens from this skill: cream background #fffefb, warm near-black text #201515, and Zapier Orange #ff4f00 reserved for primary CTAs. Structure elements with 1px solid #c5c0b1 sand borders instead of box shadows.

What fonts does Zapier's design system use?▼

Zapier uses three fonts with strict roles: Degular Display for hero headlines at 0.90 line-height, Inter for all functional UI text, and GT Alpina as a thin-weight serif for editorial accents with negative letter-spacing.

Does this skill include a dark mode version of the Zapier design?▼

Yes, the skill bundles both preview.html for the light theme and preview-dark.html for a dark adaptation. The dark preview remaps the palette to dark warm tones while keeping Zapier Orange as the accent.

When should I not use Zapier Orange in the UI?▼

Zapier Orange #ff4f00 is reserved for primary CTA buttons, active tab underlines, and focus rings only. Do not scatter it across the interface; all other elements use the warm neutral palette of sand, charcoal, and cream.

Why does Zapier's design avoid box shadows on cards?▼

Zapier uses a border-first elevation philosophy where 1px solid #c5c0b1 sand borders define containment instead of shadows. The only shadow technique is the inset box-shadow underline used for active and hover tab states.

Related Skills

Explore More Design & Creative Skills→
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
Norfolk-GroupNorfolk-Group

component-library

Provides a UI component library with usage rules for the Hospitality portal.

Official
Intermediate
trevorc-aitrevorc-ai

visual_accessibility

Audit UI color contrast, color-reliant cues, and focus state visibility.

Community
Intermediate
ArnavPuriArnavPuri
3

design-context

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

Community
Intermediate