design-mistral.ai

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

Updated Feb 23, 2026
One-click install
npx skills add https://github.com/deepparser/skills --skill design-mistral-ai-deepparser
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-mistral.ai
Source: https://github.com/deepparser/skills/tree/main/design-mistral.ai
Command: npx skills add https://github.com/deepparser/skills --skill design-mistral-ai-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Mistral AI's visual identity requires exact knowledge of its warm golden color palette, typography scale, shadow system, and layout rules, which are otherwise scattered and hard to reproduce consistently. ## Core Features & Use Cases - Complete Design Token Reference: Provides exact color values (Mistral Orange #fa520f, Sunshine spectrum, Warm Ivory), typography specs (82px display at weight 400 with -2.05px tracking), spacing scale, and the signature five-layer golden shadow system. - Component Styling Rules: Defines buttons, cards, navigation, forms, and the Mistral block gradient identity with sharp zero-radius geometry. - Light and Dark Previews: Bundled HTML preview files show the full design system implemented in both themes for visual verification. - Use Case: When asked to build a landing page styled like Mistral AI, the Skill supplies every token needed to produce a hero section with massive tight-tracked headlines, cream surfaces, and warm amber shadows. ## Quick Start Ask the AI to create a landing page hero section using the Mistral AI design system with its warm golden palette and sharp corners.

Frequently Asked Questions about design-mistral.ai

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

FAQPage Schema
How do I build a UI that looks like Mistral AI's website?

Use the design tokens from this Skill: Warm Ivory (#fffaeb) backgrounds, Mistral Orange (#fa520f) accents, 82px weight-400 headlines with -2.05px letter-spacing, sharp corners, and warm amber shadows. The bundled HTML previews show full implementations.

What colors does the Mistral AI design system use?

The palette is exclusively warm: Mistral Orange (#fa520f), a sunshine spectrum from Bright Yellow (#ffd900) to Sunshine 900 (#ff8a00), Warm Ivory (#fffaeb) and Cream (#fff0c2) surfaces, plus Mistral Black (#1f1f1f) for text and dark sections.

Does the Mistral AI design system support dark mode?

Yes, the Skill includes a dark theme preview (preview-dark.html) using Mistral Black (#1f1f1f) as the page background with white text and warm golden accents. The golden shadow system is adapted with higher opacity for dark surfaces.

What fonts and weights does Mistral AI use in its design?

The system uses a custom font with Arial as fallback at weight 400 exclusively. Hierarchy comes from size (82px down to 14px) rather than weight variation, with uppercase transforms for buttons and section labels.

When should I avoid using the Mistral AI design style?

Avoid it when a project requires cool color palettes, rounded friendly components, or multi-weight typography systems. The style mandates warm-only colors, near-zero border-radius, and single-weight type, which conflicts with those requirements.