Skip to content
DesignMunkDesignMunk Submit a site

Harwyn

harwyn.com.au
Think Modular. Think Harwyn.
Education WordPress Homepage Neuzeit Grotesk
Share Visit site
harwyn.com.au DESKTOP · 1440
Harwyn

AI Breakdown

Design export

---
version: alpha
name: Harwyn
description: Think Modular. Think Harwyn.
colors:
  primary: "#ffffff"
  secondary: "#8c8c8c"
  tertiary: "#758054"
  neutral: "#000000"
  border: "#374151"
  brand-umbra: "#1f1f1f"
  brand-silver-medal: "#d6d6d6"
  brand-lambent-lagoon: "#3c588f"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Neuzeit Grotesk
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Neuzeit Grotesk
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.06
    letterSpacing: -0.02em
  headline-sm:
    fontFamily: Neuzeit Grotesk
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: -0.024em
  headline-xs:
    fontFamily: Neuzeit Grotesk
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: -0.028em
  body-md:
    fontFamily: Neuzeit Grotesk
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 6px
  sm: 14px
  md: 28px
  lg: 60px
  xl: 180px
components:
  button-primary:
    textColor: "{colors.tertiary}"
    rounded: "{rounded.sm}"
    padding: 14px 20px
    height: 46px
  button-secondary:
    textColor: "{colors.tertiary}"
    rounded: "{rounded.sm}"
    padding: 14px 20px
    height: 46px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Harwyn: Dark Modular Canvas with Olive CTAs

## Overview

Harwyn's UI is a dark, typographic system for a premium modular-construction brand serving schools. The tone is confident, architectural and minimal, with generous negative space and short, high-impact headlines. Interactions are restrained; the olive accent is reserved for emphasis and calls to action. Density is medium: large type, calm spacing, and compact proof modules (logos, testimonials) stacked purposefully.

## Colors

- **primary (#ffffff):** Core text and headings on dark surfaces.
- **secondary (#8c8c8c):** Supporting copy, meta labels and subdued controls.
- **tertiary (#758054):** Accent for CTAs, active states and key highlights.
- **neutral (#000000):** Global background and hero canvas.
- **border (#374151):** Dividers, card outlines and subtle component framing.
- **brand-umbra (#1f1f1f):** Alternate dark surfaces and section panels.
- **brand-silver-medal (#d6d6d6):** Inactive dots, low-emphasis icons and subtle text.
- **brand-lambent-lagoon (#3c588f):** Occasional link highlight or infographic accent.
- **surface (#000000):** Default surface color (references neutral).
- **on-surface (#ffffff):** Text/icon color on dark surfaces (references primary).

## Typography

All typographic levels use Neuzeit Grotesk, a geometric neo-grotesque with tight tracking and clean shapes. It is self-hosted/custom (not Google Fonts). Agents should not rely on it being available; use close, obtainable substitutes: Montserrat, Barlow or Work Sans.
- Headline-lg (Neuzeit Grotesk 60px/1.1, 400, -0.01em): Primary hero statements and section openers.
- Headline-md (50px/1.06, 400, -0.02em): Secondary hero slides and major subheads.
- Headline-sm (42px/1.19, 400, -0.024em): Feature intros and testimonial lead-ins.
- Headline-xs (36px/1.19, 400, -0.028em): Card titles and compact section headers.
- Body-md (30px/1.5, 400): Short paragraphs and supporting lines; keep contrast high when using secondary gray on black.

## Layout

Spacing scales define rhythm: xs 6px for micro-gaps, sm 14px for control padding, md 28px as the base step for stacks and card insets, lg 60px for section gutters, xl 180px for hero top/bottom breathing room. Sections read as full-width dark bands with centered content blocks. Use md (28px) as the default vertical spacing between related elements; step up to lg (60px) between sections. Keep columns simple—one or three across—so the large type remains readable.

## Elevation & Depth

The system is mostly flat. Only a very light shadow is available (sm: rgba(0,0,0,0.05) 0 0 5px 2px) and should be used sparingly on hover. Hierarchy relies on contrast shifts (black vs #1f1f1f), crisp borders (#374151), and whitespace rather than heavy depth effects.

## Shapes

Two radii communicate touch vs container: sm 4px for controls and buttons, md 8px for larger containers like cards. Links remain square (0px) to keep typography-led areas feeling architectural and precise.

## Components

Buttons
- Primary Button: 46px height, 14px×20px padding, 4px radius, text color #758054 on dark surface. Use for main CTAs like "Enquire Now".
- Secondary Button: Same geometry and color as primary; deploy for secondary actions in the same context.
- Link Button: No radius, text color #ffffff; use inline in paragraphs and lists.

Card
- Background #000000, text #ffffff, 8px radius, 16px internal padding. Pair with a #374151 border where separation is needed.

### Hero Marquee
- Background #000000, Headline-lg 60px and Body-md 30px. Single primary CTA using #758054 for emphasis. Vertical padding ~180px.

### Product Category Tiles (3-up)
- Three links: Classrooms, Music Pods, Custom Spaces. Use Card spec with 28px internal spacing and Headline-xs 36px titles; optional #374151 border.

### Clients Logo Carousel
- Dark panel (#1f1f1f) with centered logos. Inactive indicators #d6d6d6; active state in #758054. Spacing: 60px top/bottom.

### Testimonial Slider
- Headline-sm 42px intro and Body-md 30px quote. Use #374151 border top/bottom to separate slides; indicators mirror clients carousel.

### Proof Stack (Feature Bullets)
- Multi-line list under "Award-winning design..." Set in Body-md 30px with #ffffff; avoid secondary gray for readability.

### Blog Teasers (3-up)
- Card container with 8px radius, 16px padding, titles in Headline-xs 36px, meta in secondary gray #8c8c8c.

### Sticky Enquire Now Button
- Prominent action in header; follow Primary Button styling (46px height, #758054 text on dark).

## Do's and Don'ts

- Do keep the page in dark mode with #000000 surfaces and #ffffff text for core content.
- Do reserve #758054 for primary actions and active states; overuse weakens the accent.
- Do use md (28px) spacing as the default stack and lg (60px) between major sections.
- Don't use heavy shadows; prefer borders (#374151) and tonal steps (#1f1f1f) for separation.
- Don't set small copy in #8c8c8c on black; keep body at 30px or switch to #ffffff.
- Don't introduce larger radii; stick to 4px for controls and 8px for containers.

## Agent Prompt Guide

Quick reference — text/background/border/accent:
- Text: #ffffff
- Background: #000000
- Border: #374151
- Accent: #758054

1) Build the hero
"Create a full-width hero on a #000000 background with 180px top/bottom padding. Use Montserrat as a Neuzeit Grotesk substitute. Set the headline at 60px/1.1, weight 400, letter-spacing -0.01em in #ffffff. Follow with a 30px/1.5 body line in #ffffff. Add a primary CTA button, 46px height, 14px×20px padding, 4px radius, text color #758054."

2) Three product tiles
"Make a 3-column row of cards on a #000000 surface. Each card: 8px radius, 16px padding, 1px border #374151, title at 36px/1.19 (Montserrat 400, -0.028em) in #ffffff, description at 30px/1.5 in #8c8c8c. Hover state: border changes to #758054."

3) Clients carousel
"Add a dark band #1f1f1f with 60px vertical padding. Center school logos. Pagination dots: inactive #d6d6d6, active #758054. No heavy shadows; keep everything flat."

4) Testimonial slide
"On #000000, place a 42px/1.19 headline and a 30px/1.5 quote in #ffffff. Separate slides with 1px dividers in #374151. Navigation dots follow inactive #d6d6d6 and active #758054."

5) Footer contact block
"Create a contact panel using #1f1f1f with 28px internal spacing. Links in #ffffff with hover #758054. Apply 8px radius to any input fields; buttons follow the 46px / 4px radius spec."

## Similar Brands

- Tesla: similarly sparse, dark canvases with restrained accent color; Tesla leans on imagery more heavily, whereas Harwyn leads with type.
- Foster + Partners: architectural minimalism and large type; F+P uses light mode more often and a broader grayscale.
- Apple Education: high-contrast typography and calm grids; Apple relies on photography/video hero rather than a text-only opener.
- WeWork: bold sans-serif headlines and dark sections; WeWork uses brighter accent colors and more lifestyle imagery.

More like this

Browse Education →
livetheresidency.com
The Residency Business
The Residency
Live and grow with ambitious builders through 3-month residencies.
Homepage · 7 days ago
brilliant.org
Brilliant AI
Brilliant
A world-class tutor for every home
Homepage · 7 days ago
hannahsenesh.org
Hannah Senesh Education
Hannah Senesh
Live with conviction—open, inclusive Jewish day school for K-8.
Homepage · 7 days ago
inspire360.com
Inspire 360 AI
Inspire 360
Elevating the industry together
Homepage · 1 week ago