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

design-coinbase

Applies Coinbase's design system tokens, typography, and component styles to UI generation.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Coinbase's visual identity requires exact design tokens — colors, typography scales, button radii, and spacing — that are tedious to reverse-engineer from the live site. This Skill provides the complete Coinbase design system so generated UI matches the brand without manual inspection. ## Core Features & Use Cases - Exact Design Tokens: Coinbase Blue (#0052ff), near-black (#0a0b0d), cool gray surfaces (#eef0f3), and hover states (#578bfa) with defined roles. - Typography & Component Specs: Four-font hierarchy (CoinbaseDisplay, CoinbaseSans, CoinbaseText, CoinbaseIcons), 56px pill buttons, card styles, form states, spacing and radius scales. - Light & Dark Previews: Bundled preview.html and preview-dark.html files show the full system rendered for visual verification. - Use Case: Ask for a crypto dashboard landing page styled like Coinbase, and the generated UI uses the correct blue accent, pill CTAs, tight 1.00 line-height hero headings, and alternating dark/light sections. ## Quick Start Create a landing page for a crypto portfolio app using the Coinbase design system with a hero section and pill-shaped signup button.

Frequently Asked Questions about design-coinbase

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

FAQPage Schema
How do I make a UI look like Coinbase's website?▼

Apply Coinbase's design tokens: Coinbase Blue (#0052ff) as the single brand accent, white and near-black (#0a0b0d) surfaces, and 56px radius pill buttons. Use CoinbaseDisplay for hero headlines at 1.00 line-height and CoinbaseSans for UI text.

What colors does the Coinbase design system use?▼

The palette centers on Coinbase Blue (#0052ff) for primary actions, hover blue (#578bfa), near-black (#0a0b0d) for text and dark sections, cool gray (#eef0f3) for secondary surfaces, and dark card (#282b31). Blue is functional, not decorative.

Does this design system support dark mode?▼

Yes, the Skill includes a preview-dark.html file showing the full system in dark theme. Dark mode inverts surfaces to near-black backgrounds with light text while keeping Coinbase Blue as the accent color.

What fonts does Coinbase use in its design system?▼

Coinbase uses a four-font proprietary family: CoinbaseDisplay for hero headlines, CoinbaseSans for UI elements and buttons, CoinbaseText for body reading, and CoinbaseIcons for iconography. The preview files substitute Inter as a fallback.

What border radius should Coinbase-style buttons use?▼

Primary CTA buttons use a 56px radius for the signature pill shape, with a full 100000px radius variant for maximum pill. Cards and containers range from 8px to 40px depending on size.

Related Skills

Explore More Design & Creative Skills→
code-vibe-academycode-vibe-academy
2

architecte-contenu

Structures website information with sitemaps, content strategy documents, and Markdown wireframes.

Official
Advanced
ingbyringbyr
2

frontend-design

Convert high-level frontend requirements into production-grade React, Vue, or HTML/CSS interfaces.

Community
Advanced
Javeria-JavaidJaveria-Javaid

ui-visual-validator

Validates UI modifications through visual evidence, design system compliance, and accessibility checks.

Community
Intermediate
ArnavPuriArnavPuri
3

design-context

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

Community
Intermediate