Sjöklart — Designspråk

01

Papper och bläck

Varmt sjökortspapper och djup marinblå. Det mesta av ytan är lugn, så att det viktiga syns.

02

Färg betyder något

Rött är babord, grönt styrbord, gult ett märke. Vi lånar sjöns egna signaler och slösar inte bort dem.

03

Exakt, inte stelt

Regelnummer, bäring och avstånd i mono. Rubriker i en varm serif. Precision som känns mänsklig.

04

Lek i detaljerna

Lanternor i ordbilden, djupsiffror i marginalen, sjökortets ram runt bilderna. Aldrig tecknat, aldrig barnsligt.

01 · Ordbild

Två prickar, två lanternor.

Sjöklart sätts i Fraunces, en varm redaktionell serif med mjuka former. Prickarna över ö:et är typsnittets egna — färgade som sidoljusen: rött åt babord, grönt åt styrbord. Den som kan reglerna ser det direkt. Den som inte kan dem lär sig.

Sjoklart Primär · Fraunces 500 · opsz 144 · SOFT 50 · −3% spärrning

Sjoklart På bläck

Sjoklart Enfärgad · på hav

Sjoklart Sjoklart Sjoklart

Minsta storlek 16 px

o

Monogram · favicon och appikon

Jämförelse: andra redaktionella serifer

Samma konstruktion i fyra typsnitt. Fraunces valdes för att den är varm utan att vara gullig och har ett ö med runda, tydliga prickar som bär färgen.

Sjoklart FrauncesVald · varm, mjuk, tydliga prickar

Sjoklart Instrument SerifElegant, smal · lite modemagasin

Sjoklart NewsreaderMest korrekt · minst personlighet

Sjoklart GloockHög kontrast · mer affisch än app

02 · Färg

Sjökortets färger. Sjöns signaler.

Grunden är ett svenskt sjökort: vitt djupvatten, blått grundvatten, gult land. Ovanpå det använder vi sjöns egna signalfärger — och bara för det de betyder.

Papper & bläck

Papper#F4F0E6 · --paper

Papper 2#EBE5D6 · --paper-2

Kort#FBFAF6 · --card

Bläck#0C2230 · --ink

Bläck 2#3A4C57 · --ink-2

Bläck 3#6D7B83 · --ink-3

Hav & sjökort

Hav#2A6084 · --sea

Djuphav#17354F · --sea-deep

Grund#D5E3EC · --shoal

Grund 2#BAD0DE · --shoal-2

Land#ECDCAB · --land

Signal — reserverade

Babord#C7372F · --port

Styrbord#1D7A4B · --stbd

Märke#F1B517 · --mark

Regel: rött och grönt betyder alltid babord och styrbord. När de visar fel och rätt i en bedömning står de aldrig ensamma — alltid med ✕ eller ✓. Gult används för märken, fokus och det som är nästan rätt.

Ungefärliga proportioner på en sida

Papper 62%Bläck 24%HavSignal

03 · Typografi

Tre röster, tre uppgifter.

En serif som berättar, en grotesk som förklarar, en mono som mäter. Alla tre är fria Google Fonts och fungerar i appen via expo-font.

Rubrik · ordbild Aö

Fraunces

Variabel: opsz, vikt och SOFT. Kursiv i havsblått för betoning.

Brödtext · gränssnitt Aö

Schibsted Grotesk

Ritad för skandinavisk nyhetsmedia. Klar i små storlekar, vänlig i stora.

Data · regler · etiketter 15°

DM Mono

Regelnummer, bäring, avstånd och etiketter i versaler med luft.

DisplayFraunces 400 · 48–112 px · −3.5%Vem väjer?

H1Fraunces 400 · 40–76 px · −3%Korsande kurser

H3Fraunces 400 · 22–28 px · opsz 48Väj för den du har på styrbord.

IngressSchibsted 400 · 18–21 px · Bläck 2Den som har det andra fartyget på sin styrbordssida ska väja — och undvika att gå förbi framför det.

BrödtextSchibsted 400 · 16–17 px · 1.55Ett motorfartyg kommer från styrbord. Ni är på kollisionskurs. Du kör motorbåt. Vad gör du?

EtikettDM Mono 500 · 11–12 px · versaler · +8%COLREGS · Regel 15 · CPA 0,29 M

04 · Komponenter

Byggstenar för appen och webben.

Rundade men inte bubbliga. Hårfina linjer i stället för skuggor där det går. Knappar är hela piller; kort har 22 px hörn.

Knappar

Starta → Spela igen Nästa Detaljer

Knappar på bläck

Fortsätt öva → Pausa

Roder — de tre besluten. Färgen visar sidan, inte svaret.

Etiketter

1 / 3 Korsande kurser Först ut Prov ✓ Rätt ✕ Kollision

Fält

Regelkort — efter varje möte

COLREGS · Regel 14Rätt

Mötande: båda girar styrbord

När två motorfartyg möts på motsatta kurser girar båda åt styrbord, så att de passerar babord mot babord.

Bedömning — kriterier

✓Rätt manöverDu gjorde det regeln krävde.STB
~Tydligt synligGiren syntes som avsikt, men inte som en tydlig kursändring.+12°
✕Säkert avståndBåtarna kom för nära.0,04 M

Sjökortsram — för kartor, bilder och diagram

05 · Sjökort

Ett bildspråk lånat från navigatören.

Diagram och illustrationer ritas som ett sjökort med plottade kurser: platta, exakta och lugna. 3D är för spelet; 2D är för att förklara.

FartygDu är bläck. Andra är papper. Lanternorna sitter rätt.

SpårStreckat bläck för dig, prickat hav för andra.

KollisionsriskKurslinjer möts i en streckad röd ring.

Närmaste passageMätt, inte uppskattat. Grönt när det räcker.

Djup & kurvorKursiva djupsiffror och tunna djupkurvor som dekor.

KompassrosOrientering, alltid med nord uppåt.

LandSjökortsgult med en mörkare strandlinje.

RamSjökortets graderade kant ramar in det viktiga.

06 · Appen

Samma språk, i fickan.

Papper för menyer och genomgångar, havet för spelet. Gränssnittet ligger som frostat papper ovanpå 3D-scenen och tar aldrig över den.

SjoklartSV

Förarintyg · Modul 1

Väjningsregler

62 % KLART · 8 AV 13

14Mötande✓ 3/3

15Korsande kurser✓ 3/3

13Upphinnande1/2

18Motor mot segel0/3

Fortsätt öva →

StartPapper, en modul i fokus

Möte 04 / 12 250°

Vem väjer? Ett motorfartyg korsar från styrbord.

Babord Håll kurs Styrbord

BeslutFrostat papper över havet

COLREGS · Regel 15✓ Rätt

Korsande: väj åt styrbord

Den som har det andra fartyget på sin styrbordssida ska väja — och undvika att gå förbi framför det.

✓Rätt manöverSTB
✓I god tid0,6 M
~Tydligt synlig+12°
✓Säkert avstånd0,21 M

Nästa möte →

GenomgångRegeln, och hur det gick

07 · Ton

Som en bra skeppare.

Lugn, kort och exakt. Vi säger vad som gäller och varför, och vi använder sjöns ord — men förklarar dem första gången. Vi skäller aldrig och vi överdriver aldrig.

✓ Så här

”Gira styrbord.”
”Du skulle ha väjt. Det andra fartyget var på din styrbordssida.”
”Rätt idé — men giren var inte tydlig nog.”
”COLREGS · Regel 15”

✕ Inte så här

”Sväng höger!”
”FEL! Försök igen 😬”
”Grattis, du är en riktig sjöbjörn! 🏴‍☠️”
”Enligt gällande regelverk…”

Ett sjökort, satt som en bra tidning.