Skip to content
shadcn.io

Panic Design System

Panic’s web UI feels like a developer’s playground: a near‑black canvas, a single electric blue call‑to‑action, Booton type that reads like billboard copy, and just enough gray to let code breathe.

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
#0852ff
Typeface
Booton
Shape
Sharp
Base radius
22.5px
Colors
17
Type tokens
10
Components
15
Spacing values
7

About

About Panic DESIGN.md

Curated by Dov Azencot · Updated May 15, 2026 · Source panic.com (opens in a new tab)

The first thing you notice on Panic’s site is the stark contrast between a near‑black hero band and a bright electric blue button that seems to pulse with intent. The hero heading stretches to eighty pixels in Booton, demanding attention while the rest of the page retreats into a palette of muted grays, letting the single accent do the heavy lifting. It feels like a terminal that got dressed up for a date, where the code remains the star and the UI merely whispers.

The palette choice reads like a deliberate experiment in restraint. Rather than scattering colors across the page, Panic isolates one electric blue for primary actions, while the background settles into a near‑black canvas and the text lives in layers of gray. Where Stripe leans on indigo gradients and Vercel opts for matte black, Panic’s decision keeps the visual noise low, letting developers focus on the content. The use of a single accent mirrors the Playdate handheld’s limited color screen, reinforcing the brand’s hardware roots.

What does this mean for a designer or developer pulling the spec into a tool? The system forces you to think about hierarchy before hue, encouraging you to use the electric blue sparingly and let typographic scale carry emphasis. It also means any component you build will inherit a clear elevation strategy: borders in pure white act as subtle lifts, while the gray text hierarchy defines depth. Stealing this restraint can make any product feel more purposeful, especially when the audience values code over cosmetics.

What makes it distinct

4

  1. Single electric accentone electric blue hue appears only on primary calls‑to‑action, forcing every other element to stay in grayscale and preserving visual hierarchy.
  2. Booton dominanceall headings use the Booton family, from massive 80 px display text down to compact 15 px labels, giving the brand a consistent typographic voice.
  3. Gray‑scale deptha hierarchy of muted grays ink, muted, darkgray provides contrast without introducing additional colors, echoing the monochrome aesthetic of the Playdate console.
  4. Border minimalismthe only border color is pure white, used sparingly for input outlines, which makes borders feel like subtle elevation rather than decorative frames.

panic.com

Live at panic.com

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

Visit panic.com (opens in a new tab)
Panic's website at panic.com

Colors

17 colors

Panic's system runs on #0852ff as its primary voltage, used in 3 of 15 components. Type is set in Booton across 10 tokens from 15px to 80px, weights 300–600. Shape language is sharp — components average 0px corner radius, favoring crisp rectangles.

Brand & Accent

Sparing, CTA-only voltage · 2

Surface

Page and card backgrounds · 1

Text

Headlines, body, captions · 3

Borders & Hairlines

Dividers, outlines, rules · 1

Other

Specialty colors · 10

Typography

10 type tokens

Set in Booton across 10 tokens, from 15px to 80px, weights 300–600. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

  • display-8080px · weight 300 · lh 104px · tracking -0.5pxThe quick brown fox jumps over the lazy dog
  • heading-4848px · weight 600 · lh 48px · tracking -0.5pxThe quick brown fox jumps over the lazy dog
  • heading-4242px · weight 300 · lh 45px · tracking -2.1pxThe quick brown fox jumps over the lazy dog
  • heading-4040px · weight 300 · lh 52px · tracking -0.5pxThe quick brown fox jumps over the lazy dog
  • body-15-bold15px · weight 600 · lh 20px · tracking -0.5pxThe quick brown fox jumps over the lazy dog
  • body-15-regular15px · weight 300 · lh 20px · tracking -0.5pxThe quick brown fox jumps over the lazy dog
  • body-16-regular16px · weight 300 · lh 20px · tracking -0.5pxThe quick brown fox jumps over the lazy dog
  • body-16-compact16px · weight 300 · lh 16px · tracking -0.5pxThe quick brown fox jumps over the lazy dog
  • mono-4040px · weight 400 · lh 52px · tracking -0.5pxThe quick brown fox jumps over the lazy dog
  • heading-2424px · weight 300 · lh 46px · tracking -0.5pxThe quick brown fox jumps over the lazy dog

Layout

Radii and spacing

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

Radii

  • large22.5px
  • small4px
  • full9999px
  • none0px

Spacing

  • spacing-1010px
  • spacing-3-753.75px
  • spacing-4040px
  • spacing-30-7230.72px
  • spacing-1616px
  • spacing-00px
  • spacing-55px

Components

15 components

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

  • Primary Button
    primary-buttonPrimary Button
  • Hero Heading
    hero-headingHero Heading
  • H2
    h2H2
  • Body Text
    body-textBody Text
  • Nav Link
    nav-linkNav Link
  • Input
    inputInput
  • Card
    cardCard
  • Badge
    badgeBadge
  • Footer
    footerFooter
  • Modal
    modalModal
  • Tooltip
    tooltipTooltip
  • Sidebar
    sidebarSidebar
  • List Item
    list-itemList Item
  • Button Primary
    button-primaryButton Primary
  • Button Secondary
    button-secondaryButton Secondary

In use

The system, in use

Panic'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.

FAQ

Panic design system FAQ

Common questions about Panic'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 Panic 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 Panic.

  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 Panic'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

Panic’s visual language is built around restraint and hierarchy. Hairline-as-elevation.

Unlike many tech sites that splash multiple brand colors across the page, Panic isolates a single electric blue for calls‑to‑action and lets a spectrum of grays handle the rest. This approach forces designers to think about scale and spacing before hue, creating a layout that feels purposeful rather than decorative.

Key Characteristics:

  • Electric blue accent limited to primary actions, creating a clear visual hierarchy.
  • Booton typeface dominates headings, ranging from 80 px display to 15 px labels.
  • Gray text hierarchy ink, muted, darkgray provides depth without extra colors.
  • Pure white borders act as subtle elevation cues on inputs and cards.
  • Near‑black canvas nearblack anchors the hero section, echoing Playdate’s hardware aesthetic.
  • Rounded corners are modest (4 px) except for fully rounded badges, keeping the UI sharp.
  • Spacing tokens are consistent, with a base 10 px unit guiding padding and margins.
  • Components reference tokens directly, ensuring any new element inherits the same visual language.
  • The system includes fifteen core components, from headings to modals, all tied to the token set.
  • Typography line heights are deliberately tight, reinforcing the developer‑focused tone.

Known Gaps

  • The token set lacks explicit definitions for hover or focus states, meaning designers must infer interaction styles or add them manually.
  • No dedicated color token for success or warning messages, which could limit feedback UI without extending the palette.
  • The spacing list contains several complex values that are not represented as atomic tokens, reducing reuse in layout utilities.
  • Input components reference a hard‑coded Arial font, breaking the otherwise consistent Booton typographic system.
  • The design does not provide a dark‑mode variant; all background and text colors assume a light‑or‑near‑black canvas.
  • Rounded values stop at 22.5 px, offering limited options for more pronounced curvature in modern UI patterns.

Design & Creative Tools

More systems like this

More DESIGN.md files in Design & Creative Tools.

All 27 in Design & Creative Tools

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