--- version: alpha name: "Panic" website: "https://panic.com" description: "Panic delivers native Mac apps, Playdate games, and a terminal emulator, all wrapped in a site that leans on an electric blue accent, Booton headlines that scale to eighty pixels, and a muted gray text palette that keeps the focus on code rather than decoration." seo: title: "Panic Design System for React — electric blue accent, Booton, 15 components" metaDescription: "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." highlights: - "Single electric accent — one electric blue hue appears only on primary calls‑to‑action, forcing every other element to stay in grayscale and preserving visual hierarchy." - "Booton dominance — all headings use the Booton family, from massive 80 px display text down to compact 15 px labels, giving the brand a consistent typographic voice." - "Gray‑scale depth — a hierarchy of muted grays ink, muted, darkgray provides contrast without introducing additional colors, echoing the monochrome aesthetic of the Playdate console." - "Border minimalism — the only border color is pure white, used sparingly for input outlines, which makes borders feel like subtle elevation rather than decorative frames." tags: - "Design & Creative Tools" lastUpdated: "2026-05-15" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://panic.com" title: "Panic — official site" description: "Panic's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "why-does-panic-use-a-single-electric-blu" title: "why does panic use a single electric blue accent?" answer: "Panic’s design team wanted the electric blue to act as a visual beacon for the most important interactions, such as primary calls‑to‑action. By limiting the accent to one hue, the brand avoids the visual clutter that can distract developers from the content. The blue also nods to the Playdate’s limited color palette, reinforcing the hardware connection while giving the site a memorable splash of color that stands out against the surrounding grayscale." - id: "is-booton-a-free-typeface-i-can-use-too" title: "is booton a free typeface i can use too?" answer: "Booton is the typeface that powers all of Panic’s headings, from the massive eighty‑pixel hero to the smaller fifteen‑pixel labels. It is bundled with the site’s assets and licensed for commercial use, so you can embed it in your own projects without additional fees. The family includes a range of weights that the design system references, making it easy to maintain typographic consistency across components." - id: "how-does-the-playdate-palette-influence" title: "how does the playdate palette influence the marketing site?" answer: "The Playdate handheld uses a limited, almost monochrome screen, and Panic mirrors that constraint on its website. The near‑black canvas and layered grays echo the console’s dark UI, while the single electric blue accent mimics the occasional splash of color the device can display. This visual restraint ties the brand’s software offerings back to its hardware roots, creating a cohesive experience that feels intentional rather than accidental." - id: "what-is-the-role-of-the-white-border-col" title: "what is the role of the white border color in inputs?" answer: "White appears only as a border color on form fields, giving them a subtle lift without overwhelming the surrounding gray text. Because the rest of the UI avoids bright colors, the white border becomes a quiet indicator of focus and interactivity. It functions as a form of elevation, letting users instantly recognize editable areas while keeping the overall aesthetic restrained." - id: "how-many-components-are-defined-in-the-p" title: "how many components are defined in the panic design system?" answer: "The specification lists fifteen core components, ranging from hero headings and secondary headings to body text blocks, navigation links, input fields, and a primary button placeholder. Each component references the token system for colors, typography, radii, and spacing, ensuring that any new UI element you add will automatically inherit the same visual language and hierarchy established by the existing set." colors: primary: "#0852ff" ink: "#444444" canvas: "#ebebeb" hairline: "#ffffff" muted: "#808080" darkgray: "#666666" lightgray: "#cccccc" red: "#ff0000" pink: "#ff034a" blue: "#1f95c1" teal: "#41bb9c" deepgray: "#202428" nearblack: "#000000" offwhite: "#dddddd" blippo-darkgray: "#312f28" herdling-red: "#a12e32" brand-alt: "#5371ab" typography: display-80: fontFamily: "Booton, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 80px fontWeight: 300 lineHeight: 104px letterSpacing: "-0.5px" heading-48: fontFamily: "Booton, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 48px fontWeight: 600 lineHeight: 48px letterSpacing: "-0.5px" heading-42: fontFamily: "Booton, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 42px fontWeight: 300 lineHeight: 45px letterSpacing: "-2.1px" heading-40: fontFamily: "Booton, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 40px fontWeight: 300 lineHeight: 52px letterSpacing: "-0.5px" body-15-bold: fontFamily: "Booton, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 15px fontWeight: 600 lineHeight: 20px letterSpacing: "-0.5px" body-15-regular: fontFamily: "Booton, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 15px fontWeight: 300 lineHeight: 20px letterSpacing: "-0.5px" body-16-regular: fontFamily: "Booton, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 20px letterSpacing: "-0.5px" body-16-compact: fontFamily: "Booton, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 16px letterSpacing: "-0.5px" mono-40: fontFamily: "space-mono, monospace" fontSize: 40px fontWeight: 400 lineHeight: 52px letterSpacing: "-0.5px" heading-24: fontFamily: "Booton, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 24px fontWeight: 300 lineHeight: 46px letterSpacing: "-0.5px" rounded: large: "22.5px" small: "4px" full: "9999px" none: "0px" spacing: spacing-10: "10px" spacing-3-75: "3.75px" spacing-40: "40px" spacing-30-72: "30.72px" spacing-16: "16px" spacing-0: "0px" spacing-5: "5px" components: primary-button: backgroundColor: "{colors.primary}" textColor: "{colors.hairline}" borderColor: "{colors.hairline}" fontFamily: "{typography.body-15-bold.fontFamily}" fontSize: "{typography.body-15-bold.fontSize}" fontWeight: "{typography.body-15-bold.fontWeight}" lineHeight: "{typography.body-15-bold.lineHeight}" letterSpacing: "{typography.body-15-bold.letterSpacing}" borderRadius: "{rounded.small}" padding: "{spacing.spacing-10}" height: "40px" hero-heading: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" fontFamily: "{typography.display-80.fontFamily}" fontSize: "{typography.display-80.fontSize}" fontWeight: "{typography.display-80.fontWeight}" lineHeight: "{typography.display-80.lineHeight}" letterSpacing: "{typography.display-80.letterSpacing}" borderRadius: "{rounded.none}" padding: "{spacing.spacing-0}" height: "100px" h2: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" fontFamily: "{typography.heading-42.fontFamily}" fontSize: "{typography.heading-42.fontSize}" fontWeight: "{typography.heading-42.fontWeight}" lineHeight: "{typography.heading-42.lineHeight}" letterSpacing: "{typography.heading-42.letterSpacing}" borderRadius: "{rounded.none}" padding: "{spacing.spacing-0}" height: "45px" body-text: textColor: "{colors.hairline}" borderColor: "{colors.hairline}" fontFamily: "{typography.mono-40.fontFamily}" fontSize: "{typography.mono-40.fontSize}" fontWeight: "{typography.mono-40.fontWeight}" lineHeight: "{typography.mono-40.lineHeight}" letterSpacing: "{typography.mono-40.letterSpacing}" borderRadius: "{rounded.none}" padding: "{spacing.spacing-0}" height: "156px" nav-link: textColor: "{colors.ink}" fontFamily: "{typography.heading-40.fontFamily}" fontSize: "{typography.heading-40.fontSize}" fontWeight: "{typography.heading-40.fontWeight}" lineHeight: "{typography.heading-40.lineHeight}" letterSpacing: "{typography.heading-40.letterSpacing}" borderRadius: "{rounded.none}" padding: "{spacing.spacing-0}" height: "198px" input: backgroundColor: "{colors.nearblack}" textColor: "{colors.lightgray}" borderColor: "{colors.hairline}" fontSize: "16px" fontWeight: "400" lineHeight: "16px" letterSpacing: "normal" borderRadius: "{rounded.small}" padding: "{spacing.spacing-5}" height: "30px" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" fontFamily: "{typography.body-15-regular.fontFamily}" fontSize: "{typography.body-15-regular.fontSize}" fontWeight: "{typography.body-15-regular.fontWeight}" lineHeight: "{typography.body-15-regular.lineHeight}" letterSpacing: "{typography.body-15-regular.letterSpacing}" borderRadius: "{rounded.large}" padding: "{spacing.spacing-10}" height: "auto" badge: backgroundColor: "{colors.primary}" textColor: "{colors.hairline}" fontFamily: "{typography.body-15-bold.fontFamily}" fontSize: "{typography.body-15-bold.fontSize}" fontWeight: "{typography.body-15-bold.fontWeight}" lineHeight: "{typography.body-15-bold.lineHeight}" letterSpacing: "{typography.body-15-bold.letterSpacing}" borderRadius: "{rounded.full}" padding: "{spacing.spacing-3-75}" height: "24px" footer: backgroundColor: "{colors.deepgray}" textColor: "{colors.hairline}" fontFamily: "{typography.body-15-regular.fontFamily}" fontSize: "{typography.body-15-regular.fontSize}" fontWeight: "{typography.body-15-regular.fontWeight}" lineHeight: "{typography.body-15-regular.lineHeight}" letterSpacing: "{typography.body-15-regular.letterSpacing}" borderRadius: "{rounded.none}" padding: "{spacing.spacing-10}" height: "auto" modal: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" fontFamily: "{typography.body-16-regular.fontFamily}" fontSize: "{typography.body-16-regular.fontSize}" fontWeight: "{typography.body-16-regular.fontWeight}" lineHeight: "{typography.body-16-regular.lineHeight}" letterSpacing: "{typography.body-16-regular.letterSpacing}" borderRadius: "{rounded.large}" padding: "{spacing.spacing-10}" height: "auto" tooltip: backgroundColor: "{colors.darkgray}" textColor: "{colors.hairline}" fontFamily: "{typography.body-15-regular.fontFamily}" fontSize: "{typography.body-15-regular.fontSize}" fontWeight: "{typography.body-15-regular.fontWeight}" lineHeight: "{typography.body-15-regular.lineHeight}" letterSpacing: "{typography.body-15-regular.letterSpacing}" borderRadius: "{rounded.small}" padding: "{spacing.spacing-3-75}" height: "auto" sidebar: backgroundColor: "{colors.nearblack}" textColor: "{colors.hairline}" fontFamily: "{typography.body-16-compact.fontFamily}" fontSize: "{typography.body-16-compact.fontSize}" fontWeight: "{typography.body-16-compact.fontWeight}" lineHeight: "{typography.body-16-compact.lineHeight}" letterSpacing: "{typography.body-16-compact.letterSpacing}" borderRadius: "{rounded.none}" padding: "{spacing.spacing-10}" height: "auto" list-item: textColor: "{colors.ink}" fontFamily: "{typography.body-15-regular.fontFamily}" fontSize: "{typography.body-15-regular.fontSize}" fontWeight: "{typography.body-15-regular.fontWeight}" lineHeight: "{typography.body-15-regular.lineHeight}" letterSpacing: "{typography.body-15-regular.letterSpacing}" borderRadius: "{rounded.none}" padding: "{spacing.spacing-3-75}" height: "auto" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.hairline}" fontFamily: "{typography.body-15-bold.fontFamily}" fontSize: "{typography.body-15-bold.fontSize}" fontWeight: "{typography.body-15-bold.fontWeight}" lineHeight: "{typography.body-15-bold.lineHeight}" letterSpacing: "{typography.body-15-bold.letterSpacing}" borderRadius: "{rounded.small}" padding: "{spacing.spacing-5}" height: "36px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" fontFamily: "{typography.body-15-regular.fontFamily}" fontSize: "{typography.body-15-regular.fontSize}" fontWeight: "{typography.body-15-regular.fontWeight}" lineHeight: "{typography.body-15-regular.lineHeight}" letterSpacing: "{typography.body-15-regular.letterSpacing}" borderRadius: "{rounded.small}" padding: "{spacing.spacing-5}" height: "36px" --- ## 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.