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

design-ferrari

Apply Ferrari's design system tokens to generate brand-accurate UI interfaces.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Ferrari's visual identity requires precise knowledge of its colors, typography, spacing, and component rules, which are otherwise scattered and hard to reproduce consistently. ## Core Features & Use Cases - Complete Design Token Reference: Provides exact hex values, typography scales, spacing units, border-radius rules, and elevation treatments from Ferrari's design system. - Component Styling Guidance: Documents buttons, cards, forms, navigation, carousels, and image treatments with light and dark theme HTML previews for visual verification. - Use Case: When asked to build a landing page styled like Ferrari, the agent applies the chiaroscuro black/white editorial layout, Ferrari Red (#DA291C) CTAs, 2px border-radius, and uppercase Body-Font labels to produce an on-brand interface. ## Quick Start Use the design-ferrari skill to create a hero section and subscribe form styled like Ferrari's website.

Frequently Asked Questions about design-ferrari

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

FAQPage Schema
How do I build a UI that looks like Ferrari's website?▼

Invoke this skill when generating interfaces and it applies Ferrari's design tokens: Absolute Black and Pure White alternating sections, Ferrari Red (#DA291C) reserved for primary CTAs, FerrariSans typography at weights 400-700, and 2px border-radius on interactive elements.

What colors are in the Ferrari design system?▼

The palette centers on Ferrari Red (#DA291C), Absolute Black (#000000), Pure White (#FFFFFF), and a gray scale from #303030 to #D2D2D2. Heritage accents include Racing Yellow (#FFF200) and Modena Yellow (#F6E500), plus semantic colors for warning, success, and info states.

Does this skill include dark mode support?▼

Yes, the skill bundles two HTML preview files: preview.html for the light theme and preview-dark.html for the dark theme. Both demonstrate the full token catalog including colors, typography, buttons, cards, forms, spacing, and elevation.

When should Ferrari Red be used in the interface?▼

Ferrari Red (#DA291C) should appear sparingly, reserved for primary CTAs like Subscribe buttons and critical brand moments. The guidelines specify using it for only one element per screen to preserve its visual authority.

What typography rules does the Ferrari design system use?▼

The system uses FerrariSans for headings, buttons, and body content at weights 400-700 with sizes from 11px to 26px, plus a secondary Body-Font rendered in uppercase with 1px letter-spacing for labels and category tags.

Related Skills

Explore More Design & Creative Skills→
juanjaragavijuanjaragavi

brand-identity

Enforce consistent brand identity across UI, copy, and imagery.

Community
Advanced
theBulishMantheBulishMan

frontend-design

Generate production-grade frontend interfaces with typography, color systems, and accessibility.

Community
Advanced
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