Artzy Brand Style Guide
← Color Fonts

Artzy Brand Guidelines

Sistema poster-pop para quick commerce creativo: azul dominante, crema cálido, soft ink, mascot doodle y slogans gigantes.

FUENTE: Artzy-Brand-Guidelines-DESIGN.md

Typography

Original + HTML
Heading system
Archivo
Specimen · 700 · 48px · ls -0.03em
Body system
Public Sans
400 · 16px / 24px
This is how body text feels at 18px when applied to a real paragraph block.
Original fonts · Heading: Obviously -> Archivo · Body and labels: Nimbus Sans -> Public Sans (Google substitutes).
Labels · Public Sans · 700 · 14px / 20px. La secundaria sostiene captions, utilitario y bloques de detalle.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
01 02 03 04 05 06 07 08 09 0%

Colors

Blue-led palette
Primary#4890E0
Secondary#2A2A2A
Tertiary#F87078
Neutral#FFF8DD

Background #FFF8DD · Surface #FFFFFF / #4890E0 · Text #2A2A2A · Border #D8D0B0 · Accent #F87078 / #70F888 / #E0B030

Overview

Poster system
LayoutEditorial + poster hybrid
Content width~1080px
FramingHuge headline, short body, hero asset
Grid2-column rhythm with big planes

Buttons

3 styles
PRIMARY → SECONDARY promo link ↗
Primary#4890E0 · text #FFF8DD · 14px
Secondary#2A2A2A · text #FFF8DD · 14px

Spacing

8px base
drop now
Title block
Artzy works when the message lands fast, the blue block stays loud and the supporting details remain compact and useful.
CTA →
Scale
8px12px20px32px48px88px section
Gaps · Card padding
gap 24pxpromo 20-24pxposter air 32px+

Elevation & Depth

Flat and loud

Depth is minimal. The system gets impact from flat color fields, printed texture, chunky typography and contrasting objects, not from glossy UI treatments.

TechniquePoster-flat panels, slight card rounding, product photography and mascot linework create rhythm without visual luxury effects.
Surface#FFF8DD / #4890E0 / #2A2A2A
Border1px #D8D0B0
Shadowsoft only on mockups, not on identity planes
Blur / deepNone - static brand system

Shapes

Canvas + doodle

The logo-canvas shape is angular and bold, while supporting promo cards get rounded corners. Doodles stay loose and irregular to counterbalance the geometry.

14px controls20-28px promo cardssharp logo canvasfreehand mascot
Primary radius14px
Icon set · treatmentCanvas logo plus hand-drawn mascot

Do's and Don'ts

Guardrails

Do

Lead with blue and cream before using promo accents.
Let the display headlines own the loudest moments.
Use Charial as narrative punctuation and emotional release.
Alternate flat poster sections with clean product photography.

Don't

Do not neutralize the brand into a polite stationery catalog.
Do not use all promo accents equally on one screen.
Do not polish the mascot into a sterile illustration set.
Do not replace the cream base with pure white everywhere.
Generado desde DESIGN.md · design-md-styleguide · Artzy
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #4890E0;
  --color-primary-hover: #2890E8;
  --color-primary-active: #3878C0;
  --color-secondary: #2A2A2A;
  --color-accent: #F87078;
  --color-accent-soft: #70F888;
  --color-accent-warm: #E0B030;
  --color-neutral: #FFF8DD;
  --color-background: #FFF8DD;
  --color-surface: #FFFFFF;
  --color-surface-brand: #4890E0;
  --color-text-primary: #2A2A2A;
  --color-text-secondary: #4A4A4A;
  --color-text-muted: #7E776B;
  --color-text-on-primary: #FFF8DD;
  --color-text-on-dark: #FFF8DD;
  --color-border: #D8D0B0;
  --color-border-subtle: #EEE6C8;
  --color-success: #70F888;
  --color-success-bg: #D8F8DE;
  --color-warning: #E0B030;
  --color-warning-bg: #F7E9B8;
  --color-error: #F87078;
  --color-error-bg: #FFE0E1;
  --color-info: #4890E0;
  --color-info-bg: #D9E9FF;
  --font-display: "Obviously";
  --font-body: "Obviously";
  --radius-md: 14px;
  --radius-full: 9999px;
  --space-base: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-gap: 24px;
  --space-section-padding: 88px;
}
@theme {
  --color-primary: #4890E0;
  --color-primary-hover: #2890E8;
  --color-primary-active: #3878C0;
  --color-secondary: #2A2A2A;
  --color-accent: #F87078;
  --color-accent-soft: #70F888;
  --color-accent-warm: #E0B030;
  --color-neutral: #FFF8DD;
  --color-background: #FFF8DD;
  --color-surface: #FFFFFF;
  --color-surface-brand: #4890E0;
  --color-text-primary: #2A2A2A;
  --color-text-secondary: #4A4A4A;
  --color-text-muted: #7E776B;
  --color-text-on-primary: #FFF8DD;
  --color-text-on-dark: #FFF8DD;
  --color-border: #D8D0B0;
  --color-border-subtle: #EEE6C8;
  --color-success: #70F888;
  --color-success-bg: #D8F8DE;
  --color-warning: #E0B030;
  --color-warning-bg: #F7E9B8;
  --color-error: #F87078;
  --color-error-bg: #FFE0E1;
  --color-info: #4890E0;
  --color-info-bg: #D9E9FF;
  --font-display: "Obviously";
  --font-body: "Obviously";
  --radius-md: 14px;
  --radius-full: 9999px;
  --spacing-base: 8px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-gap: 24px;
  --spacing-section-padding: 88px;
}
{
  "colors": {
    "primary": "#4890E0",
    "primary-hover": "#2890E8",
    "primary-active": "#3878C0",
    "secondary": "#2A2A2A",
    "accent": "#F87078",
    "accent-soft": "#70F888",
    "accent-warm": "#E0B030",
    "neutral": "#FFF8DD",
    "background": "#FFF8DD",
    "surface": "#FFFFFF",
    "surface-brand": "#4890E0",
    "text-primary": "#2A2A2A",
    "text-secondary": "#4A4A4A",
    "text-muted": "#7E776B",
    "text-on-primary": "#FFF8DD",
    "text-on-dark": "#FFF8DD",
    "border": "#D8D0B0",
    "border-subtle": "#EEE6C8",
    "success": "#70F888",
    "success-bg": "#D8F8DE",
    "warning": "#E0B030",
    "warning-bg": "#F7E9B8",
    "error": "#F87078",
    "error-bg": "#FFE0E1",
    "info": "#4890E0",
    "info-bg": "#D9E9FF"
  },
  "typography": {
    "display-lg": {
      "fontFamily": "Obviously",
      "fontSize": "72px",
      "fontWeight": "700",
      "lineHeight": "72px",
      "letterSpacing": "-0.03em"
    },
    "body-md": {
      "fontFamily": "Nimbus Sans",
      "fontSize": "16px",
      "fontWeight": "400",
      "lineHeight": "24px"
    },
    "label-md": {
      "fontFamily": "Nimbus Sans",
      "fontSize": "14px",
      "fontWeight": "700",
      "lineHeight": "20px"
    }
  },
  "rounded": {
    "md": "14px",
    "full": "9999px"
  },
  "spacing": {
    "base": "8px",
    "sm": "12px",
    "md": "20px",
    "lg": "32px",
    "xl": "48px",
    "gap": "24px",
    "section-padding": "88px"
  }
}
---
version: "1.0"
name: "Artzy"
description: "Sistema de marca para quick commerce creativo: azul cartel, crema papel, soft ink editorial y una energia irreverente que mezcla geometria, doodles y slogans de ultimo minuto."
colors:
  primary: "#4890E0"
  primary-hover: "#2890E8"
  primary-active: "#3878C0"
  secondary: "#2A2A2A"
  accent: "#F87078"
  accent-soft: "#70F888"
  accent-warm: "#E0B030"
  neutral: "#FFF8DD"
  background: "#FFF8DD"
  surface: "#FFFFFF"
  surface-brand: "#4890E0"
  text-primary: "#2A2A2A"
  text-secondary: "#4A4A4A"
  text-muted: "#7E776B"
  text-on-primary: "#FFF8DD"
  text-on-dark: "#FFF8DD"
  border: "#D8D0B0"
  border-subtle: "#EEE6C8"
  success: "#70F888"
  success-bg: "#D8F8DE"
  warning: "#E0B030"
  warning-bg: "#F7E9B8"
  error: "#F87078"
  error-bg: "#FFE0E1"
  info: "#4890E0"
  info-bg: "#D9E9FF"
typography:
  display-lg:
    fontFamily: "Obviously"
    fontSize: "72px"
    fontWeight: 700
    lineHeight: "72px"
    letterSpacing: "-0.03em"
  body-md:
    fontFamily: "Nimbus Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "24px"
  label-md:
    fontFamily: "Nimbus Sans"
    fontSize: "14px"
    fontWeight: 700
    lineHeight: "20px"
rounded:
  md: "14px"
  full: "9999px"
spacing:
  base: "8px"
  sm: "12px"
  md: "20px"
  lg: "32px"
  xl: "48px"
  gap: "24px"
  section-padding: "88px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "14px 22px"
  button-link:
    textColor: "{colors.secondary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "0px"
---

# DESIGN.md - Artzy

> Sistema de diseno extraido de una guia de marca estatica titulada "Artzy Brand Guidelines".
> Generado siguiendo el skill `branding-design`, adaptado a una referencia visual tipo imagen: paleta, tipografia, composicion, assets y tono de marca se infieren de las paginas visibles y sus muestras aplicadas.

---

## 1. Tema Visual y Atmosfera

Artzy no intenta verse como una papeleria premium silenciosa; se comporta mas bien como una marca urgente, querida y algo caotica que entiende a creatives que trabajan al limite de tiempo. El sistema arranca con un azul electrico muy limpio sobre fondos crema mantequilla, y sobre ese contraste coloca una voz tipografica sobredimensionada, insolente y muy visible. Cuando entra el negro suave, no lo hace para endurecer la marca, sino para darle un marco editorial que permita que los gestos mas juguetones respiren.

La identidad se sostiene en tres planos simultaneos. El primero es geometrico: el logo-canvas, las diagonales, los planos de color y la idea de una "A" construida como marco o soporte. El segundo es humano y de trazo libre: Charial, el mascot cocodrilo-dinosaurio, con lineas nerviosas e imperfectas. El tercero es publicitario: headlines enormes, frases exageradas, posters de promo y activaciones que parecen hechos para pegarse en una calle, en una estacion o en un locker room creativo.

Digitalmente, Artzy debe sentirse como una mezcla entre cultura visual de estudio, tienda de insumos de emergencia y campaña universitaria inteligente. Si se vuelve demasiado elegante o demasiado corporativa, pierde el nervio. Si se vuelve demasiado meme, pierde la claridad. El punto correcto es: rapido, creativo, expresivo y sorprendentemente util.

**Palabras clave de personalidad**: urgente, creativo, amigable, ruidoso, juvenil, directo, irreverente

**Densidad del layout**: comfortable

**Modo preferido**: claro con bloques saturados de color

**Nivel de ornamentacion**: elaborado (doodles, slogans, posters, patrones, mascot)

**Audiencia visual objetivo**: estudiantes de diseno, creatives young-adult, gente que compra papeleria y materiales con prisa pero con gusto visual

---

## 2. Paleta de Colores y Roles Semanticos

La paleta de Artzy se organiza alrededor de tres colores que hacen casi todo el trabajo: un azul principal vivo, un crema papel muy calido y un negro suave que la propia guia llama `Soft Ink`. Encima de ese trio aparecen acentos de campana - rosa promo, verde acido y amarillo marcador - que se usan para drops, packaging y promociones puntuales.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Primario Blue Canvas | `--color-primary` | `#4890E0` | Fondo de marca, app icon, titulares de bloque, cintas, canvases | `#FFF8DD` |
| Primario hover | `--color-primary-hover` | `#2890E8` | Hover de CTA, links y estados activos mas vivos | `#FFF8DD` |
| Primario activo | `--color-primary-active` | `#3878C0` | Pressed state, overlays, versiones mas densas del azul | `#FFF8DD` |
| Secundario Soft Ink | `--color-secondary` | `#2A2A2A` | Wordmark, posters oscuros, outlines, tipografia base | `#FFF8DD` |
| Acento Pink Drop | `--color-accent` | `#F87078` | Promos, posters de urgencia, packaging alterno | `#FFF8DD` |
| Acento Fresh Green | `--color-accent-soft` | `#70F888` | Drops especiales, señalizacion positiva, highlight playful | `#2A2A2A` |
| Acento Marker Yellow | `--color-accent-warm` | `#E0B030` | Detalles de producto, tapas, stickers, highlights calidos | `#2A2A2A` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Fondo mantequilla | `--color-bg` | `#FFF8DD` | Fondo principal, spreads editoriales, papeleria |
| Superficie blanca | `--color-surface` | `#FFFFFF` | Fotos de producto, zonas de respiracion, inputs o cards limpias |
| Superficie brand | `--color-surface-brand` | `#4890E0` | Panels llenos, hero blocks, headers y promos |
| Borde | `--color-border` | `#D8D0B0` | Reticulas, contornos de cards, productos sobre crema |
| Borde sutil | `--color-border-subtle` | `#EEE6C8` | Separacion ligera y tarjetas suaves |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto principal | `--color-text` | `#2A2A2A` | Headings oscuros, body, labels |
| Texto secundario | `--color-text-secondary` | `#4A4A4A` | Explicaciones, captions, soporte editorial |
| Texto muted | `--color-text-muted` | `#7E776B` | Notas tecnicas, guias, metadata |
| Texto sobre primario | `--color-text-on-primary` | `#FFF8DD` | Titulares y logo sobre azul |
| Texto sobre dark | `--color-text-on-dark` | `#FFF8DD` | Tipografia sobre Soft Ink |

### Colores de estado

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Exito | `--color-success` | `#70F888` | `#2A2A2A` |
| Exito (bg) | `--color-success-bg` | `#D8F8DE` | `#2A2A2A` |
| Advertencia | `--color-warning` | `#E0B030` | `#2A2A2A` |
| Advertencia (bg) | `--color-warning-bg` | `#F7E9B8` | `#2A2A2A` |
| Error | `--color-error` | `#F87078` | `#FFF8DD` |
| Error (bg) | `--color-error-bg` | `#FFE0E1` | `#2A2A2A` |
| Info | `--color-info` | `#4890E0` | `#FFF8DD` |
| Info (bg) | `--color-info-bg` | `#D9E9FF` | `#2A2A2A` |

### Regla de uso del color

Artzy funciona mejor cuando el azul manda, el crema deja respirar y el Soft Ink organiza el ruido. Los acentos promo deben entrar como irrupcion, no como sistema base. Si rosa, verde y amarillo aparecen todos al mismo tiempo sin jerarquia, la marca se convierte en un collage descontrolado y pierde la claridad que la hace util.

---

## 3. Reglas de Tipografia

```css
/* Heading: Obviously - pesado, expresivo, ancho y muy visible */
--font-heading: 'Obviously', 'Archivo Black', sans-serif;

/* Body: Nimbus Sans - neutra, amigable y muy legible */
--font-body: 'Nimbus Sans', 'Public Sans', sans-serif;

/* Labels / utilitario: misma familia secundaria para no sobrecargar el sistema */
--font-mono: 'Public Sans', sans-serif;
```

**Google Fonts (sustitutos):**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&family=Public+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
```

**Nota sobre sustitucion**: `Obviously` y `Nimbus Sans` no estan disponibles como Google Fonts. `Archivo` conserva bien el peso ancho y el golpe de titular; `Public Sans` funciona como reemplazo de Nimbus Sans por su neutralidad Swiss y buena legibilidad en cuerpo.

### Escala tipografica

| Token | rem | px equiv. | Line height | Uso |
|-------|-----|-----------|-------------|-----|
| `--text-xs` | 0.75rem | 12px | 1.4 | Metadata, notas, specs |
| `--text-sm` | 0.875rem | 14px | 1.45 | Labels, captions, soporte |
| `--text-base` | 1rem | 16px | 1.6 | Body principal |
| `--text-lg` | 1.125rem | 18px | 1.55 | Intro paragraphs, claims |
| `--text-xl` | 1.5rem | 24px | 1.3 | Subheads, cards promo |
| `--text-2xl` | 2rem | 32px | 1.15 | Titles de bloque |
| `--text-3xl` | 3rem | 48px | 1.02 | Headings de seccion |
| `--text-4xl` | 4rem | 64px | 0.96 | Promo headlines |
| `--text-5xl` | 4.5rem | 72px | 0.94 | Hero / display master |

### Pesos tipograficos

```css
--font-normal: 400;      /* Body */
--font-medium: 500;      /* UI copy y soporte */
--font-semibold: 600;    /* Labels y botones */
--font-bold: 700;        /* Body destacado */
--font-extrabold: 800;   /* Display y titulares */
```

### Letter spacing

```css
--tracking-tight: -0.03em;   /* Obviously en gran escala */
--tracking-normal: 0em;      /* Body */
--tracking-wide: 0.015em;    /* Etiquetas cortas */
--tracking-wider: 0.05em;    /* Metadata / microcopy */
```

### Regla de jerarquia

La familia primaria debe quedarse con titulares, posters y grandes bloques verbales. La secundaria toma cuerpo, notas, labels y descripciones. Cuando ambas aparecen juntas, Artzy se siente clara y juguetona; cuando todo se vuelve display, el sistema grita demasiado y deja de ser util.

---

## 4. Estilos de Componentes

La guia no documenta un UI kit formal, pero sus piezas aplicadas dejan una receta muy clara para web, social y producto.

### Botones

**Primario**
```
Background: var(--color-primary)
Color de texto: var(--color-text-on-primary)
Padding: 14px 22px
Border-radius: var(--radius-md)
Font-weight: var(--font-semibold)
Font-size: var(--text-sm)
Text-transform: uppercase
Transicion: background-color 160ms ease, transform 160ms ease

Hover:
  Background: var(--color-primary-hover)
  Transform: translateY(-1px)

Active:
  Background: var(--color-primary-active)
```

**Secundario**
```
Background: var(--color-secondary)
Color: var(--color-text-on-dark)
Border: 1px solid var(--color-secondary)
Border-radius: var(--radius-md)
Padding: 14px 22px
```

**Promo**
```
Background: var(--color-accent)
Color: var(--color-text-on-dark)
Border-radius: var(--radius-md)
Padding: 14px 22px
```

### Cards / promo posters

```
Background: var(--color-surface-brand) / var(--color-accent) / var(--color-accent-soft)
Color: var(--color-secondary) o var(--color-text-on-primary)
Border-radius: 20px to 28px
Padding: 20px to 24px
No shadow pesada; el impacto viene del color plano y la tipografia
```

### Product tile

```
Background: var(--color-surface)
Border: 1px solid var(--color-border-subtle)
Border-radius: 14px
Padding: 20px
```

### Mascot / doodle use

```
Stroke: Soft Ink
Background: crema o azul
Never over-detail
Use as commentary, emotional punctuation or brand sticker
```

---

## 5. Layout y Composicion

Artzy usa una gramatica muy sencilla pero muy reconocible: grandes campos de color plano, cortes diagonales, texto alineado con bastante aire, y alternancia entre bloques editoriales y fotografia de producto. Las spreads no se sienten cerradas; siempre hay un gesto grande que se lee primero y texto pequeño que entra despues.

### Cues compositivos

- **Layout**: editorial modular con posters y secciones de historia
- **Content width**: aprox. 1080px util en desktop
- **Framing**: headline grande, bloque de explicacion secundario, specimen fotografico o mascot
- **Grid**: estructura de 2 columnas flexibles con mucho plano lleno
- **Section rhythm**: alterna crema y azul para reiniciar la atencion

### Regla espacial

Los layouts de Artzy ganan cuando hay espacio para que los slogans respiren y el azul se sienta como cartel. Apretar texto, meter demasiadas cards pequeñas o recortar el mascot demasiado pronto rompe el humor visual.

---

## 6. Graficos, Mascot y Narrativa Visual

El valor especial de Artzy no esta solo en su color o en el logo, sino en la convivencia entre geometria y dibujo nervioso. Charial, el mascot, aporta humanidad y caos amable. El "Canvas" del logo, en cambio, aporta estructura, confianza y una idea de soporte o base para la creatividad.

### Sistema grafico

- **Canvas logo**: forma principal, geometricamente simple, casi modular
- **Doodles**: trazo libre negro, poco relleno, muy expresivo
- **Tape / ribbons**: azul con wordmark repetido y doodles impresos
- **Posters**: color plano + headline enorme + mascot o gesto minimo
- **Pattern**: utiles y objetos de papeleria en outline repetido

### Regla de combinacion

Nunca intentes que todas las capas hablen al mismo volumen. En una pieza, deja que mande el color. En otra, el slogan. En otra, el mascot. La riqueza viene de alternar, no de superponer todos los recursos a la vez.

---

## 7. Logo y Sistema de Marca

El logo de Artzy se compone del `Canvas` y el wordmark. La forma principal parece una "A" construida como marco, soporte o superficie de exhibicion. Es directa, muy memorable y suficientemente simple para funcionar como icono de app, sticker, empaque o seccion de fondo.

### Reglas clave

- Sobre azul, usar logo crema para maximo contraste.
- Sobre crema, usar canvas azul y wordmark Soft Ink.
- Existe una version rosa para aplicaciones especiales y promos.
- El logo debe mantenerse opaco y muy visible; no usar transparencias.
- El wordmark completo se reserva para comunicaciones principales.

### Escala y contexto

- **App icon**: canvas solo
- **Header / hero**: canvas + wordmark
- **Packaging**: ambas opciones son validas segun el plano de color

---

## 8. Aplicacion Digital y Traduccion Web

Las aplicaciones visibles - posters verticales, OOH, cards tipo app, packaging, merch y mockups de pantalla - indican que Artzy puede vivir muy bien en interfaces digitales si se le da suficiente decision grafica. No necesita skeuomorphism ni efectos complejos; funciona con color, copy y ritmo.

### Principios para una landing o app Artzy

- Hero con slogan grande y azul dominante.
- CTA claros y rectangulares, no ultraminimalistas.
- Cards promo en blue, pink o green con radio visible.
- Doodles de Charial como alivio narrativo, no como fondo constante.
- Mucha presencia de titulares tipo cartel y bloques de lectura cortos.

### Lo que no hay que hacer

- No convertirla en una interfaz gris y pulcra.
- No reemplazar el crema por blanco puro en todo el sistema.
- No usar gradientes elegantes o glassmorphism; el sistema es mas poster que tech-luxury.

---

## 9. Do's and Don'ts

### Do

- Usa el azul como columna vertebral de reconocimiento.
- Combina cream + soft ink para darle cuerpo editorial a las piezas.
- Deja que los slogans grandes hagan el trabajo de voz.
- Usa Charial como comentario emocional y no como adorno sin sentido.
- Alterna posters coloridos con spreads limpios para conservar ritmo.

### Don't

- No metas todos los acentos promo en una misma pantalla sin jerarquia.
- No afines demasiado la tipografia; Artzy necesita peso y presencia.
- No suavices el mascot con ilustracion pulida o muy detallada.
- No conviertas el logo en un simbolo corporativo serio y silencioso.
- No hagas una UI tan neutra que parezca otra marca.

---