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

design-revolut

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating a specific brand's visual identity in UI work requires hunting down exact colors, fonts, spacing, and component rules. This Skill provides Revolut's complete design system as ready-to-use tokens and guidelines so generated interfaces match Revolut's look without manual research. ## Core Features & Use Cases - Complete Design Tokens: Exact color palette (near-black #191c1f, brand blue #494fdf, semantic danger/warning/teal), typography scale (Aeonik Pro display at 136px weight 500, Inter body), spacing, and radius values. - Component Specifications: Pill buttons (9999px radius, 14px 32px padding) in primary, secondary, outlined, and ghost variants, plus cards, forms, and navigation patterns. - Visual Reference Previews: Bundled light and dark theme HTML previews showing the full system implemented, useful for verifying exact CSS values. - Use Case: When asked to build a fintech landing page styled like Revolut, generate a hero with a 136px Aeonik Pro headline, dark pill CTA, and flat zero-shadow layout directly from the documented tokens. ## Quick Start Build a landing page hero section styled like Revolut with a large headline and pill-shaped call-to-action buttons.

Frequently Asked Questions about design-revolut

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

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

Use Revolut's design tokens: near-black #191c1f with white surfaces, Aeonik Pro at weight 500 for headings, Inter for body text, and pill-shaped buttons with 9999px radius and 14px 32px padding. Avoid shadows entirely since Revolut's design is flat.

What fonts does the Revolut design system use?▼

Revolut uses Aeonik Pro, a geometric grotesque, for all display headings at weight 500 with tight negative letter-spacing down to -2.72px. Body and UI text uses Inter at 16px with positive letter-spacing of 0.16px to 0.24px.

What colors are in Revolut's brand palette?▼

The core palette is near-black #191c1f, white #ffffff, and light gray #f4f4f4 for surfaces. Semantic colors include blue #494fdf, danger red #e23b4a, teal #00a87e, warning orange #ec7e00, and deep pink #e61e49, reserved mainly for product interfaces.

Does this design system support dark mode?▼

Yes, the Skill includes both a light theme preview (preview.html) and a dark theme preview (preview-dark.html). The dark preview inverts the surface and text tokens while keeping the same semantic colors, typography, and component structure.

Should I use shadows or bold headings in a Revolut-style UI?▼

No. Revolut uses zero shadows, relying on dark and light section contrast for depth. Headings use Aeonik Pro at weight 500 only, never bold, with authority created through large sizes and tight tracking instead.

Related Skills

Explore More Design & Creative Skills→
deadhearth01deadhearth01

frontend-design

Generate production-grade frontend interfaces with structured frontmatter-driven design processes.

Community
Advanced
viably-labsviably-labs

google-design-md

Lint DESIGN.md and export design tokens to CSS variables or framework formats.

Official
Intermediate
SwimmingLiuSwimmingLiu
1

audit

Audit UI quality across accessibility, performance, theming, and responsive design.

Community
Advanced
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced