---
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 |

### Ramps

- **Primary**: #ffe066, #fed34d, #fec81e, #d4a400, #a68500
- **Ink**: #5a6a4a, #4a5a3a, #344128, #24301c, #1a2412
- **Canvas**: #ffffff, #faf5eb, #f4eddd, #e8e0cc, #d4c9b0

---

## 3. Tipografia

- **Display**: Cormorant Garamond (reemplaza PP Woodland). Serif organica elegante, peso 300, tracking ligero negativo. Usada exclusivamente en titulares grandes.
- **Body**: Hanken Grotesk (reemplaza GT America). Grotesk moderna con caracter, pesos 300-700. Usada en cuerpo de texto, botones, labels y navegacion.
- **Mono**: IBM Plex Mono. Labels, codigo, metadatos, kicker text.

### Escala

| Rol | Size | Weight | Line-height | Tracking |
|-----|------|--------|-------------|----------|
| display-lg | clamp(72px, 20vw, 240px) | 300 | 0.85 | -0.02em |
| display-md | clamp(32px, 5vw, 64px) | 300 | 1.1 | -0.02em |
| body-lg | 22px | 400 | 1.5 | normal |
| body-md | 16px | 400 | 1.55 | normal |
| label | 11px | 500 | 1.3 | 0.14em uppercase |

---

## 4. Componentes Clave

### Boton primario
- backgroundColor: #354027
- textColor: #f4eddd
- border: none
- rounded: 8px
- padding: 15px 26px
- typography: Hanken Grotesk 500

### Boton pop
- backgroundColor: #fec81e
- textColor: #344128
- border: 1px solid #344128
- boxShadow: 0 4px #344128
- rounded: 8px

### Card
- backgroundColor: #ffffff
- border: 1.5px solid #344128
- boxShadow: 0 4px #344128
- rounded: 8px
- padding: 24px

### Input
- backgroundColor: #f4eddd
- border: 1.5px solid #d9d4c4
- rounded: 8px
- padding: 14px 16px
- font: Hanken Grotesk 400 15px

### Chip
- padding: 8px 14px
- rounded: 4px
- fontSize: 11px
- fontFamily: IBM Plex Mono
- border: 1px solid #d9d4c4

---

## 5. Espaciado y Forma

- **Base**: 8px.
- **Escalas**: 8px, 16px, 24px, 32px, 48px, 72px (section).
- **Radios**: 4px (chips), 8px (cards/botones). Firma organica.
- **Sombras**: diseno plano; no se detectaron box-shadows en el CSS original. La profundidad viene del contraste de color y las capas solidas.
- **Transiciones**: background .3s cubic-bezier(.33, 1, .68, 1); opacity .3s ease.
- **Grid**: max-width 1120px, padding lateral 32px (20px en movil).

---

## 6. Principios de Uso

1. **Acento controlado**: el oro #fec81e es un acento, no un fondo. Usalo en bordes de navegacion, estados activos y puntos decorativos.
2. **Redondeado organico**: 4px y 8px radius suavizan la rudeza rustica del bosque profundo.
3. **Display ligero**: Cormorant Garamond solo en 300. No uses pesos gruesos en el display; la elegancia reside en la ligereza.
4. **Canvas sobre blanco**: el fondo general siempre es crema #f4eddd. Reserva el blanco puro para cards y superficies elevadas.
5. **Par tipografico**: serif display + sans body. No introduzcas mas familias; el contraste ya establece la jerarquia.
6. **Plano intencional**: no anadas sombras con blur. El sitio es plano y confia en el contraste de color.

---

## 7. Accesibilidad

- Contraste bosque sobre canvas: AAA (15.8:1).
- Contraste musgo oscuro sobre canvas: AA Large (3.6:1). Usar solo en textos grandes o como fondo de CTA.
- Contraste musgo medio sobre canvas: AA (4.8:1). Usar solo para texto secundario.
- Contraste oro sobre bosque: AAA (14.2:1).

---

## 8. Assets

- **Hero**: `IronHill-hero.jpg` (captura real del sitio).
- **HTML**: `IronHill-inspiration.html` (galeria completa con 7 modulos).
- **DESIGN.md**: este archivo.

---

*Generado automaticamente para Inspira101.*