{
  "id": "heylow",
  "title": "Heylow",
  "url": "https://heylow.world",
  "tags": [
    "Agency",
    "Clean",
    "Bold Typography",
    "Premium",
    "Calm"
  ],
  "colors": {
    "principle": "Dark, warm, earthy monochromatic palette with high contrast text for clarity and focus.",
    "bg": "#0f0e0c",
    "bgSoft": null,
    "bgQuiet": null,
    "ink": "#faf8f3",
    "inkSoft": "#a8a3a1",
    "muted": "#4a4643",
    "mutedSoft": null,
    "accent": null,
    "line": "rgba(74, 70, 67, 1.0)"
  },
  "typography": {
    "rules": [
      "Use tight tracking on large display text for a refined, modern feel.",
      "Maintain generous line-height (1.6) for body text to ensure readability.",
      "Navigation and small labels are uppercase with wide letter-spacing.",
      "All typography maintains a consistent weight of 400 for a calm, unified look."
    ],
    "scaleUses": [
      "Main logo/wordmark",
      "Large headings",
      "Main body copy and descriptive text",
      "Small labels, navigation, and metadata"
    ],
    "display": "humanist-sans",
    "body": "humanist-sans",
    "mono": null,
    "scale": [
      {
        "token": "display",
        "size": 160,
        "lh": 0.85,
        "weight": 400,
        "ls": "-2px"
      },
      {
        "token": "h1",
        "size": 48,
        "lh": 1.1,
        "weight": 400,
        "ls": "-1px"
      },
      {
        "token": "body",
        "size": 20,
        "lh": 1.6,
        "weight": 400,
        "ls": "-0.25px"
      },
      {
        "token": "caption",
        "size": 12,
        "lh": 1.4,
        "weight": 400,
        "ls": "2px"
      }
    ]
  },
  "spacing": {
    "rhythm": "A consistent 4px base grid is used for all spacing, providing a structured and predictable layout rhythm.",
    "base": 4,
    "scale": [
      4,
      8,
      16,
      24,
      32,
      48,
      64,
      96
    ]
  },
  "surfaces": {
    "shadows": [],
    "borders": "Thin, 1px borders in muted earth tones (#4a4643 or #faf8f3) are used to structure the layout and define interactive zones without heavy visual weight.",
    "radius": {
      "sm": 4,
      "md": 8,
      "lg": 12,
      "pill": 999
    }
  },
  "layout": {
    "skeleton": "A strong, visible grid structure is revealed through dashed border lines, emphasizing architectural precision.",
    "container": 1280,
    "paragraph": 680,
    "columns": 12,
    "gutter": 24,
    "breakpoints": [
      768,
      1024
    ]
  },
  "motion": {
    "patterns": [
      "Subtle opacity transitions on hover.",
      "Smooth fade-in/out for menu interactions.",
      "Minimal, purposeful motion that doesn't distract from the content."
    ],
    "durations": {
      "micro": 200,
      "small": 200,
      "medium": 500
    },
    "easing": "cubic-bezier(0.4, 0.0, 0.2, 1)"
  },
  "identity": {
    "keywords": [
      "design",
      "code",
      "partner",
      "purpose-led",
      "low-carbon",
      "built to last"
    ],
    "analogy": "A high-end, purpose-driven creative studio that values clarity, elegance, and sustainability in both design and digital execution.",
    "oneLiner": "A design & code partner for purpose-led organisations, helping them to show up as considered as their work."
  },
  "components": {
    "button": "Minimalist text-based buttons with uppercase labels and generous padding, defined by subtle borders.",
    "card": "Content sections are defined by thin borders and generous whitespace rather than elevated cards.",
    "chip": "Small, uppercase text labels used for categorization or metadata.",
    "input": "Clean, minimal input fields with bottom borders.",
    "hero": "A massive, bold typographic wordmark dominates the viewport, paired with descriptive copy."
  },
  "interaction": {
    "hover": "Subtle opacity change to indicate interactivity.",
    "click": "Immediate feedback with minimal animation.",
    "transition": "All interactive elements use a smooth 0.2s ease-in-out transition.",
    "keyboard": "Standard tab navigation with visible focus states."
  },
  "voice": {
    "tone": "Professional, considered, and thoughtful.",
    "headlineStyle": "Direct, concise, and impactful.",
    "ctaStyle": "Understated, action-oriented, and often presented as a simple text link.",
    "avoid": [
      "Avoid loud, aggressive, or overly energetic language.",
      "Avoid cluttering the interface with too many elements.",
      "Avoid using bright, saturated accent colors that break the calm palette."
    ]
  },
  "donts": [
    "Don't use bright, saturated accent colors — screenshot shows a monochromatic, earthy palette.",
    "Don't use decorative or script fonts — screenshot shows a clean, humanist sans-serif.",
    "Don't use heavy drop shadows or gradients — screenshot shows flat surfaces with thin borders.",
    "Don't use uppercase text for body copy — screenshot shows uppercase only for small labels and navigation.",
    "Don't use thick, heavy borders — screenshot shows thin 1px lines in muted tones.",
    "Don't use complex, busy layouts — screenshot shows a spacious, grid-based structure with ample whitespace."
  ],
  "systemPrompt": "This is a portfolio website for a design & code partner agency called Heylow. The design is characterized by a calm, sophisticated, and considered aesthetic. Key colors are a deep, warm black (#0f0e0c) background with light, warm off-white text (#faf8f3) and muted gray accents (#a8a3a1, #4a4643). The typography uses a clean, humanist sans-serif font family at various weights, with a strong focus on bold, oversized display type for the wordmark. The layout is spacious and grid-based, with visible structural lines. Critical donts: Do not use bright, saturated accent colors; do not use decorative or script fonts; do not clutter the interface with unnecessary elements or heavy visual effects; do not use uppercase text for body copy; do not use heavy drop shadows; do not use complex, busy layouts."
}