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

Atoll Digital

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

light mode red 7 colores Estudio Creativo
atolldigital.com
Captura de Atoll Digital
01

Color

light · 7 colors
Primary
#ff4d20
primary
primary
Brand
#7eb7ff
secondary
secondary
#181818
text-primary
text-primary
#181818
text-secondary
text-secondary
#181818
border
border
Surface
#f7f4ee
background
background
#f7f4ee
surface
surface
02

Typography

2 familias
AaEeCcGg50.
Host Grotesk 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 — Host Grotesk

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
Atoll Digital 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: #f7f4ee;
  --surface: #f7f4ee;
  --ink: #181818;
  --ink-soft: #323232;
  --muted: #717171;
  --primary: #ff4d20;
  --primary-hover: #ff3501;
  --border: #181818;
  /* Typography */
  --font-display: 'Host Grotesk', system-ui, sans-serif;
  --font-body: 'Host Grotesk', 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: #f7f4ee;
  --color-surface: #f7f4ee;
  --color-ink: #181818;
  --color-primary: #ff4d20;
  --color-primary-hover: #ff3501;
  --color-border: #181818;
  --font-display: 'Host Grotesk', system-ui, sans-serif;
  --font-body: 'Host Grotesk', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius-btn: 9999px;
  --radius-card: 16px;
}
{
  "color": {
    "canvas": "#f7f4ee",
    "surface": "#f7f4ee",
    "ink": "#181818",
    "primary": "#ff4d20",
    "border": "#181818",
    "secondary": "#7eb7ff",
    "background": "#f7f4ee",
    "text-primary": "#181818",
    "text-secondary": "#181818"
  },
  "font": {
    "display": "Host Grotesk",
    "body": "Host Grotesk",
    "mono": "JetBrains Mono"
  },
  "radius": {
    "btn": "9999px",
    "card": "16px"
  },
  "spacing": {
    "4px": "4px",
    "8px": "8px",
    "16px": "16px",
    "24px": "24px",
    "40px": "40px"
  }
}