Design2Clothes — UI Kit
Componentes visuales generados a partir del diseño de referencia `design2clothes.pen`
1 — Design Tokens / Colores
#121212
bg-root
#1B1B1B
panel
#171717
panel-alt
#242424
subpanel
#1A1A1A
input
#2C2C2C
border
#FF6A00
orange
#6F2CFF
purple
#F2F2F2
text-prim
#B8B8B8
text-sec
#8E8E8E
muted

2 — Typography (Inter)
Brand / Logo — 34px 700
Design2Clothes
Project Title — 30px 700
ThreadVision SS26 Capsule
Section Heading — 24px 600
Design Canvas
Panel Title — 20px 600
Assets
CTA Button — 16px 700
New Project
Body / Label — 14px 500
AI-assisted fashion mockup workflow for mapping 2D graphics onto 3D garment avatars.
Sub-Panel Head — 14px 600
Model Controls
Small / Tag — 12px 600
Asset Library Uploads Patterns Graphics
Micro / Badge — 11px 500–600
Scale 85% · Rotation 12° · Opacity 82% · 4K PNG ▾

3 — Buttons
Orange (Primary CTA)
Orange Medium
Orange Small
Purple (Active / Generate)
Purple Large
Purple Small
Dark (Secondary)
Ghost (Outline)
Danger
Success
Icon Buttons
Loading State
Full Width

4 — Tabs
Purple active (Assets)
Purple active (Model)
Orange active

5 — Inputs de Texto
Nombre del proyecto
Prompt personalizado
API Key (oculta)
Input pequeño (sm)
Input deshabilitado

6 — Selects / Dropdowns nativos
Tipo de prenda
Tipo de tela
Pose del modelo
Resolución de exportación

7 — Textareas
Descripción del proyecto
Prompt de aplicación de artwork

8 — Checkboxes & Radios
Checkboxes
Aplicar textura de tela Modo alta resolución Generar variante de sombra Deshabilitado
Radio Buttons
Print Multiply Soft Light Overlay

9 — Toggle Switches
Modo AI activo
Modo previsualización
Exportación automática

10 — Range Sliders
Scale 85%
Rotation 12°
Opacity 82%

11 — File Upload / Drop Zone
Drop Zone (estilo diseño)

Drop your designs in
.png, .jpg, .svg here

Drop Zone — Estado drag over

Suelta el archivo aquí

12 — Asset List Items
Logo_Brandmark.svg
SVG
Tiger_Print.png
PNG
Floral_Allover.jpg
JPG
Geometric_Pattern.svg
SVG

13 — Custom Dropdown (Resolución Export)
Resolución 4K PNG ▾

14 — Panels / Cards
Panel estándar
Quick Access
Sub-panel (Model Controls)
Model Controls
Project Info Card
Current Project
ThreadVision SS26
AI-assisted fashion mockup workflow for mapping 2D graphics onto 3D garment avatars.

15 — Badges & Tags
Activo Generando Exportado Error Draft SVG PNG JPG

16 — Alerts
El modelo se está generando. Esto puede tardar unos segundos.
Diseño exportado correctamente en resolución 4K.
La API de Gemini ha alcanzado el límite de solicitudes. Reintenta en un momento.
Error al conectar con el workflow de n8n. Revisa el webhook.

17 — Modal
Nuevo Proyecto
Nombre del proyecto
Descripción breve
Tipo base

18 — Loading / Progress
Spinner sm
Spinner md
Spinner lg
Generando modelo... 65%
Aplicando artwork... 92%

19 — Inspector Form Rows
Artwork Controls
Scale 85%
Rotation 12°
Opacity 82%
Blending Print
Garment Controls
Fabric Jersey
Base Colour
Type Oversized Tee

20 — App Layout Preview (mini)
Design2Clothes
Assets
Logo.svg SVG
AI Texture-Mapped Preview
Export
High-res render for portfolio.