Skip to content
DesignMunkDesignMunk Submit a site

Hackney Church

hackney.church
Hope for East London—Hackney Church welcomes you with music and events.
Entertainment Event WordPress Homepage Ginto
Share Visit site
hackney.church DESKTOP · 1440
Hackney Church

AI Breakdown

Design export

---
version: alpha
name: Hackney Church
description: Hope for East London—Hackney Church welcomes you with music and events.
colors:
  primary: "#ffffff"
  secondary: "#d6d7f0"
  tertiary: "#007bff"
  neutral: "#ff0e40"
  border: "#374151"
  brand-noble-black: "#211e25"
  brand-aurora-pink: "#ee84a4"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: -apple-system
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.19
  headline-md:
    fontFamily: GT Alpina
    fontSize: 51px
    fontWeight: 300
    lineHeight: 1.69
  headline-sm:
    fontFamily: -apple-system
    fontSize: 36px
    fontWeight: 300
    lineHeight: 1.19
  headline-xs:
    fontFamily: GT Alpina
    fontSize: 25px
    fontWeight: 300
    lineHeight: 1.72
  body-md:
    fontFamily: Ginto Normal
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.98
rounded:
  sm: 8px
spacing:
  xs: 6px
  sm: 16px
  md: 30px
  lg: 40px
  xl: 84px
components:
  button-primary:
    textColor: "{colors.primary}"
    rounded: 0px
    padding: 9px 27px
    height: 58px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: 0px
    padding: 9px 27px
    height: 58px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Hackney Church: Arched Gig Posters on Deep Black

## Overview

A dark, performance-first system designed for a church-turned-venue. Tone is dramatic, contemporary and minimal: big type, heavy contrast and minimal chrome let posters and photography sell events. Audience spans concert-goers and the church community; density is medium with generous macro spacing for sections and tight micro spacing inside cards.

## Colors

- **primary (#ffffff):** Core text and icons on dark backgrounds; default for headings and links.
- **secondary (#d6d7f0):** Muted supporting text on dark, such as dates, prices or footnotes.
- **tertiary (#007bff):** Optional highlight for links or states where blue is preferable to red.
- **neutral (#ff0e40):** Vivid accent red for emphasis, badges, and limited promotional surfaces.
- **border (#374151):** Cool slate dividers, hairlines and input rules on dark.
- **brand-noble-black (#211e25):** Primary page background for dark mode sections.
- **brand-aurora-pink (#ee84a4):** Secondary accent for hovers or soft highlights.
- **surface ({colors.neutral} → #ff0e40):** Accent surface used sparingly for callouts; pair with on-surface.
- **on-surface ({colors.primary} → #ffffff):** Text and icons that sit on the accent surface.

## Typography

- Headline LG (-apple-system, 72px/1.19, 700): Primary page titles. System sans renders as SF on macOS/iOS, Segoe UI on Windows and Roboto on Android.
- Headline MD (GT Alpina, 51px/1.69, 300): Expressive display serif for section intros and marquee lines. Proprietary/self-hosted; use substitutes when unavailable: Fraunces, Spectral, or Cormorant Garamond (Google) for similar contrast and warmth.
- Headline SM (-apple-system, 36px/1.19, 300): Secondary headings and modal titles where a sans keeps things utilitarian.
- Headline XS (GT Alpina, 25px/1.72, 300): Small display lines such as "What's On" labels.
- Body MD (Ginto Normal, 18px/1.98, 300): Running copy, meta (dates, prices) and navigation. Proprietary/self-hosted; substitute Inter, Manrope, or Plus Jakarta Sans (Google) for a clean, contemporary sans.
- System stacks: When -apple-system is not available, fall back to platform defaults (system-ui, Segoe UI, Roboto).

## Layout

Spacing runs on a compact-to-generous scale: 6, 16, 30, 40 and 84px. Use xl (84px) to separate major sections (hero, listings, footer). Use md (30px) or lg (40px) as row gutters in grids and carousels; sm (16px) for card internal padding and link groups; xs (6px) for tight label–meta gaps. Lists such as event grids work well as fluid rows that collapse from 4–5 across on desktop to single-column on mobile, keeping consistent gutters from the scale.

## Elevation & Depth

Shadows are disabled. Depth is conveyed with contrast (white on #211e25), crisp borders in #374151, tonal shifts across imagery, and generous whitespace. Emphasize focus with color and weight rather than blur or glow. Cards or banners that need lift should move to the accent surface (#ff0e40) with on-surface text (#ffffff) instead of adding drop shadows.

## Shapes

A square, utilitarian language: buttons are 0px radius, cards use a soft 8px radius (`rounded.sm`). Event imagery frequently uses an arched mask for character; keep containers squared so the arch remains a photographic treatment, not a global radius change.

## Components

Buttons
- Primary: Text-only white (#ffffff), 0px radius, 58px height, 9px × 27px padding. Use for main CTAs on dark.
- Secondary: Same metrics as primary; reserve for lower-priority actions.
- Link Button: White text, 0px radius; inline with copy.

Card
- Background #ff0e40, text #ffffff, 8px radius, 16px padding. Use sparingly for promotional or alert content.

### Event Poster Carousel
- Horizontal row of poster tiles with arched image masks. Tile caption: artist name in white using Headline XS (25px GT Alpina) and a small date line in Body MD (18px) with `secondary` color for tone. Background #211e25; item gap md (30px). Prev/Next affordances sit outside the row.

### "What's On" Grid
- Responsive grid of event tiles. Titles in Headline XS (25px GT Alpina), meta (venue, price) in Body MD 18px. Use border hairlines (#374151) or md (30px) gaps to separate rows.

### Date & Price Meta Row
- Inline list beneath titles set in Body MD 18px with `secondary` (#d6d7f0). Use xs (6px) spacers between elements; avoid uppercase for prices.

### Newsletter Signup Banner
- Dark background #211e25 with white copy. Short lead set in Headline XS (25px GT Alpina), supporting line in Body MD. CTA uses Primary button metrics; consider placing on the accent surface for prominence.

### Global Top Navigation
- Minimal text links in Body MD 18px, white by default, hover in `neutral` (#ff0e40) or `tertiary` (#007bff). Horizontal spacing sm (16px)–md (30px).

### Footer Directory
- Multi-column link groups separated by a top border (#374151). Section labels in Headline XS (25px); links in Body MD with sm (16px) vertical rhythm.

### Subscription Modal ("All done!")
- Centered panel on #211e25. Title in Headline SM (36px). Content set to Body MD with a link-style dismiss action; maintain 8px radius if a container is used.

## Do's and Don'ts

- Do use #211e25 as the primary background with #ffffff text for all core content.
- Do reserve #ff0e40 (neutral) and #ee84a4 for accents, badges and limited surfaces; overuse will overwhelm photography.
- Do keep buttons square (0px) and cards at 8px radius; the arch belongs to imagery, not containers.
- Don't add drop shadows; separate with #374151 borders or spacing.
- Don't mix date formats or casing within event tiles; use Body MD 18px, `secondary` color for all meta.
- Don't cram tiles; maintain md (30px)–lg (40px) gaps for legibility.

## Agent Prompt Guide

Quick color reference
- Text: #ffffff
- Background: #211e25
- Border: #374151
- Accent: #ff0e40

1) Build the hero
"Create a full-width dark hero with background #211e25. Center an H1 'HACKNEY CHURCH' set in -apple-system at 72px, weight 700, line-height 1.19, color #ffffff. Add a subhead 'LIVE MUSIC AND EVENTS' in GT Alpina at 25px, weight 300, line-height 1.72, color #ffffff. Use xl spacing (84px) above and below."

2) Poster carousel
"Add a horizontal carousel on #211e25 with item gap 30px (md). Each item is an arched image with a caption: artist name in GT Alpina 25px/1.72, weight 300, color #ffffff; date line in Ginto Normal 18px/1.98, color #d6d7f0. No shadows; use spacing only."

3) 'What's On' grid
"Render a responsive grid of 4 columns (desktop) collapsing to 2/1. Use 30px (md) gutters. Each tile: title in GT Alpina 25px, meta in Ginto Normal 18px, all on background #211e25 with an optional top divider #374151. Maintain outer section spacing 84px."

4) Newsletter banner with CTA
"Insert a signup band on background #211e25. Lead line in GT Alpina 25px, supporting copy in Ginto Normal 18px. Primary CTA uses a text-only button: color #ffffff, height 58px, padding 9px 27px, radius 0px; hover color #ff0e40."

5) Footer
"Add a footer with a top border #374151. Section labels in GT Alpina 25px; links in Ginto Normal 18px with 16px vertical spacing. Keep everything on #211e25 with #ffffff text."

## Similar Brands

- Resident Advisor: Dark, high-contrast event listings; RA is denser and more utilitarian, while Hackney Church leans on expressive poster imagery.
- Roundhouse: Bold venue site with strong red accents; Roundhouse uses heavier brand color blocks, this system keeps accents sparing.
- Royal Albert Hall: Large, image-led listings; more traditional serif typography and brighter surfaces than this all-dark approach.
- Barbican: Arts centre with modular grids; Barbican is lighter and typographically stricter, while Hackney Church favours dramatic contrast and posters.

More like this

Browse Entertainment →
joinpause.co
Pause Event
Pause
Meet one new Londoner each week—face-to-face, with no phone distractions.
Homepage · 4 days ago
rigakvest.com
Rigakvest Entertainment
Rigakvest
Онлайн квест по старому городу Риги!
Homepage · 2 weeks ago
superai.com
SuperAI AI
SuperAI
The world’s premier AI event
Homepage · 4 weeks ago
dg-cinema.com
DG Cinema Creative
DG Cinema
We are creativity, courage, future—redefining cinematic storytelling.
Homepage · 4 weeks ago