Circular Steel

Brand Guidelines & Design System — Een complete toolkit voor consistente visuele communicatie.

Kleurenpalet

Een zorgvuldig samengesteld kleurenpalet dat vertrouwen, duurzaamheid en professionaliteit uitstraalt.

Primary — Forest Green

900 #064E3B
800 #065F46
700 #047857
600 #059669
500 #0D9668
400 #34D399
300 #6EE7B7
200 #A7F3D0
100 #D1FAE5
50 #ECFDF5

Accent — Ocean Teal

Accent 700
--accent-700
Accent 600
--accent
Accent 500
--accent-500
Accent 400
--accent-light

Semantic Colors

Success
--success
Warning
--warning
Error
--error
Info
--info

Neutral — Slate

Slate 900
--slate-900
Slate 800
--slate-800
Slate 700
--slate-700
Slate 500
--slate-500
Slate 300
--slate-300
Slate 100
--slate-100

Typografie

Inter is ons primaire lettertype — modern, leesbaar en professioneel op alle schermformaten.

Heading 1 60px / 800
Van Sloop naar Grondstof
Heading 2 48px / 700
Complete Circulaire Keten
Heading 3 24px / 700
Inventarisatie & Certificering
Body 16px / 400
Wij certificeren, ontmantelen en verwerken balkstaal uit sloopprojecten met robots. Zo behouden we de materiaalwaarde en reduceren we CO₂ uitstoot met 95%.
Small 14px / 400
Upload bouwdocumenten en wij digitaliseren de staalstructuur.

Buttons

Consistente button stijlen voor verschillende interactie niveaus en contexten.

Variant
Sizes
With Icons

Shadows

Een gelaagd shadow systeem voor diepte en visuele hiërarchie.

--shadow-xs

--shadow-sm

--shadow

--shadow-md

--shadow-lg

--shadow-xl

--shadow-primary

--shadow-glow

Spacing

Een consistente spacing schaal gebaseerd op 4px increments.

--space-1
4px
--space-2
8px
--space-4
16px
--space-6
24px
--space-8
32px
--space-12
48px
--space-16
64px
--space-24
96px

Gradients

Merkgradiënten voor achtergronden, buttons en decoratieve elementen.

Brand Gradient --gradient-vibrant
Primary Gradient --gradient-brand
Subtle Gradient --gradient-subtle
Dark Gradient --gradient-dark

Components

Herbruikbare UI componenten die het design system toepassen.

Cards

Inventarisatie & Certificering

Upload bouwdocumenten en wij digitaliseren de staalstructuur.

Badges

Circulair Gecertificeerd In behandeling Urgent