extraido de ironhill.au Ver sitio ↗

Iron Hill Whisky & Beer Australia

IronHill

Una destileria australiana que habla en susurros de bosque: tipografia serif organica de peso ligero, canvas crema calido y un verde bosque profundo que se ilumina con toques de oro liquido. Un sistema visual que huele a tierra mojada y ember antes de servir el primer vaso.

light mode yellow esquinas redondeadas 2 familias tipograficas editorial rustica

ironhill.au

Color

light · 7 colors

Brand

#fec81e

Oro Iron Hill

dominante · acento · bordes CTA

tinta sobre oro · AAA · 12.4:1

#344128

Bosque profundo

texto principal · bordes · sombras

sobre canvas crema · AAA · 15.8:1

#f4eddd

Canvas calido

fondo dominante · base organica

no para texto · superficie base

Supporting

#354027

Musgo oscuro

botones primarios · fondo de CTA

texto claro sobre musgo · AA large · 3.6:1

#27311e

Tierra profunda

overlays · fondo invertido · contraste maximo

canvas sobre tierra · AAA · 14.2:1

#4a5a3a

Musgo medio

texto secundario · captions

sobre canvas · AA · 4.8:1

Neutrals

#ffffff

Superficie

cards · modales · pops

reservado a cards, no al fondo general

#d9d4c4

Borde claro

divisores sutiles · inputs neutral

hairline, no para texto

Typography

2 families

AaEeCcGg50.

Cormorant Garamond antes PP Woodland · sustituto Google · serif organica elegante

300 LightDonde la niebla se posa bajo

400 RegularDonde la niebla se posa bajo

500 MediumDonde la niebla se posa bajo

600 SemiboldDonde la niebla se posa bajo

Hanken Grotesk antes GT America · sustituto Google · grotesk moderna con caracter

300 LightCalienta tus manos junto al fuego

400 RegularCalienta tus manos junto al fuego

500 MediumCalienta tus manos junto al fuego

600 SemiboldCalienta tus manos junto al fuego

700 BoldCalienta tus manos junto al fuego

Body — Hanken Grotesk

Iron Hill es una destileria australiana donde el whisky, la cerveza y el agua de manantial convergen en una experiencia sensorial. El cuerpo se mantiene en Hanken Grotesk regular, claro y contemporaneo, mientras los titulares display suben a Cormorant Garamond 300 con tracking negativo ligero para evocar la calma del bosque.

Role	Size	Weight	LH
display lg	clamp(72, 240)	300	0.85
display md	clamp(32, 64)	300	1.1
body lg	22px	400	1.5
body md	16px	400	1.55
label	11px	500	1.3

Original: PP Woodland (display) / GT America (body) -> HTML: Cormorant Garamond / Hanken Grotesk. Cormorant Garamond conserva la elegancia organica serif del display real; Hanken Grotesk mantiene el caracter grotesk moderno de la sans original.

Components

live recipes

Edicion limitada

Single Malt XX

Destilado en las colinas de Iron Hill, envejecido en barricas de roble tostado. La card de marca es el unico lugar donde el oro actua como sombra de contraste.

Spacing & shape

base 8

Spacing scale

8px · base

16px · gap

24px · md

32px · lg

48px · xl

72px · section

Radius family

4px

8px card

8px btn

100px chip

Elevation

diseño plano: sin sombras de caja detectadas
profundidad por contraste de color y capas, nunca blur
transiciones: background .3s cubic-bezier(.33,1,.68,1)

Principles

guardrails

Do

Reserva el oro #fec81e para acentos puntuales: bordes de navegacion, estados activos, puntos decorativos.
Mantén los radios redondeados (4px chips, 8px botones/cards); suavizan la rudeza rustica del bosque profundo.
Usa Cormorant Garamond en peso ligero (300) para titulares display con line-height cerrado (0.85).
Deja que el canvas calido #f4eddd sea el fondo dominante; el blanco puro solo para cards flotantes.
Contrasta serif display con sans body para crear jerarquia editorial que evoque la naturaleza y la tradicion.
Aprovecha el verde bosque #344128 como texto, borde y fondo de overlay a la vez.

Don't

No uses el oro como fondo continuo; pierde su fuerza como acento de destileria artesanal.
No afilies las esquinas a 0px; rompe la calidez organica del sistema.
No pongas texto en Cormorant Garamond en pesos gruesos; el display vive en 300.
No uses blanco puro como fondo general; reservalo para superficies elevadas.
No mezcles mas de dos familias tipograficas; el par serif/sans ya es suficiente.
No anadas sombras con blur; el sitio es plano y confia en el contraste de color.

Resources

copy & paste

Download DESIGN.md

:root {
  --color-primary: #fec81e;
  --color-primary-hover: #fed34d;
  --color-primary-active: #d4a400;
  --color-primary-deep: #d4a400;
  --color-secondary: #354027;
  --color-neutral: #344128;
  --color-background: #f4eddd;
  --color-surface: #ffffff;
  --color-text-primary: #344128;
  --color-text-secondary: #4a5a3a;
  --color-text-muted: #7a8a6a;
  --color-text-on-primary: #344128;
  --color-border: #344128;
  --color-border-soft: #d9d4c4;
  --color-success: #2d8a4e;
  --color-success-bg: #e6f5ec;
  --color-warning: #c97b00;
  --color-warning-bg: #fbf0db;
  --color-error: #d4a400;
  --color-error-bg: #fbe5db;
  --color-info: #3a7bd5;
  --color-info-bg: #e8f0fb;
  --font-display: "Cormorant Garamond";
  --font-body: "Hanken Grotesk";
  --radius-sm: 4px;
  --radius-card: 8px;
  --radius-btn: 8px;
  --radius-chip: 4px;
  --space-base: 8px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-section: 72px;
  --space-gap: 16px;
}

@theme {
  --color-primary: #fec81e;
  --color-primary-hover: #fed34d;
  --color-primary-active: #d4a400;
  --color-primary-deep: #d4a400;
  --color-secondary: #354027;
  --color-neutral: #344128;
  --color-background: #f4eddd;
  --color-surface: #ffffff;
  --color-text-primary: #344128;
  --color-text-secondary: #4a5a3a;
  --color-text-muted: #7a8a6a;
  --color-text-on-primary: #344128;
  --color-border: #344128;
  --color-border-soft: #d9d4c4;
  --color-success: #2d8a4e;
  --color-success-bg: #e6f5ec;
  --color-warning: #c97b00;
  --color-warning-bg: #fbf0db;
  --color-error: #d4a400;
  --color-error-bg: #fbe5db;
  --color-info: #3a7bd5;
  --color-info-bg: #e8f0fb;
  --font-display: "Cormorant Garamond";
  --font-body: "Hanken Grotesk";
  --radius-sm: 4px;
  --radius-card: 8px;
  --radius-btn: 8px;
  --radius-chip: 4px;
  --spacing-base: 8px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-section: 72px;
  --spacing-gap: 16px;
}

{
  "colors": {
    "primary": "#fec81e",
    "primary-hover": "#fed34d",
    "primary-active": "#d4a400",
    "primary-deep": "#d4a400",
    "secondary": "#354027",
    "neutral": "#344128",
    "background": "#f4eddd",
    "surface": "#ffffff",
    "text-primary": "#344128",
    "text-secondary": "#4a5a3a",
    "text-muted": "#7a8a6a",
    "text-on-primary": "#344128",
    "border": "#344128",
    "border-soft": "#d9d4c4",
    "success": "#2d8a4e",
    "success-bg": "#e6f5ec",
    "warning": "#c97b00",
    "warning-bg": "#fbf0db",
    "error": "#d4a400",
    "error-bg": "#fbe5db",
    "info": "#3a7bd5",
    "info-bg": "#e8f0fb"
  },
  "typography": {
    "display-lg": {
      "fontFamily": "Cormorant Garamond",
      "fontSize": "clamp(72px, 20vw, 240px)",
      "fontWeight": "300",
      "lineHeight": "0.85",
      "letterSpacing": "-0.02em"
    },
    "display-md": {
      "fontFamily": "Cormorant Garamond",
      "fontSize": "clamp(32px, 5vw, 64px)",
      "fontWeight": "300",
      "lineHeight": "1.1",
      "letterSpacing": "-0.02em"
    },
    "body-md": {
      "fontFamily": "Hanken Grotesk",
      "fontSize": "16px",
      "fontWeight": "400",
      "lineHeight": "1.55"
    },
    "body-lg": {
      "fontFamily": "Hanken Grotesk",
      "fontSize": "22px",
      "fontWeight": "400",
      "lineHeight": "1.5"
    },
    "label-md": {
      "fontFamily": "IBM Plex Mono",
      "fontSize": "11px",
      "fontWeight": "500",
      "lineHeight": "1.3",
      "letterSpacing": "0.14em",
      "textTransform": "uppercase"
    }
  },
  "rounded": {
    "sm": "4px",
    "card": "8px",
    "btn": "8px",
    "chip": "4px"
  },
  "spacing": {
    "base": "8px",
    "xs": "8px",
    "sm": "16px",
    "md": "24px",
    "lg": "32px",
    "xl": "48px",
    "section": "72px",
    "gap": "16px"
  }
}

---
version: "1.0"
name: "IronHill"
description: "Destileria australiana con identidad rustica editorial: tipografia serif organica ligera, canvas crema calido y verde bosque profundo iluminado por toques de oro."
colors:
  primary: "#fec81e"
  primary-hover: "#fed34d"
  primary-active: "#d4a400"
  primary-deep: "#d4a400"
  secondary: "#354027"
  neutral: "#344128"
  background: "#f4eddd"
  surface: "#ffffff"
  text-primary: "#344128"
  text-secondary: "#4a5a3a"
  text-muted: "#7a8a6a"
  text-on-primary: "#344128"
  border: "#344128"
  border-soft: "#d9d4c4"
  success: "#2d8a4e"
  success-bg: "#e6f5ec"
  warning: "#c97b00"
  warning-bg: "#fbf0db"
  error: "#d4a400"
  error-bg: "#fbe5db"
  info: "#3a7bd5"
  info-bg: "#e8f0fb"
typography:
  display-lg:
    fontFamily: "Cormorant Garamond"
    fontSize: "clamp(72px, 20vw, 240px)"
    fontWeight: 300
    lineHeight: "0.85"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: "Cormorant Garamond"
    fontSize: "clamp(32px, 5vw, 64px)"
    fontWeight: 300
    lineHeight: "1.1"
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Hanken Grotesk"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.55"
  body-lg:
    fontFamily: "Hanken Grotesk"
    fontSize: "22px"
    fontWeight: 400
    lineHeight: "1.5"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "11px"
    fontWeight: 500
    lineHeight: "1.3"
    letterSpacing: "0.14em"
    textTransform: "uppercase"
rounded:
  sm: "4px"
  card: "8px"
  btn: "8px"
  chip: "4px"
spacing:
  base: "8px"
  xs: "8px"
  sm: "16px"
  md: "24px"
  lg: "32px"
  xl: "48px"
  section: "72px"
  gap: "16px"
components:
  button-primary:
    backgroundColor: "#354027"
    textColor: "#f4eddd"
    typography: "Hanken Grotesk 500 / 0.875rem"
    rounded: "8px"
    padding: "15px 26px"
    border: "none"
    boxShadow: "none"
  button-pop:
    backgroundColor: "#fec81e"
    textColor: "#344128"
    typography: "Hanken Grotesk 500"
    rounded: "8px"
    border: "1px solid #344128"
    boxShadow: "0 4px #344128"
  button-ghost:
    textColor: "#4a5a3a"
    typography: "Hanken Grotesk 400"
    rounded: "0"
    border: "none"
    boxShadow: "none"
  card:
    backgroundColor: "#ffffff"
    rounded: "8px"
    padding: "24px"
    border: "1.5px solid #344128"
    boxShadow: "0 4px #344128"
  chip:
    padding: "8px 14px"
    rounded: "4px"
    fontSize: "11px"
    fontFamily: "IBM Plex Mono"
    border: "1px solid #d9d4c4"
  input:
    backgroundColor: "#f4eddd"
    border: "1.5px solid #d9d4c4"
    rounded: "8px"
    padding: "14px 16px"
    font: "Hanken Grotesk 400 15px"
---

# DESIGN.md · Iron Hill

> Sistema de diseno extraido de `https://ironhill.au/` siguiendo el skill `url-inspiration-styleguide`.
> La identidad central proviene del HTML y CSS del sitio en vivo. Estados y escalas derivados se marcan como `(derivado para completar el sistema)`.

## 1. Tema Visual y Atmosfera

- **Modo**: light.
- **Familia de color**: yellow.
- **Atmosfera**: rustica, editorial, organica. El canvas crema evoca papel artesanal; el verde bosque profundo ancla la identidad en la naturaleza australiana.
- **Metafora**: una etiqueta de botella de whisky convertida en interfaz digital.

## 2. Paleta de Color

| Token | Hex | Rol |
|-------|-----|-----|
| primary | #fec81e | Acento dominante, bordes de navegacion, CTA |
| ink | #344128 | Texto principal, bordes, overlays |
| canvas | #f4eddd | Fondo dominante, base organica |
| surface | #ffffff | Cards, modales, superficies elevadas |
| secondary | #354027 | Botones primarios, fondo de CTA |
| border-soft | #d9d4c4 | Divisores sutiles, inputs neutral |

## 3. Tipografia

- **Display**: Cormorant Garamond (reemplaza PP Woodland). Serif organica elegante, peso 300, tracking ligero.
- **Body**: Hanken Grotesk (reemplaza GT America). Grotesk moderna con caracter, pesos 300-700.
- **Mono**: IBM Plex Mono. Labels, codigo, metadatos.

## 4. Componentes Clave

- **Boton primario**: fondo musgo oscuro, texto crema, sin borde, radio 8px.
- **Boton pop**: fondo oro, texto bosque, borde bosque, sombra dura 0 4px.
- **Card**: fondo blanco, borde bosque, radio 8px, sombra dura.
- **Input**: fondo canvas, borde gris suave, radio 8px.

## 5. Espaciado y Forma

- **Base**: 8px.
- **Radios**: 4px (chips), 8px (cards/botones).
- **Sombras**: diseno plano; no se detectaron box-shadows en el CSS original. La profundidad viene del contraste de color.
- **Transiciones**: background .3s cubic-bezier(.33,1,.68,1).

## 6. Principios de Uso

- Usa el oro como acento, nunca como fondo.
- Manten los radios redondeados; suavizan la rudeza rustica.
- Contrasta serif display con sans body para jerarquia editorial.
- No anadas sombras con blur; el sitio es plano y confia en el color.

## 7. Recursos

- CSS variables, Tailwind v4 theme, JSON tokens y DESIGN.md incluidos en la seccion Resources del HTML.