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

&Walsh

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

light mode green 7 colores Diseño Juguetón
andwalsh.com
Captura de &Walsh
01

Color

light · 7 colors
Primary
#18a679
primary
primary
Brand
#ff6a3d
secondary
secondary
#15251b
text-primary
text-primary
#15251b
text-secondary
text-secondary
#15251b
border
border
Surface
#f4f0e8
background
background
#f4f0e8
surface
surface
02

Typography

1 familia
AaEeCcGg50.
Epilogue sustituto de Archivo
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 — Epilogue

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
&Walsh 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: #f4f0e8;
  --surface: #f4f0e8;
  --ink: #15251b;
  --ink-soft: #274633;
  --muted: #56976e;
  --primary: #18a679;
  --primary-hover: #148b66;
  --border: #15251b;
  /* Typography */
  --font-display: 'Epilogue', system-ui, sans-serif;
  --font-body: 'Epilogue', 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: #f4f0e8;
  --color-surface: #f4f0e8;
  --color-ink: #15251b;
  --color-primary: #18a679;
  --color-primary-hover: #148b66;
  --color-border: #15251b;
  --font-display: 'Epilogue', system-ui, sans-serif;
  --font-body: 'Epilogue', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius-btn: 9999px;
  --radius-card: 16px;
}
{
  "color": {
    "canvas": "#f4f0e8",
    "surface": "#f4f0e8",
    "ink": "#15251b",
    "primary": "#18a679",
    "border": "#15251b",
    "secondary": "#ff6a3d",
    "background": "#f4f0e8",
    "text-primary": "#15251b",
    "text-secondary": "#15251b"
  },
  "font": {
    "display": "Epilogue",
    "body": "Epilogue",
    "mono": "JetBrains Mono"
  },
  "radius": {
    "btn": "9999px",
    "card": "16px"
  },
  "spacing": {
    "4px": "4px",
    "8px": "8px",
    "16px": "16px",
    "24px": "24px",
    "40px": "40px"
  }
}