Context, aesthetic ambition. Identity, art direction, references.
Product Type
Purpose then precise type
From most general to most specific. Guides the architecture and complexity of the design system.
Design system
Showcase
E-commerce
SaaS Tool
Community
Mobile app
Other
Choose a purpose →
ⓘ Design system — A design system is a set of reusable visual rules: tokens, components, guidelines. Unlike a website, the goal is not a specific page but a common visual grammar applicable to any future project. → This prompt is generic and compatible with any AI tool.
Main Information
Project name
Short description
Industry
Expertise & Universe
Your craft, your medium, your cultural references. The creative team adapts its expertise to your universe.
Main site language
Audience & Feel
Target audience
Target feelings
What the user should feel when using the product.
Dominant Style
Main aesthetic
Minimalist
Luxury & Premium
Brutalist
Tech & Futurist
Organic & Nature
Editorial & Magazine
Retro & Vintage
Playful & Fun
Corporate & Pro
Dark & Shadow
Art Deco
Streetwear & Urban
Cottagecore
Techno-organic
Maximalist
Psychedelic
Note Project & Vibe
Visual Identity
Colors, typography, image treatment. The visual DNA of the project.
Color Mood
Dominant temperature
Cool
Warm
Neutral
High contrast
Pastels
Saturated
Background mode
Light
White background, light interface
Dark
Dark background, black interface
Dual
Light + dark managed
Main Palette
Harmony
Monochrome
Complementary
Triadic
Tetradic
Analogous
Split-comp.
AI decides
Manual
Clicking a harmony generates immediately. The button regenerates without affecting locked colors.
Semantic Colors
Success
Warning
Error
Info
Color Accessibility
Minimum contrast
AA (4.5:1)
AA Large (3:1)
AAA (7:1)
Color blindness protection
Deuteranopie
Protanopie
Tritanopie
Achromatopsie
Typographic Personality
Overall character
Serious
Expressive
Airy
Impactful
Refined
Technical
Warm
Playful
Authoritative
Poetic
Title / body contrast
Single family
Weight variation
Serif + sans
Display + mono
Display + script
Title font (H1–H3)
Describe your title font
Beginner: express an intention. Advanced: name a font directly. The final AI will interpret.
📝 Remember to specify weight (bold, thin...), style (italic, uppercase...) and desired size. These details guide the AI toward a more accurate result.
Font library
All
Serif
Slab
Sans
Display
Mono
Script
↓ SCROLL
DSPrompt — TEST
Weight
100 Thin
200 ExtraLight
300 Light
400 Regular
500 Medium
600 SemiBold
700 Bold
800 ExtraBold
900 Black
Style & Transform
Normal
Italic
Oblique
None
UPPERCASE
lowercase
Capitalize
Title letter-spacing
Letter-spacing
Body text font
Describe your body font
Beginner: express a feeling. Advanced: name a font directly. The AI completes.
📝 Remember to specify weight (bold, thin...), style (italic, uppercase...) and desired size. These details guide the AI toward a more accurate result.
Select from library
All
Sans
Serif
Mono
↓ SCROLL
DSPrompt — TEST
Weight
300 Light
400 Regular
500 Medium
600 SemiBold
Style
Normal
Italic
Size & Line height
Base size
Line height
Letter-spacing
Typographic Scale
Level sizes
H1
H2
H3
H4
Caption
Rendering & Loading
Font-display
swap
block
fallback
optional
Fallback font
Custom Fonts
Custom title font
Note: Custom fonts are embedded in the prompt. Rendering depends on the generative tool library used.
Custom body font
Note: Custom fonts are embedded in the prompt. Rendering depends on the generative tool library used.
Note Visual Identity
Interface & Components
Surfaces, layout, reusable components. The physics and building blocks of the interface.
Shape Philosophy
Global rounding
Sharp
Zero rounding, sharp shapes
Subtle
Light rounding 2–6px
Rounded
Marked rounding 8–16px
Pill
Very rounded, pill shapes
Base border-radius
Sharp → Pill
0px
Base
0px
×0.65
0px
×0.35
Coherence
Uniform
Hierarchical
Mixed
CTA
Card
Tag
Uniform
Shadows & Elevation
Shadow levels (combinables)
Combined preview
None
Very light
Soft
Strong
Hard brutalist
Colored
Elevation levels
2 levels
4 levels Material
Token system
No elevation
Glassmorphism blur
Glassmorphism preview
Blur
Borders & Dividers
Border thickness
Preview
Thickness
Border style
Solid
Dashed
Dotted
Double
None
Dividers
1px line
2px line
Dotted
Space only
None
Container queries
Media queries
Container queries
Both
Button Style
Main style
ACTION
Filled
Colored background
ACTION
Outlined
Colored border
action
Ghost
Text only
Sizes
XS
SM
MD
LG
XL
Shape
Sharp 0px
Subtle 4px
Rounded 8px
Pill full
Preview
⚠️ Your global shapes are set to — your button uses a different shape. That's your choice : the AI will account for it.
Variants
Primary
Secondary
Destructive
Link
Icon only
Icon + label
Navigation
Patterns 2 max
Fixed header
Transparent header
Left sidebar
Mobile bottom nav
Mega menu
Hamburger
Breadcrumbs
Tabs
Pagination
Steps wizard
Context menu
Content Components
Display
Cards
Carousel
Accordion
Timeline
Table
Hero
Pricing
FAQ
Testimonials
Gallery
Video player
Charts
Kanban
Map
Forms
Input style
Full border box
Bottom line underline
Floating label
Filled colored background
Size
SM
MD
LG
Field types
Input text
Textarea
Select
Checkbox
Radio
Toggle
Slider
Date picker
Upload
Search autocomplete
Color picker
Rich text
Tags input
States & Feedback
States
Default
Hover
Focus
Active
Disabled
Loading
Error
Success
Read-only
Required
Feedback
Toast
Alert inline
Progress bar
Badge
Tooltip
Empty state
Modal
Drawer
Command palette
Context menu
Popover
Iconography
Icon system 2 max
Lucide
Heroicons
Phosphor
Material Symbols
Feather
Tabler
Radix Icons
Custom SVG
Style
Outline
Filled
Duotone
Bold
Thin
Base size
Size
Reference UI Library
Base 2 max
shadcn/ui
Radix UI
MUI
Ant Design
Chakra UI
Headless UI
Ark UI
Park UI
Custom from scratch
+ Others
Note Interface & Components
Motion
Motion brings the interface to life. From subtle to dramatic.
Motion Philosophy
Overall approach
Static
No animation, pure interface
Subtle
Only if functional
Expressive
Motion = brand identity
Reduced-motion policy
Respects prefers-reduced-motion
Disable all
Always animated
Motion Type & Speed
Character
Defines the personality of each animation.
🌞 Spring Natural bounce
💥 Elastic Overshoots & returns
🍳 Jelly Soft, fun
🌿 Smooth Fluid, organic
🌀 Floating Light, suspended
🎬 Cinematic Filmed, expressive
⚡ Snappy Sharp, direct
⚙ Clockwork Mechanical, precise
🧻 Magnetic Attraction, adhoc
Speed
Very slow
Slow
Standard
Fast
Very fast
Micro duration
Page duration
Tension
Friction
Micro-interactions
Types
Hover effects
Click press feedback
Animated loading
Form validation
Scroll reveal
Scroll-driven CSS
Custom cursor
Parallax
Magnetic hover
Text scramble
Element entrance
Fade in
Slide up
Scale in
Staggered
Blur in
None
Skeleton loading
Pulse
Shimmer
Solid
None
Page Transitions
Type
Fade
Slide
Scale
Shared element
None
Library
Animation tool
Native CSS
Framer Motion
GSAP
Motion One
Lottie
Three.js
React Spring
AutoAnimate
Note Motion
Project Rules
Tone, prohibitions, brand, priorities. The inviolable dogmas.
Define your pages and their content. This section generates a precise production brief — the final AI will deliver exactly the configured pages.
How it works: Click a page to open it, then check the sections it should contain. The AI will produce exactly what you configure — no more, no less. Ignore pages you do not need. Drag pages to set their order.
+ Click to include without detail
✓ Page included in the prompt
⠿ Drag to reorder
Custom page
Page specific to your activity — will be added to the list below.