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

design-miro

Apply Miro's design system tokens, typography, and components when generating UI.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating Miro's visual identity in UI work requires manually extracting exact colors, fonts, spacing, and component styles from miro.com, which is slow and error-prone. ## Core Features & Use Cases - Complete Design Tokens: Provides Miro's exact color palette (Blue 450 #5b76fe, pastel accents, neutrals), typography scale (Roobert PRO Medium, Noto Sans), spacing, radius, and shadow values. - Component Specifications: Defines button, card, and form input styles with states (default, focus, error) matching Miro's patterns. - Light and Dark Previews: Bundled preview.html and preview-dark.html files show the full design system rendered for visual verification. - Use Case: When asked to build a landing page or dashboard styled like Miro, the skill supplies every hex value, font size, and border radius needed for an accurate result. ## Quick Start Build a landing page hero section styled like Miro with its pastel color palette and Roobert PRO typography.

Frequently Asked Questions about design-miro

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

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

Use Miro's design tokens: white background with near-black text (#1c1c1e), Blue 450 (#5b76fe) for interactive elements, Roobert PRO Medium for headings, and Noto Sans for body text. Apply pastel accent cards and 1px ring shadows instead of heavy elevation.

What colors does the Miro design system use?▼

Miro uses near-black #1c1c1e for text, white surfaces, Blue 450 #5b76fe as the primary interactive color, and success green #00b473. Pastel accents include coral #ffc6c6, rose #ffd8f4, teal #c3faf5, and orange #ffe6cd, each with dark pairs.

What fonts does Miro use on its website?▼

Miro uses Roobert PRO Medium for display text with OpenType character variants and negative letter-spacing (-1.68px at 56px), and Noto Sans for body copy. The bundled previews fall back to Inter and Noto Sans from Google Fonts.

Does this design system support dark mode?▼

Yes, the skill includes a preview-dark.html file that inverts the palette, using #1c1c1e as the background and #f0f0f2 as text while keeping Blue 450 and the pastel accents. It demonstrates dark-adapted borders, rings, and form states.

What are the limitations of a design token skill for UI generation?▼

The skill provides static design tokens and reference previews, not executable components or licensed font files. Roobert PRO is a commercial font, so generated output typically substitutes fallbacks like Inter unless you have a license.

Related Skills

Explore More Design & Creative Skills→
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
TekLabsVNTekLabsVN
1

ui-design

Generate HTML and React previews for UI components using Tailwind, MagicUI, Shadcn, and Phosphor icons.

Official
Advanced
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic
ArnavPuriArnavPuri
3

design-context

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

Community
Intermediate