Mr. Pops
light theme
Independent Style Review

Mr. Pops-Style Design System

The Mr. Pops design system uses a light-themed visual language. The primary brand color is Candy Apple (#b00e2f); text is Licorice (#000000) on a Snow (#ffffff) background. Typography is set in Cervo and HelveticaNeueCyr. This DESIGN.md contains 4 color tokens and a 7-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of Mr. Pops.

Color Palette

FONTS

Typography

Component Previews

Independent Style Review

Mr. Pops-style design system: color codes and fonts

Theme
light
Primary color
Candy Apple (#b00e2f)
Fonts
Cervo, HelveticaNeueCyr
Source
mrpops.ua

Playful Indulgence on a White Canvas

Mr. Pops projects a playful, premium, indulgent atmosphere through its high-contrast aesthetic. It pairs bold, whimsical typography with a dominant, vivid red accent, creating a sense of energetic fun. Surfaces are generally clean and light, ensuring the vibrant brand color truly pops. The design prioritizes visual impact and direct engagement rather than complex UI elements or subtle hierarchies.

Original style summary

Mr. Pops color codes

ColorHEXCSS tokenUsage
Snow#ffffff--color-snowPage backgrounds, card surfaces, ghost button text and borders, outline element strokes
Licorice#000000--color-licoricePrimary body text, headers, filled button text, outlined button borders
Candy Apple#b00e2f--color-candy-applePrimary action backgrounds, brand accents, prominent hero elements, active states — signals vibrancy and direct action
Nude Peach#fee5ca--color-nude-peachSecondary surface backgrounds, subtle hover states, ghost button backgrounds – a warm, light neutral

Which fonts does Mr. Pops use?

FontWeightsFallback
Cervo400, 500Georgia
HelveticaNeueCyr400Arial
RoleSizeLine heightToken
caption12px1.15--text-caption
body-sm15px1.2--text-body-sm
subheading18px1.4--text-subheading
heading-sm22px1--text-heading-sm
heading42px0.9--text-heading
heading-lg64px0.75--text-heading-lg
display144px0.75--text-display

How do I use this DESIGN.md?

  1. Download the DESIGN.md file and place it in your project root.
  2. Tell Claude Code, Cursor, v0 or Google Stitch: “Design the UI following the rules in DESIGN.md.”
  3. Use Fork & Customize to adapt the colors, fonts or components to your own brand.

Raw DESIGN.md file →

This page is MakeMyMD's independent review of the colors, typography and spacing visible on Mr. Pops's public website (mrpops.ua). It is not an official brand guideline; MakeMyMD is not affiliated with or endorsed by Mr. Pops. The Mr. Pops name and trademarks belong to their owner; no brand imagery, logos or copy are used. Rights holders can request removal at [email protected].

Design Systems

Similar design systems