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)

New Project

Orange Medium

Apply Artwork

Orange Small

Export

Purple (Active / Generate)

Generate Model

Purple Large

Asset Library

Purple Small

Uploads

Dark (Secondary)

Projects List

Ghost (Outline)

Settings

Danger

Delete

Success

Saved

Icon Buttons

Loading State

Generating

Full Width

Generate Mockup

---

4 — Tabs

Purple active (Assets)

Uploads Patterns Graphics

Purple active (Model)

Custom Predefined

Orange active

Front 3/4 Side

---

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 Selecciona tipo... Oversized Tee Slim Fit Hoodie Jacket

Tipo de tela Fabric... Cotton Jersey Heavyweight Linen

Pose del modelo Front 3-4 View Side

Resolución de exportación 2K PNG (2048×2048) 4K PNG (4096×4096) 1080×1350 (Instagram) 1080×1920 (Story)

---

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

Browse

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 ▾

2K PNG (2048×2048)

4K PNG (4096×4096)

1080×1350 (Instagram)

1080×1920 (Story)

---

14 — Panels / Cards

Panel estándar

Quick Access

Asset Library Projects List

Sub-panel (Model Controls)

Model Controls

Custom Predefined

Front 3-4 View Side

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

Abrir Modal demo

---

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

New Project

Assets

Uploads Patterns

Logo.svg SVG

AI Texture-Mapped Preview

Export

High-res render for portfolio.

4K PNG ▾ Export