HOOFDSTUK 04 · GRID EN RUIMTE

Grid en ruimte¶

atlasagency.nl draait op Odoo met Bootstrap 5. Het grid is het standaard Bootstrap-grid; de merklaag voegt ruime secties, grote hoeken en zachte schaduwen toe.

Grid¶

Container: maximaal 1140px breed, met 15px marge aan elke kant. Op telefoon loopt de inhoud tot 15 px van de rand.
Kolommen: 12, met 30 px tussenruimte. Kaarten staan meestal in drie kolommen op desktop, één op telefoon.
Sectiekop: maximaal 46rem breed, met 48px ruimte eronder. Links uitgelijnd, of gecentreerd voor korte koppen.

Ruimte¶

--ag-space-container1140px · Maximale contentbreedte (Bootstrap xl)

--ag-space-gutter15px · Zijmarge van de container, 30 px tussen kolommen

--ag-space-section96px · Standaard boven- en onderruimte van een sectie (pt96 pb96)

--ag-space-section-sm64px · Smalle band, zoals de logobalk (pt64 pb64)

--ag-space-section-cta112px · CTA-band (pt112 pb112)

--ag-space-hero128px · Hero boven (pt128, onder pb112)

--ag-space-head-gap48px · Ruimte onder een sectiekop (aa-head, 3rem)

--ag-space-head-max46rem · Maximale breedte van een sectiekop

Een pagina is een stapel secties. Elke sectie heeft dezelfde ruimte boven en onder (96px), zodat het ritme rustig blijft. Smalle banden zoals de logobalk krijgen 64px, de call-to-action onderaan 112px.

Hoeken¶

card 20px
Kaarten, prijskaarten, cases

media 16px
Afbeeldingen, FAQ-items

icon-tile 14px
Icoontegel 52 x 52 px

browser 12px
Browserframe rond screenshots

input 12px
Formuliervelden

pill 999px
Knoppen, chips, tags

Groot en rond: kaarten 20px, beeld 16px, knoppen en chips helemaal rond. Kleine hoeken (4 px, 6 px) gebruikt de merklaag niet.

Schaduwen¶

cardKaart in rust

card-hoverKaart bij hover (en 4 px omhoog)

btn-primaryPrimaire knop

mediaAfbeelding in een tekstsectie

browserBrowserframe

Token	Waarde
`--ag-shadow-card`	`0 1px 2px rgba(10, 22, 40, 0.04), 0 10px 30px -12px rgba(10, 22, 40, 0.12)`
`--ag-shadow-card-hover`	`0 2px 4px rgba(10, 22, 40, 0.05), 0 24px 48px -16px rgba(10, 22, 40, 0.22)`
`--ag-shadow-btn-primary`	`0 8px 24px -8px rgba(14, 165, 255, 0.6)`
`--ag-shadow-media`	`0 30px 60px -24px rgba(10, 22, 40, 0.35)`
`--ag-shadow-browser`	`0 24px 60px -12px rgba(10, 22, 40, 0.28)`

Schaduwen zijn zacht en vallen naar beneden, altijd in inkt met lage dekking. Een kaart komt bij hover 4 px omhoog en de schaduw wordt dieper. Beweging staat uit bij prefers-reduced-motion.

Alle tokens¶

Token	Waarde
`--ag-color-blue-deep`	`#0284C7`
`--ag-color-blue`	`#0EA5FF`
`--ag-color-mist`	`#EEF5FC`
`--ag-color-white`	`#FFFFFF`
`--ag-color-ink`	`#0A1628`
`--ag-color-ink-2`	`#0F2240`
`--ag-color-blue-text`	`#0272B0`
`--ag-color-blue-hover`	`#38B6FF`
`--ag-color-logo-blue`	`#0066CC`
`--ag-font-display`	Inter Tight
`--ag-font-body`	Inter
`--ag-font-mono`	JetBrains Mono
`--ag-radius-card`	`20px`
`--ag-radius-media`	`16px`
`--ag-radius-icon-tile`	`14px`
`--ag-radius-browser`	`12px`
`--ag-radius-input`	`12px`
`--ag-radius-pill`	`999px`

Het volledige bestand, met schaduwen, ruimte en beweging, staat in agency-tokens.json. CSS en SCSS worden eruit gemaakt.