Brand colors

Volledig palet — gebruik via Tailwind utilities (bg-onyx, text-yellow) of CSS-variabelen.

onyx #070132

dark-jungle-green #101340

midnight-indigo #101340

united-nations-blue #2a6ffa

dodger-blue #4a84f9

electric-indigo #403efc

hawkes-blue #edf3fe

pale-cerulean #a6bbe4

slate-gray #6f7997

cadet-grey #bec4d3

solitude #eef1f9

yellow #fed200

Semantic tokens

Gebruik deze in componenten — niet de brand-kleuren direct. Maakt theming later eenvoudig.

--color-bg Background

--color-bg-elevated Background (elevated)

--color-fg Foreground (text)

--color-fg-muted Foreground muted

--color-fg-inverted Foreground inverted

--color-brand Brand

--color-brand-hover Brand hover

--color-accent Accent

--color-border Border

--color-border-hover Border hover

Typography

Display: TT Norms Pro (self-hosted). Body: Figtree (Google Fonts). Headings schalen fluid met clamp().

Hero — var(--text-hero) — 48 → 120px

Bouw met Lemone

H1 — var(--text-5xl)

Heading niveau 1

H2 — var(--text-4xl)

Heading niveau 2

H3 — var(--text-3xl)

Heading niveau 3

H4 — var(--text-2xl)

Heading niveau 4

H5 — var(--text-xl)

Heading niveau 5

H6 — var(--text-lg)

Heading niveau 6

Lead — var(--text-lead)

Een korte introtekst die net iets prominenter is dan body — voor pagina-introducties.

Body — var(--text-base) — 18px

Standaard bodytekst (Figtree 18px / line-height 1.667). Links krijgen automatisch de brand kleur.

Small — var(--text-sm) — 15px

Kleinere tekst voor metadata, captions of footnotes.

Links

Inline tekstlinks krijgen automatisch de brand-kleur. Voor een subtiele "dit is klikbaar"-hint (bv. een naam die naar een profiel linkt) is er .lj-dashed-link: een blijvende grijze dotted underline (2px) die op hover/focus blauw wordt — de tekstkleur verandert niet.

Inline body-link: lees meer over digitale strategie.

Dashed-link affordance: Wouter Albers — underline wordt blauw op hover, de tekst blijft staan.

Buttons

Component <x-button> — props: variant (primary/secondary/link), href, arrow. Indigo pill met pijlcirkel die -45° roteert op hover (Lemone-signature). Core wp:button met .lj-primary-button krijgt dezelfde stijl.

Variants

Lees meer over digitale strategie

Zonder pijl & als link

Maak een afspraak

Core wp:button block — styles: Primary CTA (default), Secondary CTA, Link

Verstuur

Onze diensten

Lees meer

Tags & pills

Component <x-tag> — statisch label of klikbare filter-pill (met active-state).

Statisch label — deep-onyx bg + electric-indigo rand

Website
Platform
Branding
WordPress

Klikbare filter-pill — default grijze rand · hover indigo fill · active donkerblauw + wit

Form elements

Componenten <x-input>, <x-textarea>.

Cards

Component <x-card> — props: title, eyebrow, href.

Case study

Webflow rebuild

Korte beschrijving. Cards zijn de basis voor overzichten.

Service

WordPress development

Met een href wordt de card een link met hover op de border.

Plain card

Zonder eyebrow — voor losse content-blokken.

Work cards

Component <x-work-card> — case-showcase met logo-overlay, image en pills. Wordt hergebruikt in de Archive-block. De partial partials.work-card-for-case mapt een Case-post automatisch naar de component.

VloerenBaas

Website

Rock Solid

IJzersterk online partnership met focus op strategisch design en een visuele ervaring die merk en gebruikers samenbrengt.

Website

Hoomdossier

Hoomdossier is een online tool ontwikkelt door coöperatie Hoom. De module helpt huiseigenaren en professionals met het in kaart brengen van energie besparingen en het verduurzamen van hun huis.

Webapp

Nozem

Nozem is een online HR platform in de maak. Door HR professionals voor HR medewerkers.

Webapp

Layout partials

Herbruikbare Blade-partials uit resources/views/partials/.

partials.tickertape — GSAP scrolling tape

Prop text (default "Let's make Lemonade"). Animatie in resources/js/animations/tickertape.js.

LemonJuice blocks

Alle secties zijn Gutenberg-blocks (categorie LemonJuice Blokken in de editor), volgens het LemonJuice 3-lagen-principe. Plugin-blocks krijgen een theme view-override in resources/views/blocks/; theme-blocks leven in app/Blocks/ + app/Filters/Blocks/. Styling volledig via onze Tailwind. Te bewerken in de editor.

Hero Plugin · view-override

acf/lemon-juice-block-hero Titel + lead + CTA (InnerBlocks). Block-styles voor tekst-uitlijning en foto-positie.

Heading group Plugin

acf/lemon-juice-block-heading-group Pretitle + heading — gebruikt binnen hero en secties.

Intro Plugin · view-override

acf/lemon-juice-block-intro Lead/intro met heading-group + tekst; "knop rechts" style.

Text + Media Plugin · view-override

acf/lemon-juice-block-text-media Tekst naast media; styles photo-bleed / volledig beeld (contain).

Archive Plugin · view-override

acf/lemon-juice-block-archive Gecureerde cases/blog-grid (<x-work-card>). Styles: landscape, featured.

Carousel Plugin · view-override

acf/lemon-juice-block-carousel Slider (Splide.js).

FAQ Plugin · view-override

acf/lemon-juice-block-faq Accordion (Alpine.js); donkere tekst op lichte panelen/blog.

Formulier Plugin

acf/lemon-juice-block-form Gravity Forms wrapper.

Section Theme-block

acf/lemone-block-section Sectie-wrapper; licht/donker paneel-style bepaalt de kleurcontext.

Services Theme-block

acf/lemone-block-services Dienstenlijst/-grid (icon-cards); optioneel gecureerde selectie.

USPs Theme-block

acf/lemone-block-usps USP-lijst; outline of filled cards.

Checklist Theme-block

acf/lemone-block-checklist Checklist met vinkjes (Gutenberg lijst-markup).

Cards Theme-block

acf/lemone-block-cards "Wat ons kenmerkt" kaarten / plain-list rijen.

Values Theme-block

acf/lemone-block-values Kernwaarden-grid.

Quote Theme-block

acf/lemone-block-quote Testimonial met avatar + gradient-orb; align center.

Reviews Theme-block

acf/lemone-block-reviews Review-score / beoordeling.

Statement / CTA Theme-block

acf/lemone-block-statement Statement- of CTA-banner; styles narrow (default) / full.

AI-prompt Theme-block

acf/lemone-block-ai-prompt "Vraag het AI" kaart (donkere card-surface).

Appointment Theme-block

acf/lemone-block-appointment Google scheduler (inline of eigen popup-modal) + persoonlijke kaart.

Contact Theme-block

acf/lemone-block-contact Formulier + bedrijfsgegevens (SiteSettings).

Newsletter Theme-block

acf/lemone-block-newsletter Nieuwsbrief-aanmelding.

Partners Theme-block

acf/lemone-block-partners Logo-strip.

Team Theme-block

acf/lemone-block-team Teamleden-grid (uit gebruikers/profielen).

Vacancies Theme-block

acf/lemone-block-vacancies Vacature-lijst (hairline-rijen).

Chart Theme-block

acf/lemone-block-chart Datagrafiek (GSAP reveal).

Bento Theme-block

acf/lemone-block-bento Bento-grid layout.

Image Theme-block

acf/lemone-block-image Enkele afbeelding met breedte-/bleed-opties.

Photo grid Theme-block

acf/lemone-block-photo-grid Fotogrid.

Photo strip Theme-block

acf/lemone-block-photo-strip Horizontale fotostrip.

Reel Theme-block

acf/lemone-block-reel Video-reel.

Showreel Theme-block

acf/lemone-block-showreel Showreel (full-bleed video).

Map Theme-block

acf/lemone-block-map Kaart / locatie.

Articles Theme-block

acf/lemone-block-articles Artikelen-grid (recente posts).

Cases overview Theme-block

acf/lemone-block-cases-overview /cases/-overzicht met client-side filter; verbergt vervolgprojecten.

Products Theme-block

acf/lemone-block-products Producten-lijst.

Products overview Theme-block

acf/lemone-block-products-overview Producten-overzicht (landscape/grid).