design-revolut
Revolut Design System Skill
When the user invokes this skill, apply the following design system to all UI generation. Use these exact design tokens, color values, typography specs, component styles, and layout principles to produce interfaces that match Revolut's visual identity.
Reference Previews
For a visual reference of how this design system looks when implemented, see the bundled HTML previews:
- Light theme: preview.html
- Dark theme: preview-dark.html
Read these files when you need to verify exact visual implementation details, CSS values, or component structure.
1. Visual Theme & Atmosphere
Revolut's website is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.
The color system is built on a comprehensive --rui-* (Revolut UI) token architecture with semantic naming for every state: danger (#e23b4a), warning (#ec7e00), teal (#00a87e), blue (#494fdf), deep-pink (#e61e49), and more. But the marketing surface itself is remarkably restrained — near-black (#191c1f) and pure white (#ffffff) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.
More from deepparser/skills
exa.ai-websearch-api
A skill that equips you with real-time, source-grounded web search and content retrieval using the Exa API—optimized for balanced relevance and speed (type="auto") and full-text extraction for downstream reasoning, RAG, and code assistance. Powering agents with fast, high-quality web search by Exa.AI.
14oas-api-spec-generator
Generate OpenAPI 3.2.0 specifications for third-party APIs (OpenAI, Anthropic, Google, Microsoft, Stripe, GitHub, Slack, AWS, and more)
8eks-cluster
Create and manage Amazon EKS clusters, managed node groups, and EC2 instances. Use when: (1) Provisioning a new EKS cluster from scratch, (2) Adding or modifying managed node groups, (3) Choosing EC2 instance types for workloads, (4) Installing EKS addons (CoreDNS, kube-proxy, VPC CNI, EBS CSI, Pod Identity Agent), (5) Setting up VPC networking for EKS, (6) Configuring cluster autoscaling with Karpenter or Cluster Autoscaler, (7) Deploying services to EKS, (8) Troubleshooting EKS node or cluster issues. Requires: aws CLI v2, eksctl, kubectl.
6aws-s3-eks
Create and manage Amazon S3 buckets with EKS Pod Identity authentication. Use when: (1) Creating S3 buckets for any service running on EKS, (2) Setting up EKS Pod Identity so pods can access S3 without static credentials, (3) Configuring IAM roles/policies for S3 access, (4) Connecting Kubernetes services to S3 storage on EKS, (5) Troubleshooting S3 access from Kubernetes pods. Requires: aws CLI v2, kubectl, eksctl.
5design-apple
Apply Apple's design system (colors, typography, components, layout, shadows) when building UI. Use when the user wants to create interfaces styled like Apple.
3azure-bot
Create and manage Azure Bot resources using the Azure CLI. Covers the full lifecycle: identity creation, bot registration, channel configuration (Teams, Slack, Telegram, Direct Line, and more), and deployment to Azure App Service. ESPECIALLY for OpenClaw agents.
3