“White space is not a void, but a structural element—it defines rhythm, hierarchy, and calm.”
Guiding principle
Brand foundations — 001
Visual Identity & Architectural Principles
Assets & replication
Master files & how to match the type
Below is the editable Affinity source for the wordmark, plus plain-language settings that correspond to the website’s CSS (including what Tailwind utility classes mean in real typography terms). Use the same variable font files as Google Fonts where possible.
Affinity source
Native .af — open in Affinity Designer or Publisher.
Font families
- Newsreader — display and editorial headings, the wordmark, and large statements. Loaded from Google Fonts as a variable font: weight roughly 200–800, optical size 6–72, with upright and true italic. Browsers turn on automatic optical sizing so outline weight matches the size on screen; in Affinity, set the optical size axis close to your point size (for a 30px-tall header wordmark, use about 30 on that axis).
- Manrope — interface and body copy site-wide (navigation labels, buttons, paragraphs, form fields). Weights 300–700 are available; body text defaults to normal weight unless a component specifies otherwise.
Website header wordmark (“Endland” home link)
This is the small lock-up in the top bar of the public site — not the oversized specimen further down this page.
- Typeface
- Newsreader, italic (not faux slant)
- Weight
- 400 — regular (no bold class in code)
- Size
- 30px — CSS 1.875rem (Tailwind text-3xl)
- Letter-spacing
- Slightly tight: -0.025em (Tailwind tracking-tight). In Affinity: about -25‰ tracking.
- Line height
- Bundled with text-3xl: about 1.2 (36px line box on 30px type)
- Colour
- #061B0E
Homepage hero headline
Main line uses regular Newsreader; the words “Shopify” and “SparkLayer” are set in italic inside the same block.
- Typeface
- Newsreader — roman with italic on selected words
- Weight
- 400 — regular
- Size
- Responsive: 48px on small screens, 96px from medium breakpoint up (Tailwind text-5xl and md:text-8xl)
- Line height
- Very tight: 0.9 (Tailwind leading-[0.9])
- Letter-spacing
- -0.025em (Tailwind tracking-tight)
- Colour
- #061B0E
Hero supporting line
- Typeface
- Manrope (body)
- Size
- 18px (Tailwind text-lg)
- Line height
- Relaxed (Tailwind leading-relaxed ≈ 1.625)
- Colour
- #434843
Hero link (“Discuss your project”)
- Typeface
- Newsreader italic
- Size
- 24px default, same at md (Tailwind text-2xl)
- Colour
- #061B0E
Section titles (e.g. Work, Services)
- Typeface
- Newsreader
- Size
- 48px default, 60px on medium+ (Tailwind text-5xl / md:text-6xl)
- Colour
- #061B0E
Eyebrows & micro-labels
Small caps lines such as “Selected Archive”, “Expertise”, or colour names on this page.
- Typeface
- Manrope (inherits site body font)
- Size
- 10px (Tailwind text-[10px])
- Case & spacing
- All caps (Tailwind uppercase). Letter-spacing about 0.16em–0.28em depending on block (wider on short labels like “Brand foundations”)
- Colour
- #434843
Header navigation & primary buttons
- Typeface
- Manrope
- Size
- 10px
- Case & spacing
- All caps; letter-spacing 0.18em (Tailwind tracking-[0.18em])
- Nav colour
- #434843, hover #061B0E
- Solid button
- Same type as nav; fill #061B0E, label white
Site body default
- Typeface
- Manrope
- Default text colour
- #1B1C1A
- Page background
- #FAF9F5
Footer wordmark (“ENDLAND”)
- Typeface
- Newsreader, roman, all caps in markup
- Size
- 20px (Tailwind text-xl)
- Colour
- #061B0E
This page — large “Endland” specimen
The display wordmark below is for brand presentation, not the live header.
- Typeface
- Newsreader, italic
- Weight
- 600 — semibold (Tailwind font-semibold)
- Size
- Fluid between about 56px and 120px by viewport (CSS clamp — Tailwind arbitrary size)
- Line height
- 1 (Tailwind leading-none)
- Letter-spacing
- -0.025em (Tailwind tracking-tight)
This page — guidelines title
- Typeface
- Newsreader
- Size
- Scales with viewport: about 36px–60px (CSS clamp)
- Line height
- 1.12 (Tailwind leading-[1.12])
- Letter-spacing
- -0.025em (Tailwind tracking-tight)
Common Tailwind → plain language
- tracking-tight — tighten letter-spacing by 0.025em
- tracking-normal — default spacing (0)
- uppercase — transform text to all capitals
- leading-none — line height multiplier 1 (lines sit tight)
- leading-relaxed — line height about 1.625 for comfortable reading
- font-medium — Manrope weight 500
- font-semibold — weight 600
- antialiased — smoother font smoothing on macOS-style displays
The primary wordmark
Logotype anatomy
Endland
Newsreader semi-bold italic
Optical 120 pt
The primary wordmark uses a customised cut of Newsreader: high-contrast serifs, sharp terminals, and a heritage publishing feel. Allow generous clear space; avoid shadows, gradients, or distortions. Preferred colour: Racing Green.
Type spec 01: Newsreader
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Type spec 02: Manrope
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Colour system
Core palette
#061B0E
Racing Green
Primary brand core
#FAF9F5
Parchment
The editorial canvas
#380003
Oxblood
Accent & emphasis
Mood reflection — 01
Heritage depth meets digital precision.
Grid system
A 12-column editorial grid with controlled asymmetry. Eye guidance through hierarchy, not repetition—layouts feel composed rather than templated.
Tonal transitions
Avoid harsh dividers. Use subtle tonal shifts—Parchment toward deeper green—to maintain rhythm down the page without decorative noise.