Oliver Fjordside — Brandguide 1.2.1

01 — Fundament

Håndværk der er til at læse.

Brandet skal kunne bære fire ting på én gang: designfaget, illustrationen, undervisningen og forfatterskabet. Derfor er systemet bygget som en ramme, ikke som en dekoration — en rolig papirflade, én serif med karakter, én neutral sans til det tekniske, og en enkelt accent der markerer hvad der er vigtigt.

Rolig

Meget luft, få elementer. Aldrig mere end én accent i et blik.

Præcis

Alt sidder på et 12-kolonne grid med 8px-trin. Kanter, ikke skygger.

Håndværksmæssig

Materialer frem for effekter: papirtone, tryksværte, tegnet streg.

02 — Logotype

Oliver Fjordside

O. Fjordside

Kompakt — sidefod, visitkort, mail-signatur

Kun mærke — avatar, favicon, stempel

Oliver Fjordside

Negativ — slides, fotos, omslag

Gør

Frizone omkring logoet på mindst halvdelen af mærkets bredde. Mærket står altid til venstre for navnet, optisk centreret på x-højden. På sværtebaggrund bruges papirvarianten, hvis terracottaen mister kontrast.

Gør ikke

Mærket tegnes ikke om, får ikke outline, skygge eller gradient, og roteres ikke. Det omfarves kun til paletten (terracotta, papir, sværte) og sættes aldrig under 20px.

03 — Farver

Papir

{{ paper }}
Flader, baggrunde

Kalk

oklch(.93 .008 75)
Sekundære felter

Tryksværte

oklch(.24 .012 60)
Tekst, streger

Accent

{{ accent }}
Mærke, links, fremhævning

Fjord

oklch(.58 .11 205)
Kun diagrammer og data

Reglen er 90/8/2: papir og kalk fylder fladen, tryksværte bærer teksten, accenten fylder aldrig mere end nogle få procent. Fjord er en hjælpefarve til grafer — den optræder ikke i identiteten.

04 — Typografi

Display & brødtekst

Platypi

ABCDEFGHIJKLM
abcdefghijklm 0123 æøå

Overskrifter 300–500, aldrig under 300. Negativ tracking på store grader (−0.02em), normal fra 24px og ned. Ordmærket er en undtagelse: vægt 300 og −0.024em fra 26px og op, 400 derunder — så mærket bærer vægten alene.

Grænseflade & labels

Helvetica

ABCDEFGHIJKLM
abcdefghijklm 0123 æøå

Alt funktionelt: labels, tal, knapper, billedtekster. Labels i 11px, 0.2em spatiering, versaler.

Display 76/0.98

Forsider og åbninger

Titel 38/1.2

Afsnit og casetitler

Brød 17/1.65

Løbende tekst sættes i sans på 17px med 1.65 i linjeafstand og maks. 62 anslag pr. linje. I trykte dokumenter sættes brødteksten i Platypi.

Label 11/0.2em

Metadata, nummerering, kolofon

05 — Sprog

Sådan skriver du

„Jeg tegner, bygger og underviser i digitalt design.”

Korte sætninger. Konkrete verber. Første person. Fagsprog kun når det er præcist — ellers almindeligt dansk.

Undgå

„Passioneret multidisciplinær kreativ med 360°-mindset.”

Ingen superlativer, ingen buzzwords, ingen udråbstegn. Vis arbejdet i stedet for at rose det.

06 — Anvendelser

Slide — åbning

Oliver Fjordside

Interaktion som håndværk

Oplæg · Erhvervsakademiet · efterår 2026

Slide — indhold

Tre principper

03 / 12

Materiale

Skærmen er et materiale med egne regler.

Modstand

God interaktion har vægt og retning.

Læsbarhed

Hvis det ikke kan læses, er det ikke designet.

Visitkort — forside

Oliver Fjordside

Visitkort — bagside

Digitalt design · illustration · undervisning

oliverfjordside.dk
oliver@fjordside.dk

CV — hoved

Oliver Fjordside

Digitalt design & interaktiv teknologi · Næstved

Erfaring

2022–

Underviser, Erhvervsakademiet
Interaktionsdesign og digital konceptudvikling.

2019–

Selvstændig designer og illustrator
Identitet, grafik og digitale produkter.

portræt

Udvalgt

Gå med fred — om kristen-agnostik. Bog, research og tilrettelæggelse.

Socialt — citat

Hvis det ikke kan læses, er det ikke designet.

Socialt — design

arbejdsprøve 1:1

Socialt — profil

07 — Webgrundlayout

Tekst til venstre. Billedet får kanten.

Det asymmetriske portfolio-layout er udgangspunktet for personlige websites. Et smalt tekstspor står til venstre. Det visuelle spor fortsætter mod højre og må gå helt til viewportkanten. Der er ingen obligatorisk header, og sektioner følger indholdets naturlige højde.

02 — Design

Grafik og illustration

Kort, konkret introduktion. Maks. 62 anslag i bredden.

21 værker

FIG. 01 / 21

Web

Asymmetrisk tekst- og billedspor. Kantløse galleribilleder. 24px tekstgutter på mobil. Billeder må gå til kanten.

Redaktionelt

200px labelkolonne og 64px mellemrum. Bruges til brandguide, dokumenter og cases — ikke som automatisk websiteskal.

Tekst

24px på begge sider på mobil. Brødtekst forbliver 17px.

Billeder

Må gå til kanten. Kantløse. Ét primært billede med swipe og snap.

Robusthed

Ingen skjult tekst før JavaScript og ingen vandret scroll på siden.

08 — Webelementer

Samme lineal. Forskellig funktion.

Knapper, felter, dropdowns og cards er firkantede, flade og tydelige. Standardkontrollen er 44px høj. 48px bruges til store handlinger, mens 36px kun hører til tætte desktopværktøjslinjer.

Geometri

0px radius

1px kant. Ingen skygge på almindelige kontroller og cards.

Mål

36 / 44 / 48

44px er standard og mindste almindelige touchmål.

Fokus

1px accent

Ringen trækkes 2px ind og bryder aldrig layoutet.

Knapper

Knaptekst er verbum + objekt. Primary bærer retningen, secondary er alternativet, og accent bruges højst én gang pr. blik. Hover skifter farve — knappen flytter eller skalerer ikke.

BrandSelect — formularværdi

Opgavetype

Identitet

Egen, tilgængelig liste med sværte som valgt flade og én terracotta-diamant. Ingen blå systemmenu.

Dropdown — handlinger

Åbent papirlag med hårfin kant, den ene løfteskygge og 44px rækker.

Cards

Hairline

Standardkort

Papir, hårfin kant, ingen skygge.

Sunk

Sekundært panel

Kalk uden synlig ramme.

Inverse

Særligt afsnit

Sværte med papirtekst.

Padding er 16px i tætte rækker, 24px i produktkort og 32px i redaktionelle cards. Store portfoliofotos er ikke cards og forbliver kantløse.

Alle tilstande

Hvile → hover → fokus → aktiv → valgt → deaktiveret → fejl → tom → indlæser. De relevante trin beskrives altid. På mobil stables felter og cards i én kolonne, knaprækker må wrappe, og åbne lag holder 24px afstand til viewportkanten.

09 — Formularer & flow

Hjælp fremad. Uden at larme.

Formularen skal føles som en præcis samtale. Labels forklarer spørgsmålet, hjælpetekst reducerer tvivl, og fejl siger konkret, hvad der skal rettes. Nye kontroller genbruger samme 44px mål, hårfine kant og rolige lag.

Fagområde

Autocomplete bruges til lange, søgbare lister. Fri tekst tillades kun, når flowet kan modtage den.

StartdatoPåkrævet

Datoen er gyldig

DateInput bruger DD.MM.ÅÅÅÅ og leverer en ISO-værdi uden en browserfarvet kalender.

BilagValgfrit

E-mail

Skriv en gyldig e-mailadresse.

Fejl erstatter hjælpeteksten, markeres både med kant og tekst og beholder den indtastede værdi.

Accordion — uddybning

Hvad styrer udtrykket?

Papir er grundfladen, sværte skaber struktur, og terracotta markerer kun det aktive eller valgte.

Hvornår står indhold åbent?

Primære beslutninger står altid åbent. Accordion er kun til uddybning.

Hvordan virker det på touch?

Hele den mindst 48px høje overskriftsrække kan aktiveres.

Komplet feltmodel

Label forklarer spørgsmålet.
Kontrol bærer værdien.
Hjælp forebygger tvivl.
Fejl forklarer næste handling.
Succes bruges kun ved nyttig bekræftelse.

Oliver Fjordside — brandguide 1.2.1

Platypi · Helvetica · papir, tryksværte, accent