Stijlgids

Client-First-klassennamen, Webflow-variabelen en Designer-besturingselementen. Aangepaste code alleen voor wat de Designer niet kan weergeven (:has, :checked, autofill, keyframes), opgenomen in de koptekst van de pagina en voorzien van commentaar.

Verticaal ritme wordt gerealiseerd door opvulling binnen een sectie, nooit door marges tussen secties. Binnen een sectie wordt ruimte gecreëerd door ‘flex’ of ‘grid gap’, nooit door ‘margin-bottom’. Elke tekstklasse moet zijn boven- en ondermarge op 0 zetten, anders komen de standaardmarges van Webflow voor koppen en alinea’s erdoorheen.

px alleen voor randen en schaduwen, die decoratief zijn. rem voor lettergrootte, opvulling en tussenruimtes, zodat deze meegroeien met de lettergrootte van de lezer. ch voor de leesbreedte (max-width-text is 60 ch). Letterafstand in em, zodat de tracking meeschuift met de lettergrootte.

De afmetingen worden per breekpunt in de Designer ingesteld (desktop, tablet, mobiel), nooit met `clamp()`. Wat je in een breekpunt ziet, is precies wat er wordt geleverd.

Tekstklassen hebben hun eigen lettertype, grootte en kleur. De uitlijning en breedte worden bepaald door de container: dezelfde koptekst van het type h1 wordt gecentreerd weergegeven op de startpagina (binnen section-header.is-center) en links uitgelijnd op de pagina ‘Contact/Verkoop’.

Elke regel is bijna zwart, nooit grijs; grijze regels worden als ontbrekend beschouwd. border/subtle is alleen bedoeld voor paneelranden.

Een paginaspecifieke aanpassing wordt een combo-klasse, zodat de gedeelde klasse elders ongewijzigd blijft. Geef de combo een naam die aangeeft wat hij doet (is-line, is-full, is-tight), en hernoem hem wanneer dat verandert.

Geen vastgezette fasen, scroll-snap of scrollwielstappen. Motion past alleen de opmaak aan van inhoud die normaal scrolt; native CSS-sticky is toegestaan omdat de lezer dit nog steeds zelf regelt.

Een inleidende alinea, die spaarzaam wordt gebruikt wanneer een paragraaf nog wat extra nadruk nodig heeft.

Hoofdtekst. Zwart, nooit gedempt of secundair. Combineer dit met `max-width-text (60ch)` voor alles wat langer is dan één regel.

Secundaire details: rollen onder een pseudoniem, beschrijvingen van kaarten.

Knoppen, tags, pillen, tabbladen en navigatie-items behouden hun eigen klasse, maar koppelen lettergrootte, regelafstand en lettertypefamilie aan dezelfde ui/type-tokens. Geef nooit een lettergrootte rechtstreeks op.

Geist Mono-cijfers (ui-num, ui-mono, ui-deal_num), initialen van de avatar in 11px, het toetsensymbool (ui-key) en de tijd in de statusbalk in lettergrootte 600.

Overal dezelfde grootte: 16px, zowel op desktop- als op telefoonschermen. Het pictogram neemt de kleur van zijn container over, dus stel de kleur in op het bovenliggende element, nooit op het pictogram zelf. Plak nooit een SVG-bestand rechtstreeks in een illustratie: voeg het pictogram eerst toe aan de map ‘Product Icons’ en voeg het daarna in.

De logo-chips ‘Orbit’ en ‘Consolidate’ behouden hun eigen afmetingen. Draadpijlen, sterren, cursors, golfbalken en foto-avatars zijn geen pictogrammen.

container-large 90rem (1440px), zodat laptops met een breedte van 1440 tot 1728px een zijmarge behouden. container-medium 64rem, container-small 48rem. Mediabanden bevinden zich binnen de container en lopen niet tot aan de rand; alleen de hero-band loopt daarbuiten.

1,5 rem aan elke kant bij elk breekpunt.

Boven- en ondermarge van elke sectie. .is-hero stelt de bovenmarge in op 3rem, zodat de productfoto direct op de startpagina wordt weergegeven.

Titel en inleiding van een sectie. .is-tight verkleint de afstand tot de inhoud, .is-center centreert alles wat erin staat (home hero).

Gemeten in Figma: de kaarten in de 5-up-indeling en de logo-rij in de 6-up-indeling passen niet in een raster met 12 kolommen. Wat constant blijft, zijn de maat en de spatiëring van 1,5 rem, dus de rijen bestaan uit gelijke delen. Hero-secties met twee kolommen gebruiken hun eigen raster (contact-hero: 1fr 1fr, 6 rem spatiëring, gestapeld op tablet).

Desktop vanaf 992px (met 1440 en 1920 daarboven), tablet tot 991px, mobiel (liggend) tot 767px, mobiel (staand) tot 479px. Lettertype en spatiëring veranderen op tablets en mobiele apparaten.

Zo begint een sectie: een regel over de hele breedte van de container, gevolgd door de titel. Dit wordt toegepast op elke sectie op de startpagina na de hero, en op de hero van ‘Contact & Verkoop’.

Alleen de regel, wanneer de inhoud zelf de spatiëring bepaalt (CTA in de voettekst).

Lijsten worden in elke rij gescheiden door een dunne lijn bovenaan, nooit alleen door spaties.

Overal scherpe hoeken: kaarten, panelen, velden, logotegels. De enige uitzondering is de primaire CTA, een volledige ‘pill’ (straal van 999px).

Paneelstreken maken gebruik van een omtrek (alle vier de lange handschriften), zodat ze geen ruimte innemen in de opmaak en over de onderliggende elementen heen worden weergegeven. Alles wat aan één kant staat, zoals een rijlijn of een onderstreping, maakt gebruik van een rand.

Wrapper .signup-form_wrap, formulier met data-folk-demo="contact", één input[type=email], één .js-select met de waarden 1-2, 3-9, 10-49, 50-249, 250-999, 1000+. Het script zoekt het bedrijf op wanneer de muisaanwijzer van het e-mailveld wordt verwijderd, en stuurt vervolgens gekwalificeerde 10+ door naar /demo-calendly, gekwalificeerde 3–9 naar /book-a-folk-demo-2, en alle anderen naar de omleiding voor niet-gekwalificeerde gebruikers.

E-mailadres, teamgrootte en knop in één omlijnde rij, 0,875 rem, 3 rem hoog.

Neem contact op met de verkoopafdeling. Geen kader, geen achtergrond, tekst van 1,25 rem, een zwarte onderstreping van 1 px, 4 rem hoog. De plaatshouder is de titel (geen labels; elk veld heeft een aria-label). Plaatshouder en niet-geselecteerde keuzelijst in tekst/secundair. Geen onderstreping bij focus: de cursor dient als aanwijzing, en de keuzelijst toont alleen een lijn van 2 px wanneer er toetsenbordfocus is.

Zwarte pil, volledige breedte, 1 rem, 3,5 rem hoog.

Velden dicht bij elkaar (0,5 rem), knop en stapel notities (1 rem), blok (2 rem) tussen de twee groepen.

Een native select-element in plaats van optietegels: de tegels hadden een brugscript nodig om het kwalificatiescript te bereiken, terwijl de select-elementen dat niet nodig hebben. De paginakoptekst wordt over de blauwe automatisch invullen-functie van Chrome heen weergegeven en het lettertype van het veld blijft bij de voorgestelde waarden.

Op een sectie of een raster. load speelt met de pagina (helden), toont de groep wanneer deze het scherm binnenkomt en scrolt item voor item naarmate ze verschijnen. data-reveal-at="60%" zorgt ervoor dat dit wordt uitgesteld totdat de bovenkant die hoogte bereikt.

omhoog: vervagen en 1rem omhoog. regels: een titel die regel voor regel wordt onthuld. vervagen: alleen de dekking; wordt gebruikt voor zeer smalle containers, zodat de regel samen met de bijbehorende sectie wordt weergegeven.

Eén kenmerk in plaats van drie, zoals bij de gebruikelijke patronen.

Titels boven de vouw maken gebruik van de ‘reveal’-functie die uitsluitend op CSS is gebaseerd, waardoor ze direct als ‘painted’ worden geteld (LCP). Pas nooit een JS-fade toe op een container waarin de H1-tag staat.

Met beperkte animaties, zonder JavaScript of in de Designer is alles gewoon zichtbaar. De engine is reveal.js in de voettekst van de site; de modi die alleen op de startpagina gelden, zijn ondergebracht in reveal-extra.js.

Als je een van beide bewerkt, worden alle pagina’s aangepast. De ‘Base’-variant van de voettekst bevat het CTA-formulier. Geef de elementen .nav-items-wrapper, .nav-item-wrapper, .logo-context-menu en .sub-nav-item nooit een andere naam: scripts en CSS maken hier gebruik van.

De logo-muur en de rijen met getuigenissen van het bedrijf, die worden hergebruikt bij de verkoop via contact.

Het inline-demoformulier, dat al is gekoppeld aan het kwalificatiescript.

Illustraties zijn gecodeerde Webflow-elementen, geen afbeeldingen: scherp bij elke DPI, interactief en animeerbaar. Ze maken gebruik van hun eigen ui-klassen en tokens en nemen nooit de spatiëring van de pagina over. Elke geanimeerde illustratie bevat een instantie van de bijbehorende Code-component, zodat een script slechts één keer hoeft te worden bewerkt. Alle illustraties staan vermeld op /illustrations; voeg elke nieuwe illustratie daar toe.

• Vraag een demo aan
• Ontdek welk abonnement het beste bij u past