Det her er den levende designguide for gopublic.dk. Den viser tokens og komponenter, præcis som de er defineret i koden lige nu. Når brand.css ændres, ændres siden her automatisk.
Wordmark i ét stykke. Bruger fill="currentColor" — skifter farve med tema og kontekst.
Semantiske tokens med to værdier — én for light, én for dark. Brug toggle'en herunder til at skifte mellem visningerne. Dark mode aktiveres i koden ved at sætte data-theme="dark" på en sektion eller page-wrapper.
Neutrale flader. Det første du vælger når du komponerer en sektion — derefter trækker du tekst- og accent-farver i forhold til den.
Ink-skalaen — fra primær overskrift til mute meta-tekst. Ink fungerer som tekst i light mode og som baggrund i dark mode.
Brand-blå. Royal er standard CTA og link-farve. Frost er soft-royal til callouts og baggrunde der skal læne sig op ad det primære.
Semantiske farver til alerts, badges og status-toner. Hot må kun bruges én gang pr. side — det er vores stærkeste accent.
Samme komponenter, samme tokens — bare flippet. Træk data-theme="dark" på en page-wrapper eller en sektion, og alle child-elementer arver det mørke farvepalet automatisk.
Samme typografi-hierarki, samme tokens — bare flippet til den mørke side. Brugbart til presentationer, login-flow, eller sider hvor mørk æstetik passer bedre.
// I din page.tsx:
<div data-theme="dark" className="page-dark">
<SiteNav />
{/* alt indenfor bruger dark tokens */}
</div>Eller scope'et mindre: bare en enkelt sektion på en ellers lys side. data-theme="dark" virker hvor som helst i træet.
Når du bygger en sektion, vælger du én af de seks flader herunder. Hver flade definerer hvilke farver pre-heading, overskrift, brødtekst, knapper, tags og hairline skal have. Bland ikke recepter — hver flade er et selvstændigt farveklima.
Brødtekst sat med Inter. Lede og body deler farveniveau. Hairline trækker en stille adskillelse.
| Pre-heading | --royal |
|---|---|
| Overskrift | --ink |
| Lede / brødtekst | --ink-soft |
| Sekundær / meta | --muted |
| Hairline | --rule-color |
| Primær knap | --royal · --on-royal |
| Sekundær knap | ghost · --ink border + tekst |
| Tags | alle toner virker |
Brødtekst sat med Inter. Lede og body deler farveniveau. Hairline trækker en stille adskillelse.
| Pre-heading | --muted (lyse i dark) |
|---|---|
| Overskrift | --ink (= paper i dark) |
| Lede / brødtekst | --ink-soft |
| Sekundær / meta | --muted |
| Hairline | --rule-color (13% paper) |
| Primær knap | --royal · --on-royal |
| Sekundær knap | ghost · --paper border + tekst |
| Tags | frost · positive · warning |
Brødtekst sat med Inter. Lede og body deler farveniveau. Hairline trækker en stille adskillelse.
| Pre-heading | --warning-soft |
|---|---|
| Overskrift | --paper |
| Lede / brødtekst | --paper @ 92% |
| Sekundær / meta | --paper @ 65% |
| Hairline | rgba(paper, 0.22) |
| Primær knap | --ink · --paper |
| Sekundær knap | ghost · --paper border + tekst |
| Tags | warning-soft · paper-soft · frost |
Brødtekst sat med Inter. Lede og body deler farveniveau. Hairline trækker en stille adskillelse.
| Pre-heading | --royal-press |
|---|---|
| Overskrift | --ink |
| Lede / brødtekst | --ink-soft |
| Sekundær / meta | --muted |
| Hairline | rgba(ink, 0.14) |
| Primær knap | --royal · --on-royal |
| Sekundær knap | ghost · --royal-press border + tekst |
| Tags | royal · warning · neutral |
Brødtekst sat med Inter. Lede og body deler farveniveau. Hairline trækker en stille adskillelse.
| Pre-heading | --warning |
|---|---|
| Overskrift | --ink |
| Lede / brødtekst | --ink-soft |
| Sekundær / meta | --muted |
| Hairline | rgba(ink, 0.18) |
| Primær knap | --ink · --paper |
| Sekundær knap | ghost · --ink border + tekst |
| Tags | warning · hot · neutral |
Brødtekst sat med Inter. Lede og body deler farveniveau. Hairline trækker en stille adskillelse.
| Pre-heading | --positive |
|---|---|
| Overskrift | --ink |
| Lede / brødtekst | --ink-soft |
| Sekundær / meta | --muted |
| Hairline | rgba(ink, 0.18) |
| Primær knap | --positive · --paper |
| Sekundær knap | ghost · --ink border + tekst |
| Tags | positive · neutral |
Brødtekst sat med Inter. Lede og body deler farveniveau. Hairline trækker en stille adskillelse.
| Pre-heading | --hot |
|---|---|
| Overskrift | --ink |
| Lede / brødtekst | --ink-soft |
| Sekundær / meta | --muted |
| Hairline | rgba(ink, 0.18) |
| Primær knap | --hot · --paper |
| Sekundær knap | ghost · --ink border + tekst |
| Tags | hot · neutral |
Display sættes i Family (Klim). Brødtekst i Inter. Meta-labels og kode i JetBrains Mono.
Hold overskrifter rene. Brug farve, ikke italic, til at fremhæve enkelte ord. Og drop det afsluttende punktum — overskrifter er ikke sætninger.
En overskrift er enten helt regular eller helt italic — aldrig en blanding. Skift af typografi midt i en sætning skaber visuel støj.
Overskrifter står i én farve — ink. Brug ikke royal, hot eller andre farver til at fremhæve enkelte ord midt i en overskrift. Lad sproget bære vægten, ikke farven.
Niendetrins skala fra 4 til 96 px. Sektioner bruger typisk space-9 vertikalt.
Fra hårde til pill-formede.
Ét system, tre roller: kategori-labels (sm), filter-pills (lg + interactive), og status-badges. Same mono DNA — kombinér størrelse + tone.
tag tag--lg tag--interactive · filter-pills i Kundeoversigttag tag--sm tag--frost / tag--hot · event-type på /eventstag tag--sm tag--royal · status-badges (fx Beta)Fire varianter, tre størrelser. Primary er den eneste der må være på en side ad gangen — sekundære understøtter.
Ikon kan stå før eller efter teksten. Brug Font Awesome Sharp. Højrestillede pile signalerer fremad-bevægelse (læs mere, næste trin); venstre-pile bruges til tilbage-navigation. Andre ikoner (kalender, download, mail) står typisk før teksten.
Når et kort bærer et billede, skal billedet altid gå edge-to-edge i toppen. Resten af indholdet — eyebrow, overskrift, body, CTA — lever i en padded __inner wrapper. Bland aldrig padded-billede og full-bleed-billede i samme komponent-familie.
Kort beskrivelse. Body, lede eller hvad kortet bærer.
aspect-ratio 16/9 eller 16/10. Klippes af kortets border-radius.flex: 1 så højde fyldes ud.overflow: hidden + border-radius så billedet klippes pænt til de runde hjørner.margin-top: auto + align-self: flex-end. Aligner på tværs af kort i grid.Reference-implementationer: SegmentsSection.tsx (forsiden) og start-her/page.tsx.
Fire toner — information, advarsel, positiv, fejl.
Til redaktionelle fremhævninger i et flow.
GoPublic er rolig, konkret og diskret dansk. Vi lover ikke; vi dokumenterer. Vi overrasker ikke; vi leverer det, der er aftalt. Stemmereglerne er korte, fordi de bør være indlysende efter at have læst en hvilken som helst anden GoPublic-side.
“350 organisationer”, ikke “mange kunder”. “Siden 2003”, ikke “i mange år”. Stemmen skaber tillid gennem tal, datoer og navne — aldrig gennem tillægsord.
Ingen udråbstegn. Ingen “fantastisk”, “bedste”, “revolutionerende”. En overskrift skal kunne forsvares i et udbudsdokument og citeres i en pressemeddelelse samtidig.
Den danske version er kilden. Engelsk er en oversættelse, ikke en parallel stemme. Undgå SaaS-engelske vendinger på begge sprog.
GoPublic er mere end websitet. Roadmap, GoPublic Brain (CRM) og Theme Creator er arbejdsværktøjer med deres egne komponenter — men de skal være umiskendeligt GoPublic. Paletten, ikonerne og stemmen følger med. Typografien gør ikke: i applikationer er Inter den eneste skrift.
Display-fonten (Family/Newsreader) er reserveret til redaktionelle flader: websitet og keynotes. I applikationer sættes alt — overskrifter, brødtekst, tal og labels — i Inter. Hierarki skabes med vægt og størrelse, aldrig med skift af typeface. Eneste undtagelse: JetBrains Mono til kode og tekniske værdier.
Alle farver læses fra brand-tokens — ingen egne hex-værdier, ingen nye grånuancer. Paper og Ink er fladerne, Royal er primær handling, og statusfarverne bruges til tilstande (positiv, advarsel, fejl) — ikke til pynt. Når tokens er kilden, følger dark mode med gratis.
Samme ikonkit som websitet: Font Awesome Sharp — light som standardvægt, solid til aktive og udfyldte tilstande. Ikonet er altid aria-hidden; teksten bærer betydningen. Ingen andre ikon-biblioteker, ingen emoji som ikoner.
Family signalerer redaktionelt indhold — i et værktøj er den støj. App-overskrifter sættes i Inter; differencen ligger i vægt og størrelse, ikke i typeface.