Skip to content
shadcn.io

Trigger.dev Design System

Trigger.dev's marketing system on a charcoal canvas with one electric-lime CTA, dual-sans typography (Satoshi display, Geist 300 body), GeistMono code, and a 4px-or-pill radius scale. Tokens for React, Next.js, and AI coding tools.

Get ProDownload DESIGN.md

Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.

Set up MCP
Primary
#a8ff53
Typeface
Satoshi Variable
Shape
Sharp
Base radius
6px
Colors
15
Type tokens
12
Components
16
Spacing values
8

About

About Trigger.dev DESIGN.md

Curated by Dov Azencot · Updated May 19, 2026 · Source trigger.dev (opens in a new tab)

Trigger.dev's marketing site does what most async-infrastructure brands talk about but rarely commit to: it holds one brand color and uses it exactly once above the fold. The canvas is a near-black charcoal, the headline ("Build and deploy fully-managed AI agents and workflows") sits at 60px in Satoshi Variable weight 600, and the only chromatic moment in the whole hero is a single lime-green pill labeled "Start building now" — electric lime against carbon, no gradient, no glow. Where Inngest leans into a violet-pink mesh and Resend carries a black-on-white editorial chrome, Trigger.dev commits to a dev-tools dark canvas with one volt of green and trusts the typographic split to do the rest.

The DESIGN.md file packages the system into a machine-readable spec. Inside: 15 colors tokens drawn from a charcoal ladder (#1c1e21 surface, #121317 deep, #3b3e45 hairline, all wired into a `--charcoal-100/850` scale) plus the lime brand voltage and a violet secondary tier that lives almost entirely in CSS variables rather than on the rendered page; 12 typography tokens split across three families — Satoshi Variable for display headlines at weight 600, Geist for paragraph copy at the unusually thin weight 300, and GeistMono for code samples and tab labels; a binary radius scale (4px or full pill); and 16 components definitions covering the lime CTA, the charcoal navigation pill, the tabbed code panel, the testimonial column, and the dark feature cell.

Feed this file to an AI coding tool and it reproduces Trigger.dev's specific moves: the charcoal-over-black canvas instead of pure-black or near-white, the single-volt lime CTA reserved for one above-fold position, the Satoshi-plus-Geist dual-sans split where one carries display and the other carries body, GeistMono for every code surface, and the 4px-everywhere radius that keeps cards feeling like terminal panels rather than rounded SaaS boxes. The graph-paper hairline grid is the move worth borrowing only if your product is itself developer-facing — on a consumer surface it reads as wire-frame rather than as documentation.

What makes it distinct

5

  1. Electric scarcitylime #a8ff53 is the sole brand voltage, appearing 4 times total against a near-black canvas, all on the primary CTA
  2. Dual-sans splitSatoshi Variable 600 carries display, Geist 300 carries body; one for shouting, one for talking quietly
  3. Weight 300 body copyGeist runs at the unusually thin 300 across paragraphs, half a step lighter than the dev-tools convention
  4. Graph-paper hairlinesthe #1c1e21 grid #e5e7eb-light line under cards reads as graph paper rather than card chrome, 1776 border occurrences
  5. Binary radius4px (91 occurrences) for everything cardlike plus a full pill (33) for tag chips; no middle 8/12/16 tier

trigger.dev

Live at trigger.dev

A snapshot of the brand in production. Scroll the frame to see the whole page.

Visit trigger.dev (opens in a new tab)
Trigger.dev's website at trigger.dev

Colors

15 colors

Trigger.dev's system runs on #a8ff53 as its primary voltage, used in 1 of 16 components. Type is set in Satoshi Variable across 12 tokens from 14px to 60px, weights 300–600. Shape language is sharp — components average 3px corner radius, favoring crisp rectangles.

Brand & Accent

Sparing, CTA-only voltage · 4

Surface

Page and card backgrounds · 4

Text

Headlines, body, captions · 4

Borders & Hairlines

Dividers, outlines, rules · 1

Other

Specialty colors · 2

Typography

12 type tokens

Set in Satoshi Variable across 12 tokens, from 14px to 60px, weights 300–600. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

  • display-xl60px · weight 600 · lh 60pxThe quick brown fox jumps over the lazy dog
  • display-lg48px · weight 600 · lh 48px · tracking 2.4pxThe quick brown fox jumps over the lazy dog
  • display-md36px · weight 600 · lh 40pxThe quick brown fox jumps over the lazy dog
  • heading-lg30px · weight 600 · lh 36pxThe quick brown fox jumps over the lazy dog
  • heading-md24px · weight 600 · lh 32pxThe quick brown fox jumps over the lazy dog
  • heading-sm20px · weight 600 · lh 30pxThe quick brown fox jumps over the lazy dog
  • body-lg18px · weight 500 · lh 28pxThe quick brown fox jumps over the lazy dog
  • body-md16px · weight 300 · lh 24pxThe quick brown fox jumps over the lazy dog
  • body-sm14px · weight 300 · lh 20pxThe quick brown fox jumps over the lazy dog
  • button-md16px · weight 400 · lh 24pxThe quick brown fox jumps over the lazy dog
  • nav-link14px · weight 400 · lh 20pxThe quick brown fox jumps over the lazy dog
  • mono-md14px · weight 400 · lh 20pxThe quick brown fox jumps over the lazy dog

Layout

Radii and spacing

4 corner radii and 8 spacing values. Shape language: sharp.

Radii

  • none0px
  • sm4px
  • md6px
  • full9999px

Spacing

  • xxs2px
  • xs4px
  • sm6px
  • base8px
  • md12px
  • lg16px
  • xl28px
  • 2xl40px

Components

16 components

Each rendered from its tokens (color, type, radius, padding) on Trigger.dev's own canvas.

  • Button Primary
    button-primaryButton Primary
  • Button Secondary
    button-secondaryButton Secondary
  • Top Nav
    top-navTop Nav
  • Nav Link
    nav-linkNav Link
  • Hero Heading
    hero-headingHero Heading
  • Section Heading
    section-headingSection Heading
  • Body Paragraph
    body-paragraphBody Paragraph
  • Body Paragraph Muted
    body-paragraph-mutedBody Paragraph Muted
  • Tab Pill
    tab-pillTab Pill
  • Tag Chip
    tag-chipTag Chip
  • Card Dark
    card-darkCard Dark
  • Code Block
    code-blockCode Block
  • Testimonial Card
    testimonial-cardTestimonial Card
  • Feature Cell
    feature-cellFeature Cell
  • Logo Chip
    logo-chipLogo Chip
  • Footer
    footerFooter

In use

The system, in use

Trigger.dev's tokens on the kind of product it builds.

Build something people actually use.

A short paragraph of marketing copy that previews how the brand's display tier and body tier read together. Two sentences is usually enough.

Get startedLearn more
Marketing heroHeadline, sub-copy, primary CTA — the universal homepage opener.
src index.ts utils.tspackage.jsonREADME.md
index.ts · 12 lines
import { build } from "./build"

export async function main() {
  const result = await build()
  console.log("done", result)
}
Run
Code editorFile tree + editor with syntax-colored snippet.

FAQ

Trigger.dev design system FAQ

Common questions about Trigger.dev's tokens, components, and how to use this DESIGN.md in your project.

Read next

Related reading

Specs, directories, and component libraries that pair with this design system.

Use it

Use Trigger.dev in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

  1. Download the DESIGN.md

    One machine-readable file: every color, type, radius, spacing, and component token of Trigger.dev.

  2. Feed it to your AI tool

    Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Trigger.dev's visual language.

  3. Reference the tokens directly

    Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md: overview, rationale, do’s and don’ts

Overview

Trigger.dev's marketing site commits to a developer-tools chrome with three deliberate moves. Electric scarcity: the brand voltage is a lime green ({colors.primary} — #a8ff53) wired into the page CSS as --primary, and across the entire captured marketing surface it appears just 4 times — all of them on the primary CTA pill that closes the hero. Where Inngest paints itself in a violet-pink mesh and Resend carries a black-on-white editorial chrome, Trigger.dev sits on a near-black charcoal canvas with one volt of green and trusts a dual-sans typographic split to do the rest. Below the fold the page recedes to muted-grey paragraph copy and faint hairline cards; the lime never appears again.

Dual-sans labor split: the system runs two sans-serif families with no overlap in role. Satoshi Variable at weight 600 carries every display heading (60px hero h1, 48px section h2, 30-36px sub-section h3) — confidence through weight and counter shape. Geist carries every body paragraph at the unusually thin weight 300, half a step lighter than the dev-tools convention, with body sub-paragraphs in {colors.ink-muted} (#878c99). GeistMono completes the trio, doing every code sample and every tab label. The result reads as "documentation page" rather than "marketing page" — the typographic register signals to a developer that this site is the same surface as the docs.

The shape language is binary 4px-or-pill. 91 of the 126 captured radius occurrences are 4px (cards, code blocks, feature cells, dropdowns), and the remaining 33 are full pills (tag chips, the CTA, logo avatars). There is no 8/12/16/24px middle tier at all — a deliberate skip that keeps surfaces feeling like terminal panels rather than rounded SaaS boxes.

Key Characteristics:

  • Single-volt lime CTA ({colors.primary} — #a8ff53) reserved for one above-fold position, 4 captured occurrences in total.
  • Charcoal canvas ({colors.canvas} — #1c1e21), not pure black — wired as --charcoal-800 / --cc-bg; the system softens contrast for long-form reading.
  • Deeper #121317 ({colors.surface-deep}) carries the footer and code-block backgrounds, lifting them by ~5% lightness against the canvas.
  • Three-family typographic split: Satoshi Variable 600 for display, Geist 300 for body, GeistMono for code/tabs.
  • Body paragraphs run at Geist weight 300 — half a step lighter than the dev-tools convention.
  • 1776 captured hairline occurrences in {colors.hairline} (#3b3e45 / #e5e7eb at low opacity), the dominant card-divider tone.
  • Binary radius scale — 4px (91 captured) for every card-like surface, full pill (33) for tag chips and the CTA. Zero 8/12/16px middle.
  • 8px base spacing unit; major tokens at {spacing.md} (12px) and {spacing.xl} (28px) for card padding.

Colors

Brand

  • Trigger Lime ({colors.primary} — #a8ff53): frequency 4. Used as background (3) and text (1). Wired as --primary. The single brand voltage — appears exclusively on the primary CTA pill above the fold. Outside that one occurrence the lime is absent from the rendered marketing surface, making it the rarest-but-loudest color in the system.
  • Trigger Violet ({colors.secondary} — #7655fd): frequency 1 (declared as --secondary). A purple-blue accent that lives almost entirely inside CSS custom properties rather than on the page; reserved for future product chrome or sub-brand expansion.
  • Accent Purple ({colors.accent-purple} — #9c9af2): frequency 302 — text only. Used inside code samples and inline highlight badges; not part of the brand-chrome voltage despite the high count.
  • Accent Magenta ({colors.accent-magenta} — #e888f8): frequency 26 — text only. Used for a single category of inline syntax highlighting in the embedded code blocks.
  • Accent Lime Soft ({colors.accent-lime-soft} — #d9f07c): frequency 11 — text only. The muted-lime sibling that appears inside code-sample syntax coloring, not as a brand mark.

Surface

  • Canvas ({colors.canvas} — #1c1e21): frequency 216. Used as background (38), border (156), text (18), and gradient (4). The page floor — wired as --charcoal-800, --cc-bg, and --grid-dimmed. A near-black with a faint blue undertone; the contrast against ink text reads softer than pure black.
  • Surface Deep ({colors.surface-deep} — #121317): frequency 63. Used as background (45), text (7), gradient (11). The deeper tier — carries the footer, code-block backgrounds, and the tabbed code-panel surface. Wired as --charcoal-850 / --cc-footer-bg.
  • Surface-1 ({colors.surface-1} — #272a2e): frequency 5 — borders only. The third charcoal step, used as a slightly-lighter card divider on dropdown menus. Wired as --charcoal-700.
  • Surface-2 ({colors.surface-2} — #3b3e45): frequency 16. Used as border (14) and text (2). The secondary button background and the lightest charcoal step — wired as --charcoal-600.

Text

  • Ink ({colors.ink} — #e5e7eb): frequency 1778. Used as border (1776), text (2). Wired as --text-bright and --charcoal-100. The dominant light tone — also used (via opacity) as the hairline color across the page; the hex's role is split between brightest text and lightest border.
  • Ink Bright ({colors.ink-bright} — #d7d9dd): frequency 1151. Used as text (1150), border (1). Wired as --charcoal-200. The workhorse body-text tone on the dark canvas.
  • Ink Muted ({colors.ink-muted} — #878c99): frequency 307 — text only. Wired as --charcoal-400, --text-dimmed. Secondary paragraph copy, captions, footer text.
  • Ink Soft ({colors.ink-soft} — #b5b8c0): frequency 102. Used as text (100), border (2). Wired as --charcoal-300. Tertiary text — sub-labels and link affordances.

Hairline

  • Hairline ({colors.hairline} — #3b3e45): the secondary card divider tone, used where the brighter {colors.ink} would feel too bold. Wired as --charcoal-600.

Typography

Font Families

The system runs three sans-serif voices with strict role separation. Satoshi Variable carries every display heading from 24px through 60px, always at weight 600 — a heavier register than most of the dev-tools category leans on. Geist carries every body paragraph, nav link, and button label, with the unusual choice of weight 300 for paragraph copy (most dev tools run body at 400-500). GeistMono completes the trio, handling every code sample, every tabbed panel label, and inline metadata strips. The fallback stacks walk ui-sans-serif, system-ui, -apple-system, sans-serif for the sans tier and ui-monospace, monospace for the mono tier.

Hierarchy

TokenSizeWeightFamilyUse
{typography.display-xl}60px600SatoshiHero h1 ("Build and deploy fully-managed AI agents and workflows")
{typography.display-lg}48px600SatoshiLarge section h2 with 2.4px tracking
{typography.display-md}36px600SatoshiMid-section h3
{typography.heading-lg}30px600SatoshiSub-section h2 / h3
{typography.heading-md}24px600SatoshiCard titles, h3
{typography.heading-sm}20px600SatoshiSmall headings, h3
{typography.body-lg}18px500SatoshiTestimonial copy, callouts
{typography.body-md}16px300GeistDefault paragraph running text
{typography.body-sm}14px300GeistCaption rows, footnote text
{typography.button-md}16px400GeistCTA and button labels
{typography.nav-link}14px400GeistTop-nav link labels
{typography.mono-md}14px400GeistMonoCode samples, tab labels

Principles

Body weight 300 is the unusual choice. Most dev-tools brands run body at 400 or 500 — Trigger.dev drops it to Geist 300, half a step lighter than Linear, Vercel, or Inngest. The thinner stroke softens the long-form reading register and lets Satoshi 600 carry more typographic muscle by contrast. Paragraph copy below the fold reads almost like documentation prose rather than marketing copy — which is the point.

Note on Font Substitutes

Satoshi Variable is licensed but free for personal use; the closest open substitute is Inter at weight 600 with -0.5% tracking, which transfers cleanly to the same display sizes. Geist itself is Vercel's open-source sans and ships free; if the production stack needs a fallback the system stack walks ui-sans-serif, system-ui. For the mono tier, GeistMono is also open-source — JetBrains Mono or IBM Plex Mono transfer cleanly at the same 14px size.

Layout

Spacing System

  • Base unit: 4px, with 8px as the dominant module.
  • Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 6px · {spacing.base} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 28px · {spacing.2xl} 40px.
  • Section padding (vertical): ~80-128px between major sections on the dark canvas.
  • Card internal padding: {spacing.lg} (16px) on small cards, {spacing.xl} (28px) on testimonial blocks.
  • Top-nav padding: 12px vertical, 16px horizontal.

Grid & Container

  • Max content width: ~1024px on the hero text block, ~1280px on the feature grids and logo wall.
  • Hero: centered text + sub-paragraph + single CTA pill, max-width 1024px on the headline.
  • Feature grid: 4-column on the "Build invincible AI apps" row (Autonomous / Prompt chaining / Routing / Parallelization).
  • Logo wall: monochrome grey company logos in a single horizontal row beneath the testimonial column.

Rhythm

The page alternates between dense text bands (hero + testimonial column on the same row) and wide feature grids (4-up cards with diagrammatic illustrations). The graph-paper hairline grid runs underneath nearly every card surface, which gives the rhythm a documentation-page feel — sections terminate on visible 1px rules rather than on whitespace.

Elevation

The system has essentially no shadow tier. The captured page has only 1 shadow occurrence in #000000 and uses tonal lift instead — cards on the dark canvas read as elevated by sitting in {colors.surface-deep} (#121317) against {colors.canvas} (#1c1e21), a ~5% lightness gap that's enough to register without drawing a shadow.

  • Flat (no shadow): hero, body bands, feature cells, footer — 99% of surfaces.
  • Tonal lift: {colors.surface-deep} cards sit on {colors.canvas} — the small lightness gap reads as elevation without any shadow drawn.
  • Hairline outlines: {colors.hairline} (#3b3e45) and the ink-at-low-opacity carry 1776 of the captured border occurrences — the dominant elevation mechanism.

Shapes

The radius scale is binary 4px-or-pill with no middle tier:

  • {rounded.none} 0px — used on feature-cell edges that meet the graph-paper grid.
  • {rounded.sm} 4px (91 occurrences) — every card, code panel, feature cell, dropdown surface, and the primary CTA. The dominant radius in the system.
  • {rounded.md} 6px (2 occurrences) — a rare middle value used on one or two minor UI surfaces.
  • {rounded.full} 9999px (33 occurrences) — tag chips, logo avatars, certain pill labels.

The deliberate skip of 8/12/16px middle radii is the move. The surface either reads as a sharp-cornered terminal panel (4px) or as a fully rounded chip (pill); there is no rounded-but-not-pill option that would soften the dev-tools register.

Components

button-primary — The signature CTA. Lime {colors.primary} (#a8ff53) fill, charcoal {colors.canvas} text, {rounded.sm} 4px radius, 8x16 padding, 40px height. "Start building now" is the canonical instance, sitting at the bottom of the hero stack.

button-secondary — Transparent fill, {colors.ink} text, 1px {colors.surface-2} border, {rounded.sm} radius, 8x12 padding, 40px height. Used for "10.5k · Open source" in the hero and "Login" in the top-nav.

top-nav — Charcoal {colors.canvas} surface, 59px height. Wordmark flush left, product-nav links (Products, How it works, Changelog, Pricing, Blog, Docs) center, "Our $13.5k" badge plus Login and "Get started" cluster flush right.

nav-link — Transparent background, {colors.ink-bright} text in {typography.nav-link} (14px / 400), 8x12 padding.

hero-heading — {colors.ink} text, {typography.display-xl} (60px / 600 Satoshi). The largest typographic moment in the system.

section-heading — {colors.ink} text, {typography.display-md} or {typography.heading-lg} Satoshi. Used for "Build invincible AI apps", "Deploy and scale to any size", "Find and fix bugs fast".

body-paragraph — Default Geist {typography.body-md} at weight 300 in {colors.ink-muted} (#878c99). The dimmed-paragraph treatment is deliberate — most marketing sites would use bright-white body, Trigger.dev runs muted.

tab-pill — Tabbed code-panel category labels. {colors.surface-deep} fill, {colors.ink-soft} text, {rounded.sm} 4px, 0x12 / 0x8 padding, 40px height, 1px {colors.canvas} border. Used for "AI agents / Media processing / Media generation / Human in the loop / Streaming / Run Python / Marketing / Browser automation".

tag-chip — Small {rounded.full} pill chips with {colors.surface-1} fill and {colors.ink-bright} text. Used for status labels like "Completed", "Executing", "Failed" in the task-queue illustration.

card-dark — Default content card. {colors.canvas} fill, {colors.ink-bright} text, {rounded.sm} 4px, 16px padding, 1px {colors.surface-1} border.

code-block — The tabbed code-sample panel. {colors.surface-deep} fill, {colors.ink-bright} text, {typography.mono-md} (14px GeistMono), {rounded.sm} 4px, 16px padding. Syntax coloring uses the accent-purple/magenta/lime-soft palette for keywords, strings, and comments.

testimonial-card — {colors.canvas} fill, {colors.ink-bright} text, {rounded.sm} 4px, 28px padding, {typography.body-lg} Satoshi 500. The right column of the hero row holds the canonical instance ("We decided to use Trigger.dev over Inngest…").

feature-cell — The 4-up feature-grid tile. Transparent fill, {colors.ink-bright} text, 28x16 padding, 1px {colors.surface-1} separator. Holds a small diagrammatic illustration, an h4 title, and a 1-2 line description.

logo-chip — Transparent fill, {colors.ink-muted} monochrome logo at 40px height. The customer-logo wall renders every mark in muted grey at uniform size — Papermark, Vidrovr, AXIOM, Linksy, Inkitty, and others.

footer — {colors.surface-deep} fill, {colors.ink-muted} text, {typography.body-sm} 14px / 300 Geist, 40x16 padding.

Do's and Don'ts

Do treat the lime brand voltage as a single above-fold moment. The system has exactly one {colors.primary} (#a8ff53) CTA — multiplying it into nav-bar pills, sticky-button reuses, or inline-link colors would dilute the only chromatic signal in the system.

Do run paragraph copy in {colors.ink-muted} (#878c99) on Geist weight 300, not in bright white. The dimmed-body treatment is deliberate — it signals "documentation register" rather than "marketing register," and the bright white is reserved for headings and code samples.

Do use Satoshi Variable for every display heading and Geist for every body paragraph. Mixing the families (e.g., a Geist 600 heading or a Satoshi 300 body line) breaks the labor split that makes the dual-sans system read as deliberate rather than accidental.

Do stack tag chips at {rounded.full} and content cards at {rounded.sm} 4px. The binary radius scale is part of the system's identity — chips read as chips and panels read as panels because there's no middle radius softening either category.

Don't introduce a 12 / 16 / 20px middle radius tier. The system runs 91 captured 4px occurrences and 33 captured full-pill occurrences with nothing in between — adding a middle value would soften the terminal-panel feel that the binary scale is doing.

Don't use the accent-purple {colors.accent-purple} (#9c9af2) or accent-magenta {colors.accent-magenta} (#e888f8) outside code-syntax contexts. These are syntax-highlighting tokens inside the embedded code samples, not brand accents — using them on UI chrome would steal the lime's role as the sole chromatic voltage.

Don't swap the canvas from {colors.canvas} (#1c1e21) to pure black or to a softer slate-near-black. The charcoal tone is wired as --charcoal-800 across the entire system, and the page's 1776 hairline borders are calibrated against it; switching the canvas would force a hairline rebalance.

Don't run body paragraphs at Geist weight 400 or above. The system commits to 300 across paragraph copy as a deliberate documentation-register move. Bumping to 400 turns the page into a generic dev-marketing site and loses the typographic register split.

Known Gaps

  • Hover and focus states: the captured marketing surface shows resting states only. Focus rings, disabled tints, error styling for forms — all live in the product app at cloud.trigger.dev rather than on the marketing site.
  • Form input: the marketing site has no rendered input field; text-input is not captured here. The input chrome lives in the auth flow and the product editor.
  • Light mode: the captured surface is dark-only. The Trigger.dev product app has both light and dark variants but only the dark marketing chrome is represented in this spec.
  • Motion: several illustrations animate on scroll-into-view (the task-queue grid, the parallelization diagram) but the spec captures end-state values only. Easing curves and stagger timing live in the React runtime.
  • Product surfaces: this DESIGN.md captures the marketing site only. The Trigger.dev dashboard, run-detail view, and queue-management surfaces carry a richer token set — log-level colors, run-status badges, retry-indicator chrome — that is not represented here.
  • Sub-brand purple tier: {colors.secondary} (#7655fd) and a paired lighter hover variant are declared as CSS variables but render in just 1-2 places on the marketing surface; their primary use is in the product editor's selection states.
  • Syntax highlighting palette: the accent purple/magenta/lime-soft trio inside embedded code blocks borrows from a standard dark-mode IDE palette but isn't tied to a specific theme (VS Code, Shiki, etc.); the exact mapping lives in the docs-site Shiki configuration.

Backend, Database & DevOps

More systems like this

More DESIGN.md files in Backend, Database & DevOps.

All 37 in Backend, Database & DevOps

Pricing

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
  • Complete multi-page sites you can ship as they are.Templates: All 14 templates
  • React icons from every major library, installable with one command.React icons: 294k+ icons
  • Presets that restyle every block, in light and dark.Themes: All 59 themes
  • Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Lets your AI editor search, preview and install blocks for you.MCP server: High usage
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro