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

design-renault

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Renault's visual identity requires precise knowledge of its proprietary design tokens — colors, typography, spacing, and component rules — which are otherwise scattered and hard to reproduce consistently. ## Core Features & Use Cases - Complete Design Token Reference: Provides Renault's full palette (Renault Yellow #EFDF00, Absolute Black, Renault Blue), NouvelR typography scale, spacing, border-radius, and seven-level elevation system. - Component Specifications: Defines zero-radius button variants (super-primary, primary, ghost, text link), PromoCards with gradient overlays, pill-shaped form inputs, and carousel patterns. - Light and Dark Previews: Bundled HTML preview files demonstrate the design system in both themes for visual verification. - Use Case: When asked to build a vehicle showcase landing page styled like Renault, the skill supplies exact hex values, type sizes, and layout rules so the generated UI matches the brand's chessboard light/dark rhythm and aurora hero gradients. ## Quick Start Use the design-renault skill to create a landing page for an electric vehicle with a hero section, promo cards, and a yellow configure button.

Frequently Asked Questions about design-renault

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

FAQPage Schema
How do I build a UI that matches Renault's brand design?▼

Invoke this skill when generating interfaces and it applies Renault's exact design tokens: Renault Yellow #EFDF00 for super-primary CTAs, NouvelR Bold typography, zero border-radius buttons, and alternating light/dark PromoCard sections.

What colors are in the Renault design system?▼

The core palette includes Renault Yellow (#EFDF00), Absolute Black (#000000), Pure White (#FFFFFF), Soft Yellow (#F8EB4C), Renault Blue (#1883FD) for link hovers, plus semantic colors for success, error, warning, and info states.

Does this skill include dark mode design guidance?▼

Yes, it bundles a preview-dark.html file showing the full design system on dark backgrounds, including inverted button variants, dark PromoCards, and adjusted form styling with transparent input backgrounds.

Can I use rounded buttons in a Renault-styled interface?▼

No, the design system mandates zero border-radius on all buttons as a core brand marker. Pill-shaped radius (46-50px) is reserved exclusively for search inputs and filter chips, never for action buttons.

What typography does the Renault design system use?▼

It uses NouvelR, a proprietary geometric sans-serif, as the single typeface for all text. Headings default to weight 700 with ultra-tight 0.95 line-height, scaling from 56px hero titles down to 8.5px legal micro text.

Related Skills

Explore More Design & Creative Skills→
euxxeuxx
4

frontend-layout

Design landing pages and app interfaces with deliberate composition and restrained motion.

Community
Advanced
scamaiscamai

frontend-design

Design and implement production-grade frontend interfaces with HTML, CSS, and JavaScript.

Official
Advanced
spencerpaulyspencerpauly
672

dark-mode-testing

Detect dark mode rendering defects by comparing light and dark browser states.

Community
Intermediate
JiaxingBIJiaxingBI

ckm:design

Create brand identities, design tokens, logos, and HTML presentations.

Community
Advanced