**Paste this prompt into a new Lovable project to replicate the exact visual design system.**
Sign in to like and favorite skills
Paste this prompt into a new Lovable project to replicate the exact visual design system.
Apply this exact visual design system to the project. This is a child-friendly educational app aesthetic with warm, inviting colors and playful interactions.
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');| Token | HSL Value | Description |
|---|---|---|
| | Friendly teal - main brand |
| | White text on primary |
| | Coral for CTAs |
| | White text on accent |
| | Green for positive feedback |
| | White text on success |
| | Amber for cautions |
| | Dark text on warning |
| | Red for errors/danger |
| | White text on destructive |
| Token | HSL Value | Description |
|---|---|---|
| | Warm off-white |
| | Dark slate text |
| | Pure white cards |
| | Dark text on cards |
| | Warm muted backgrounds |
| | Subdued text |
| | Soft sage |
| | Teal text on secondary |
| | Light borders |
| | Input borders |
| | Focus ring (teal) |
| Year | HSL Value | Color |
|---|---|---|
| Foundation | | Purple |
| Year 1 | | Pink |
| Year 2 | | Orange |
| Year 3 | | Yellow |
| Year 4 | | Green |
| Year 5 | | Blue |
| Year 6 | | Indigo |
| Topic | HSL Value |
|---|---|
| Number | |
| Algebra | |
| Measurement | |
| Geometry | |
| Statistics | |
--gradient-hero: linear-gradient(135deg, hsl(174 58% 45%) 0%, hsl(200 70% 50%) 100%); --gradient-accent: linear-gradient(135deg, hsl(16 85% 60%) 0%, hsl(340 75% 55%) 100%); --gradient-success: linear-gradient(135deg, hsl(145 60% 45%) 0%, hsl(174 58% 45%) 100%);
--shadow-soft: 0 4px 20px -4px hsl(220 25% 20% / 0.1); --shadow-medium: 0 8px 30px -8px hsl(220 25% 20% / 0.15); --shadow-card: 0 2px 12px -2px hsl(220 25% 20% / 0.08); --shadow-hover: 0 12px 40px -12px hsl(220 25% 20% / 0.2);
--radius: 0.75rem;
Friendly, rounded corners throughout the UI.
Add these to
tailwind.config.tskeyframes: { "float": { "0%, 100%": { transform: "translateY(0px)" }, "50%": { transform: "translateY(-10px)" }, }, "bounce-gentle": { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-5px)" }, }, "pulse-soft": { "0%, 100%": { opacity: "1" }, "50%": { opacity: "0.7" }, }, "wiggle": { "0%, 100%": { transform: "rotate(-3deg)" }, "50%": { transform: "rotate(3deg)" }, }, }, animation: { "float": "float 3s ease-in-out infinite", "bounce-gentle": "bounce-gentle 2s ease-in-out infinite", "pulse-soft": "pulse-soft 2s ease-in-out infinite", "wiggle": "wiggle 0.5s ease-in-out", },
The design system includes full dark mode support:
| Token | HSL Value (Dark) |
|---|---|
| |
| |
| |
| |
| |
| |
| |
| |
The design system includes these utility classes:
.gradient-hero { background: var(--gradient-hero); } .gradient-accent { background: var(--gradient-accent); } .gradient-success { background: var(--gradient-success); } .shadow-soft { box-shadow: var(--shadow-soft); } .shadow-medium { box-shadow: var(--shadow-medium); } .shadow-card { box-shadow: var(--shadow-card); } .shadow-hover { box-shadow: var(--shadow-hover); } .year-foundation { background-color: hsl(var(--year-foundation)); } .year-1 { background-color: hsl(var(--year-1)); } .year-2 { background-color: hsl(var(--year-2)); } .year-3 { background-color: hsl(var(--year-3)); } .year-4 { background-color: hsl(var(--year-4)); } .year-5 { background-color: hsl(var(--year-5)); } .year-6 { background-color: hsl(var(--year-6)); }