DESIGN.md — Plantilla Base Universal
Basado en el análisis de 10 sistemas de diseño de marcas líderes (Stripe, Apple, Nike, Spotify, Airbnb, Notion, Vercel, Linear, Figma).
Creado por CREA STUDIO S.A.S. · 2026
Instrucciones de Uso
- Copia esta plantilla
- Reemplaza
[MARCA]con el nombre de tu marca - Llena cada sección con las decisiones de diseño específicas
- Sé específico con valores reales (hex, px, ms) — nada de "más o menos"
- Este archivo lo leen agentes AI para generar interfaces consistentes
Design System de [MARCA]
1. Visual Theme & Atmosphere
Filosofía de diseño: [1-2 párrafos describiendo la personalidad visual de la marca. ¿Qué emoción transmite? ¿Qué principio guía cada decisión visual? ¿Qué la hace única?]
Atmósfera general: [Describe el "mood" — ¿es minimalista? ¿Vibrante? ¿Corporativo? ¿Juguetón? ¿Tecnológico? ¿Orgánico?]
Key Characteristics:
- [Característica visual 1]
- [Característica visual 2]
- [Característica visual 3]
- [Característica visual 4]
- [Característica visual 5]
2. Color Palette & Roles
Primary
| Color | Hex | Uso |
|---|---|---|
| [Nombre Color 1] | #[HEX] |
[Uso principal: fondos, CTAs, acentos] |
| [Nombre Color 2] | #[HEX] |
[Uso complementario] |
Surface & Background
| Color | Hex | Uso |
|---|---|---|
| Background Primary | #[HEX] |
Fondo principal |
| Background Secondary | #[HEX] |
Secciones alternas, cards |
| Background Dark | #[HEX] |
Footer, secciones oscuras |
| Surface Elevated | #[HEX] |
Cards, modales, dropdowns |
Text
| Color | Hex | Uso |
|---|---|---|
| Text Primary | #[HEX] |
Títulos, texto principal |
| Text Secondary | #[HEX] |
Descripciones, metadata |
| Text Disabled | #[HEX] |
Elementos inactivos |
| Text Inverse | #[HEX] |
Texto sobre fondos oscuros |
Semantic & Accent
| Color | Hex | Uso |
|---|---|---|
| Success | #[HEX] |
Confirmaciones, estados positivos |
| Warning | #[HEX] |
Alertas, atención |
| Error | #[HEX] |
Errores, estados críticos |
| Info/Link | #[HEX] |
Links, información |
| Accent | #[HEX] |
Destacados, highlights |
Gradient System (si aplica)
- Gradient Primary:
linear-gradient([dirección], [color1], [color2])— [Uso] - Gradient Accent:
linear-gradient([dirección], [color1], [color2])— [Uso]
3. Typography Rules
Font Family
Display: [Nombre fuente] — [Fallbacks]
- Uso: [Headlines grandes, hero sections]
Heading: [Nombre fuente] — [Fallbacks]
- Uso: [Títulos de sección]
Body: [Nombre fuente] — [Fallbacks]
- Uso: [Texto general]
Monospace: [Nombre fuente] — [Fallbacks]
- Uso: [Código, datos]
Type Scale
| Role | Size | Weight | Line Height | Letter Spacing | Uso |
|---|---|---|---|---|---|
| Display | [X]px | [W] | [X.X] | [X]px | Hero headlines |
| H1 | [X]px | [W] | [X.X] | — | Títulos principales |
| H2 | [X]px | [W] | [X.X] | — | Subtítulos |
| H3 | [X]px | [W] | [X.X] | — | Títulos de card |
| Body Large | [X]px | [W] | [X.X] | — | Introducciones |
| Body | [X]px | [W] | [X.X] | — | Texto general |
| Body Small | [X]px | [W] | [X.X] | — | Descripciones |
| Caption | [X]px | [W] | [X.X] | — | Metadata, timestamps |
| Button | [X]px | [W] | [X.X] | [X]px | Texto de botones |
| Overline | [X]px | [W] | [X.X] | [X]px | Etiquetas, categorías |
Principles
[1 párrafo describiendo la filosofía tipográfica. ¿Cómo se siente? ¿Qué comunica? ¿Jerarquía visual?]
4. Component Stylings
Buttons
Primary:
- Background:
[COLOR] - Text:
[COLOR], [X]px/[Weight] - Border radius: [X]px
- Padding: [X]px [X]px
- Hover: [Descripción del cambio]
- Active: [Descripción del cambio]
- Focus: [Ring style]
- Transition: [X]ms [easing]
Secondary:
- [Mismos campos adaptados]
Ghost/Text:
- [Mismos campos adaptados]
Disabled:
- [Mismos campos adaptados]
Cards & Containers
- Background:
[COLOR] - Border radius: [X]px
- Shadow: [Definición completa]
- Border: [Si aplica]
- Padding: [X]px
- Hover: [Efecto]
- Gap interno: [X]px
Inputs & Forms
- Background:
[COLOR] - Border: [X]px solid
[COLOR] - Border radius: [X]px
- Font: [X]px/[Weight]
- Placeholder color:
[COLOR] - Focus: [Border change + ring]
- Error: [Border color + mensaje]
- Height: [X]px
- Padding: [X]px [X]px
Navigation
- Background:
[COLOR], [sticky/fixed/static] - Height: [X]px
- Layout: [Descripción de estructura]
- Links: [X]px/[Weight],
[COLOR], hover[COLOR] - Mobile: [Comportamiento responsive]
- Logo size: [X]x[X]px
Tags & Badges
- Background:
[COLOR] - Text: [X]px/[Weight],
[COLOR] - Border radius: [X]px (pill)
- Padding: [X]px [X]px
Modal & Overlay
- Overlay:
rgba([R],[G],[B],[A]) - Container background:
[COLOR] - Border radius: [X]px
- Shadow: [Definición]
- Max width: [X]px
- Padding: [X]px
Image Treatment
- Border radius: [X]px
- Aspect ratios: [16:9 / 4:3 / 1:1]
- Placeholder: [Color o skeleton]
- Hover: [Efecto si aplica]
- Lazy loading: [Estrategia]
5. Layout Principles
Spacing System
Base unit: [X]px
| Token | Value | Uso |
|---|---|---|
| space-1 | [X]px | [Tight gaps, inline] |
| space-2 | [X]px | [Base spacing] |
| space-3 | [X]px | [Card padding] |
| space-4 | [X]px | [Standard padding] |
| space-5 | [X]px | [Section padding] |
| space-6 | [X]px | [Large section breaks] |
| space-7 | [X]px | [Hero padding] |
Grid & Container
- Max width: [X]px
- Columns: [X]
- Grid gap: [X]px
- Horizontal padding: [X]px desktop / [X]px tablet / [X]px mobile
- Breakpoints: [Definidos en sección 8]
Whitespace Philosophy
[1 párrafo describiendo la estrategia de espacio. ¿Generoso? ¿Compacto? ¿Qué comunica?]
Border Radius Scale
| Value | Contexto |
|---|---|
| 0px | [Elementos sin redondeo] |
| [X]px | [Inputs, elementos pequeños] |
| [X]px | [Cards, containers] |
| [X]px | [Botones, pills] |
| 50% | [Avatares, iconos circulares] |
6. Depth & Elevation
| Level | Treatment | Uso |
|---|---|---|
| Flat | Sin shadow | Estado default |
| Subtle | 0 1px 2px rgba(0,0,0,0.05) |
Cards en reposo |
| Raised | 0 4px 12px rgba(0,0,0,0.1) |
Hover, dropdowns |
| Elevated | 0 8px 30px rgba(0,0,0,0.15) |
Modales, popovers |
| Focus | 0 0 0 2px [COLOR] |
Focus ring accesible |
Shadows (si aplica)
- Card rest:
0 [X]px [X]px rgba([R],[G],[B],[A]) - Card hover:
0 [X]px [X]px rgba([R],[G],[B],[A]) - Dropdown:
0 [X]px [X]px rgba([R],[G],[B],[A]) - Modal:
0 [X]px [X]px rgba([R],[G],[B],[A])
Elevation Philosophy
[1 párrafo. ¿Usas sombras? ¿Es flat? ¿Cómo comunicas profundidad?]
7. Do's and Don'ts
✅ Do
- [Regla 1]
- [Regla 2]
- [Regla 3]
- [Regla 4]
- [Regla 5]
❌ Don't
- [Anti-regla 1]
- [Anti-regla 2]
- [Anti-regla 3]
- [Anti-regla 4]
- [Anti-regla 5]
8. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <[X]px | [Layout, nav, tipografía] |
| Tablet | [X]-[X]px | [Layout, nav, tipografía] |
| Desktop | [X]-[X]px | [Layout completo] |
| Large | >[X]px | [Max-width centered] |
Touch Targets
- Minimum: [X]x[X]px (WCAG)
- Mobile nav: [X]x[X]px
- Buttons: [X]x[X]px
Collapsing Strategy
- Navigation: [Comportamiento mobile]
- Grids: [X]-col → [X]-col → [X]-col
- Typography: Display [X]px → [X]px → [X]px
- Spacing: [X]px → [X]px → [X]px
- Images: [Comportamiento responsive]
9. Agent Prompt Guide
Quick Color Reference
Primary CTA: [COLOR] (`#HEX`)
Background: [COLOR] (`#HEX`)
Surface: [COLOR] (`#HEX`)
Heading: [COLOR] (`#HEX`)
Body text: [COLOR] (`#HEX`)
Border: [COLOR] (`#HEX`)
Error: [COLOR] (`#HEX`)
Link: [COLOR] (`#HEX`)
Example Component Prompts
- "Crea un hero section con [descripción detallada usando valores de este DESIGN.md]"
- "Diseña un grid de cards [X]-columnas con [detalles específicos de esta marca]"
- "Construye una navegación sticky [descripción con colores y tipografía específicos]"
Iteration Guide
Al refinar pantallas generadas con este sistema:
1. Enfócate en UN componente a la vez
2. Referencia colores por nombre y hex
3. Verifica tipografía contra la type scale
4. Revisa spacing contra el spacing system
5. Confirma que el componente sigue los Do's and Don'ts
DESIGN.md v1.0 — Basado en el estándar getdesign.md · CREA STUDIO S.A.S.