Design System inspired by Tailwind CSS
CSS framework. Sky blue brand, dark docs, utility-first aesthetic.
npx getdesign@latest add tailwindRun this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.
CSS framework. Sky blue brand, dark docs, utility-first aesthetic.
DESIGN SYSTEM INSPIRATION OF TAILWIND CSS
CSS framework. Sky blue brand, dark docs, utility-first aesthetic.
Color Palette
CSS framework. Sky blue brand, dark docs, utility-first aesthetic.
Typography
A type system inspired by Tailwind CSS.
Cards
Card patterns inspired by Tailwind CSS.
Components
Other component primitives mapped from the Tailwind CSS spec.
Design System Inspired by Tailwind CSS
1. Visual Theme & Atmosphere
CSS framework. Sky blue brand, dark docs, utility-first aesthetic.
Key Characteristics:
- Sky blue (#38BDF8) as primary brand color
- Dark slate documentation theme
- Utility-first code-forward aesthetic
- Gradient hero backgrounds
- Color palette showcase as key visual
2. Color Palette & Roles
Primary
- Sky (
#38BDF8): Brand color - Blue (
#0EA5E9): Brand color - Dark BG (
#0F172A): Brand color - Surface (
#1E293B): Brand color - Slate (
#94A3B8): Brand color - White (
#F8FAFC): Brand color - Indigo (
#818CF8): Brand color - Emerald (
#34D399): Brand color
3. Typography Rules
Font Family
- Display & UI:
Inter,Fira Code
Hierarchy
| Role | Size | Weight | Line Height |
|---|---|---|---|
| Display | 64px | 700 | 1.1 |
| H1 | 48px | 700 | 1.2 |
| H2 | 32px | 600 | 1.3 |
| Body | 16px | 400 | 1.6 |
| Small | 14px | 400 | 1.5 |
| Code | 14px | 400 | 1.6 |
4. Component Stylings
Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.
5. Layout Principles
- Base unit: 4-8px
- Max container: 1100-1200px
- Consistent section spacing: 80-120px vertical
6. Depth & Elevation
Depth communicated through background color shifts, subtle shadows, or border treatments.
7. Do's and Don'ts
Do
- Follow the established color palette strictly
- Maintain typographic hierarchy
- Use brand-consistent border-radius
Don't
- Introduce off-brand colors
- Use inconsistent spacing
- Override the established visual language
8. Responsive Behavior
| Breakpoint | Width |
|---|---|
| Mobile | <640px |
| Tablet | 640-1024px |
| Desktop | >1024px |
9. Agent Prompt Guide
Quick Color Reference
- Sky:
#38BDF8 - Blue:
#0EA5E9 - Dark BG:
#0F172A - Surface:
#1E293B - Slate:
#94A3B8 - White:
#F8FAFC
Typography
- Font:
Inter,Fira Code