Home
DESIGN.mdStar on GitHub

Your tools. Your rules. Any AI.

Zapier connects your apps into automated workflows — a trigger, then the actions that follow. No code required.

Signature — Zap editor
Lead → notify & log
zap_8Kd2Qx · 4 steps
Off
Flip the Zap on · Test runs each step in sequence (spinner → green check) · Add a step extends the flow (max 6).
Colors
Brand
orange#FF4F00Brand, CTAs, active
ink#201515Text, wordmark
clay#D97757Warm accent
success#1F8A4CTest passed
Surfaces — warm paper
cream#F9F7F3Page canvas
paper#FFFEFBCards
sand#ECEAE3Fills, hover
muted#72716DSecondary text
Typography — Degular Display · Inter · JetBrains Mono
display
Degular Display · 700
Automate anything
60px700
heading
Degular Display · 600
Trigger, then action
28px600
body
Inter · 400
Connect 8,000+ apps and move data between them automatically.
15px400
mono
JetBrains Mono
zap_8Kd2Qx · trigger: gmail.new_email
13pxmono
Components
Buttons
App tiles
✉ # ▤ Z </>
Guardrails
DO
Keep the wordmark's dot/mark orange #FF4F00 (fixed); let the letters adapt to theme.
Keep the canvas warm cream #F9F7F3 — cards are #FFFEFB, never pure white.
Use orange for brand, primary actions, and the active Zap state — sparingly.
Headlines in Degular Display; UI/body in Inter; IDs & payloads in mono.
Keep dark mode warm near-black #1A1210 — never a cool blue-black.
DON'T
Don't introduce a second saturated accent competing with orange.
Don't set body copy in Degular Display — it's for headlines.
Don't cool the neutrals — Zapier's grays are warm.
Don't recolor the orange mark.
Don't crowd the Zap editor — the step sequence reads top-to-bottom.