GIVE STEEL · DIGITALT DESIGN
Et stærkt digitalt
fundament.
Et fleksibelt designsystem til en konsistent, skalerbar og tilgængelig Give Steel-hjemmeside.
01 · FARVER
Farver med faste roller
Give Steel-rød er den primære handlingsfarve. Orange og grøn fungerer som støttefarver, mens #111111 er den gennemgående tekstfarve.
Primary Black
#111111
Give Steel Red
#C60C30
Give Steel Blaa
#1B5A7F
Copper
#D3813E
ESG Green
#12A439
White
#FFFFFF
Light Grey
#EBEEEC
Muted Text
#5E6261
02 · TYPOGRAFI
Roboto med tydeligt hierarki
Typografien skalerer flydende mellem mobil og desktop og bevarer den industrielle, præcise karakter.
H1 · 48–91 px
Stål, der står stærkt.
H2 · 40–58 px
Fra design til montage.
H3 · 28–36 px
Komplette stålkonstruktioner
BODY · 16–18 px
Vi kombinerer dokumenteret erfaring, præcision og ansvarlighed i komplekse byggeprojekter.
EYEBROW · 12 px
DATACENTRE · LOGISTIK · SPECIALBYGGERI
03 · HANDLINGER
Knapper med klart hierarki
Fire faste varianter sikrer ensartede handlinger og tydelige fokus-states på hele hjemmesiden.
En enkel beslutningsregel
Brug Filled til den vigtigste handling, Tonal til downloads, Outlined til sekundære valg og Text til “Læs mere”. Ikoner bruges kun, når de forklarer handlingen hurtigere end tekst alene.
Filled
Højeste visuelle vægt. Brug højst én primær rød handling pr. sektion; sort kan markere en stærk sekundær handling.
Tonal
Den anbefalede standard til PDF, EPD og datablad. Tydelig handling uden at konkurrere med sidens primære CTA.
Outlined
Til sekundære valg som at åbne eller se et dokument, når handlingen stadig skal ligne en rigtig knap.
Text
Lav visuel vægt til navigation og uddybning. “Læs mere” fungerer bedst uden ikon.
Icon-only
Kun til kompakte lister og værktøjslinjer. Den færdige version skal altid have tooltip og et tilgængeligt navn.
04 · LAYOUT
Responsivt uden tilfældige procenter
Full-width sektioner kombineres med en centreret container, flydende gutters og en begrænset tekstbredde.
1328
px container
Stopper indholdet fra at blive for bredt på store skærme.
20–56
px gutters
Skalerer automatisk fra mobil til stor desktop.
68
ch tekstmål
Holder længere brødtekst behagelig at læse.
16:9
Billeder med konsekvente forhold
16:9 til cases og nyheder, 4:3 til projektbilleder og 15 px radius – dog aldrig på hero-billeder.
05 · PRINCIPPER
Små regler med stor effekt
01
Synligt fokus
Alle interaktive elementer får en tydelig 2 px fokusmarkering.
02
Diskret bevægelse
Hover-effekter er korte og respekterer brugerens reduced-motion-indstilling.
03
15 px radius
Én gennemgående radius på kort og billeder giver et roligt visuelt system.
FORMULARER
Material 3 formularsystem
En lys, tilgængelig formularretning med tydelige felter, hjælpetekster og states. Den blå markering i den åbne native dropdown kan fortsat styres af browseren.