Naar de inhoud
Demo inplannen Starten met Order2Flow

Levende style-guide: de blokken hieronder tonen de echte o2f-*-classes uit de mu-plugin, zodat deze referentie automatisch met de site meebeweegt.

Kleuren

#0D86C9--bluePrimair - accenten, pills, iconen
#0C7CBBlinkLinks (AA-veilig, 4.55:1 op wit)
#122A3E--inkKoppen en donkere tekst
#54708A--ink2Subtekst en secundair
#4EAA77groenSectie-kop en vinkjes
#F2632BoranjeCTA - einde gradient
#FF8A52oranjeCTA - begin gradient
#F1F8FD--softZachte vlakken
#E8F3FB--tintTint-achtergrond
#E3EEF7--lineRanden en scheidingslijnen

Oranje = gradient linear-gradient(135deg,#FF8A52,#F2632B).

Radius en schaduw

--r: 6pxStandaard hoekradius (kaarten, knoppen, velden)
0 8px 22px rgba(15,40,60,.05)Kaart-schaduw (rust)
0 16px 38px rgba(13,134,201,.16)Kaart-hover / lift
0 10px 26px rgba(242,99,43,.32)Oranje CTA-gloed

Font en typografie

Montserrat

Body/UI = "Montserrat", sans-serif. Mono = "JetBrains Mono", monospace.

300 400 500 600 700

H140 / 600.o2f-cpage-title
Voorraad, orders en verzending in een flow
H226 / 700.o2f-reg__kop
Zo werkt de samenwerking
H318 / 700.o2f-reg__t
Account aanmaken
Lead18 / 400.o2f-cpage-sub
Een korte inleidende zin onder de titel, rustig en leesbaar.
Body16 / 400.p
Platte tekst voor alinea’s en opsommingen in de content.
Small13 / 400.o2f-reg__note
Fijndruk, disclaimers en voetnoten.

Iconen

tag
truck
factory
shop
order
cube
return
product
doc
star
flag
people
help
mail
code
tool
market
cart

Lijn-iconen (stroke, currentColor) via o2f_icon_svg($key); zeshoek-tegel = accentblauw op tint. Zelfde set op module-, sector-, feature- en combinatiepagina’s.

Pills en labels

Eyebrow-pill
.o2f-eyebrow Chip-label .o2f-chip

Standaard = .o2f-eyebrow (outline-pill, blog-stijl). .o2f-chip is het oudere gevulde label (ouder blauw #0082B3) — alleen voor bestaande taxonomie-chips.

Knoppen

Primaire knop Secundaire knop Tekstlink

Gevulde knop = .o2f-grad-btn (oranje gradient + hover, single source). Outline = .o2f-cpage-btn--sec.

Bullets

  • Groene vinkjes voor voordelen en opsommingen
  • Automatisch uit een ACF-veld via [o2f_bullets]
  • Rustige regelafstand, ink-secundaire tekst

Kaarten

Module-kaart

Witte kaart op lichtblauwe atmosfeer: 1px lijn #E3EEF7, radius 6px, zachte schaduw die bij hover licht optilt.

Sector-kaart

Witte kaart op lichtblauwe atmosfeer: 1px lijn #E3EEF7, radius 6px, zachte schaduw die bij hover licht optilt.

Feature-kaart

Witte kaart op lichtblauwe atmosfeer: 1px lijn #E3EEF7, radius 6px, zachte schaduw die bij hover licht optilt.

Eén gedeeld kaartpatroon achter o.a. .o2f-modcard, .o2f-sector*, .o2f-feat*, .o2f-combicard en .o2f-lossecard.

Sectie-patronen

Groene sectie-kop

De sectie ná de hero: top-down blauwe fade naar wit (.o2f-na-hero) met een groene kop (.o2f-sec-kop, #4EAA77) en 1px bovenlijn.

Herken- en Wat-blok

  • Herken je dit? — knelpunten op tint-vlak, groene rij-iconen
  • Wat levert het op? — voordelen, scheidingslijnen tussen de rijen

Elementor-secties met class .o2f-block-herken / .o2f-block-wat (tint-achtergrond #DDF0FD, groene iconen #4EAA77).

Stats-rij

100%geautomatiseerd
24/7realtime sync
1centraal dashboard

Kerncijfers via [o2f_stats] (.o2f-stats / .o2f-stat).

Hero

Eyebrow

Paginatitel als H1

Witte, links uitgelijnde hero met eyebrow-pill, ink-H1 en subtitel. Geleverd door [o2f_cpage_hero].

Demo inplannen