Straitheath / Identity System / v1.0

BRAND
GUIDELINES

The complete reference for how Straitheath looks, sounds, and moves. Every decision here is derived from the manifesto — not from convention.

01
MARK SYSTEM

THE MARK

Koncept

Heath är de två solida blocken — marken, landmassan, fundamentet. Strait är det exakta gapet emellan dem — passagen, öppningen, rörelsen. Märket existerar i det negativa rummet.

Designprincip

Två guldlinjer markerar passagens ingång och utgång — de är systemets koordinat. Märket läser inte som en bokstav. Det läser som en plats.

STRAITHEATH
Systems · Structure · Signal
STRAITHEATHPrimary · Dark
STRAITHEATHPrimary · Light
STRAITHEATH
Mark Isolated · Dark
STRAITHEATH
Mark Isolated · Light
Scale · 16 / 24 / 32 / 48 / 64 / 96px
Clearspace — minsta luft runt märket
1× märkets höjd
Minst 1× märkets höjd på alla sidor
Användningsregler
✓ Gör
Monokrom — svart på ljus
✓ Gör
Monokrom — vit på mörk
✓ Gör
Gold accent intakt
✗ Gör inte
Rotera aldrig märket
✗ Gör inte
Ändra aldrig proportioner
✗ Gör inte
Lägg aldrig till effekter
02
COLOUR SYSTEM

FÄRGSYSTEM

Ground
#06060A
Primär bakgrund. Används alltid som bas.
Primary
#FFFFFF
Text, märke på mörk bakgrund.
Accent
#C8B478
Enda tillåtna accentfärg. Används sparsamt.
Light BG
#F2EDE4
Varm bakgrund för ljus variant.
Subtle
#1A1A20
Sekundär bakgrundsnivå — kort, panel, card.
Muted
#3A3830
Borders, dividers. Aldrig text.
Accent-regel

Gold (#C8B478) används aldrig som bakgrundsfärg. Aldrig fyllning på stora ytor. Alltid som markör, linje, eller enskilt textelement.

Kontrastregel

Text på Ground: #FFFFFF eller #C8B478 enbart. Text på Light BG: #06060A enbart. Inga grå mellantoner på text som bär information.

03
TYPOGRAPHY

TYPOGRAFI

Display / Headlines
Bebas Neue
Alltid versaler. Aldrig löptext. Spatiering: 0.02–0.15em beroende på storlek.
STRAITHEATH
Body / Editorial
Cormorant Garamond
Alltid kursiv i display-sammanhang. Normal vikt i löptext. Ger det intellektuella djupet.
Clarity over speed. Durability over novelty.
UI / Labels / Metadata
IBM Plex Mono
Alltid versaler i labels. Spatiering: 0.15–0.3em. Aldrig i stor löptext.
SYSTEM · VERSION · 01
Typografisk skala
Display
clamp(72px, 10vw, 140px)
0.02em
Hero headlines
H1
clamp(48px, 6vw, 80px)
0.04em
Section titles
H2
clamp(28px, 3vw, 42px)
0.06em
Card titles
Lead
clamp(18px, 2vw, 26px)
0
Ingress / lead copy
Body
16px
0
Löptext
Label
9–11px
0.2em
UI-labels, metadata
04
SPACING

SPACE & LAYOUT

Rutnät

Baserat på ett 8px-grid. Alla avstånd och dimensioner är multiplar av 8. Det ger konsekvens utan att begränsa komposition. Undantag: 1px borders och linjer — dessa är alltid exakt 1px.

Generositet

Straitheath andas. Sidor med för lite luft kompromissar med principen om kontrollerad tyngd. När du är osäker — lägg till mer rymd, inte mer innehåll.

8px-skalan
4px
Micro — ikon-padding, gap inom komponent
8px
Micro — ikon-padding, gap inom komponent
16px
Small — inre padding, kompakta sektioner
24px
Small — inre padding, kompakta sektioner
32px
Medium — standard komponentavstånd
48px
Medium — standard komponentavstånd
64px
Large — sektionsavstånd, heromarginaler
96px
Large — sektionsavstånd, heromarginaler
128px
Large — sektionsavstånd, heromarginaler
Layoutprinciper
1px separator

Borders och dividers är alltid exakt 1px. Aldrig tjockare — det är en linje, inte en vägg.

Full-bleed grid

Grids sträcker sig till sidkanten. Innehåll har padding, inte containern.

Asymmetri

Perfekt symmetri undviks. Det skapar rörelse och riktar blicken utan att det märks.

05
MOTION

RÖRELSE

Rörelse i Straitheath är alltid kontrollerad och målmedveten. Den förstärker arkitekturen — avslöjar, inte underhåller. Om en animation kan tas bort utan att något förloras, ta bort den.

Easing
cubic-bezier(0.16, 1, 0.3, 1)
Snabb ut, mjuk in. Aldrig linjär. Aldrig bounce.
Duration
0.4s – 1.2s
Kortare för micro-interactions. Längre för page-transitions.
Trigger
Enter viewport / Hover / Load
Aldrig autoplay utan syfte. Aldrig loop utan mening.
Stagger
0.08s – 0.15s delay per element
Element rör sig efter varandra, inte simultant.
Godkända rörelsemönster
✓ FadeUp on scroll
opacity 0→1 + translateY 24px→0
✓ DrawLine
scaleX 0→1 från vänster, transformOrigin: left
✓ Hover border glow
border-color transition 0.3s
✓ Staggered reveal
animation-delay per element, 0.1s steg
✗ Parallax scroll
Skapar för mycket rörelse, distraherar
✗ Infinite loop
Undantag: ticker-element med låg hastighet
06
VOICE

TONALITET

Deliberate
Aldrig reaktiv

Varje ord är valt. Varje mening har ett syfte. Om en mening kan tas bort utan att meningen går förlorad — ta bort den.

Precise
Aldrig vag

Säg exakt vad du menar. Inga hedge-ord, inga kvalificerare. 'Strukturerat system' inte 'typ av ramverk'.

Calm
Aldrig urgent

Vi skapar aldrig FOMO. Vi skapar aldrig brådska. Tonen är alltid som om vi har tid — för vi har byggt för decennier.

Authoritative
Aldrig arrogant

Vi vet vad vi gör och varför. Vi förklarar vår logik. Vi behöver aldrig hävda vår auktoritet — den framgår av arbetet.

Tonexempel — Undvik / Föredra
✗ Undvik
Kom med och bygg något amazing!
✓ Föredra
Vi bygger infrastruktur som håller.
✗ Undvik
Vår cutting-edge platform förändrar allt!
✓ Föredra
Straitheath är byggt för decennier, inte kvartal.
✗ Undvik
Gå med nu — begränsat antal platser!!!
✓ Föredra
Systemet öppnas när det är redo.
✗ Undvik
Super excited to share this with you guys!
✓ Föredra
Vi publicerar när arbetet talar för sig självt.