← Inspiration
extraído de studiodumbar.com Ver sitio ↗

Studio Dumbar

"Referencia visual original basada en el sitio de Studio Dumbar: tipografía expresiva, estructura editorial y color usado con intención."

light mode red 7 colores Marca Maximalista
studiodumbar.com
Captura de Studio Dumbar
01

Color

light · 7 colors
Primary
#ff5277
primary
primary
Brand
#4f63ff
secondary
secondary
#161616
text-primary
text-primary
#161616
text-secondary
text-secondary
#161616
border
border
Surface
#f5f1eb
background
background
#f5f1eb
surface
surface
02

Typography

2 familias
AaEeCcGg50.
Plus Jakarta Sans fuente real del sitio
300 LightDesign that moves people.
400 RegularDesign that moves people.
500 MediumDesign that moves people.
600 SemiBoldDesign that moves people.
700 BoldDesign that moves people.
Body — Be Vietnam Pro

El sistema visual combina tipografía de alta calidad con colores cuidadosamente seleccionados. Cada decisión de diseño refleja la personalidad de la marca y comunica su propósito con claridad y precisión.

RoleSizeWeightLHFont
display xl72px7001.0Display
display lg48px6001.1Display
heading32px6001.2Display
body lg20px4001.5Body
body16px4001.6Body
label14px5001.4Display
mono13px4001.6Mono
03

Components

live recipes
Componente destacado
Studio Dumbar UI

La card usa la superficie del sistema con borde sutil y el radio real de la marca. El kicker en el color primario es el único acento de color sobre el fondo.

04

Spacing & shape

base 4px
Spacing scale
4px
8px
16px
24px
40px
Radius family
9999px
16px
05

Principles

guardrails

    Do

  • Usa los colores del sistema con intención y consistencia.
  • Mantén la tipografía dentro de la escala establecida.
  • Aplica los radios de borde según el contexto de cada componente.

    Don't

  • No uses colores fuera del sistema sin justificación visual.
  • No mezcles familias tipográficas de categorías incompatibles.
  • No apliques sombras donde el sistema usa color plano.
06

Resources

copy & paste 
:root {
  /* Color */
  --canvas: #f5f1eb;
  --surface: #f5f1eb;
  --ink: #161616;
  --ink-soft: #303030;
  --muted: #6f6f6f;
  --primary: #ff5277;
  --primary-hover: #ff335f;
  --border: #161616;
  /* Typography */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Radius */
  --radius-btn: 9999px;
  --radius-card: 16px;
  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;
}
@theme {
  --color-canvas: #f5f1eb;
  --color-surface: #f5f1eb;
  --color-ink: #161616;
  --color-primary: #ff5277;
  --color-primary-hover: #ff335f;
  --color-border: #161616;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius-btn: 9999px;
  --radius-card: 16px;
}
{
  "color": {
    "canvas": "#f5f1eb",
    "surface": "#f5f1eb",
    "ink": "#161616",
    "primary": "#ff5277",
    "border": "#161616",
    "secondary": "#4f63ff",
    "background": "#f5f1eb",
    "text-primary": "#161616",
    "text-secondary": "#161616"
  },
  "font": {
    "display": "Plus Jakarta Sans",
    "body": "Be Vietnam Pro",
    "mono": "JetBrains Mono"
  },
  "radius": {
    "btn": "9999px",
    "card": "16px"
  },
  "spacing": {
    "4px": "4px",
    "8px": "8px",
    "16px": "16px",
    "24px": "24px",
    "40px": "40px"
  }
}