Evangelische Gemeente Hoogvliet - Johannes 3:16

Design Specification — Evangelische Gemeente Hoogvliet - Johannes 3:16

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#393838), a muted accent (#E6E6E6). All type is set in var(--wp--preset--font-family--inter). Detected font weights: 100, 400, 500, 600, 700. Detected style signatures: technical / mono accents.

Logo asset(s): https://www.eghoogvliet.nl/wp-content/uploads/2025/02/logo.png

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%)

Typography

Primary typeface: var(--wp--preset--font-family--inter) — stack: var(--wp--preset--font-family--inter)

Font stacks (most used first)

• inherit
• var(--wp--preset--font-family--inter)
• var(--wp--preset--font-family--montserrat)
• var(--wp--preset--font-family--montserrat) !important
• -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
• ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
• -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif
• Inter
• Montserrat

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 400, 500, 600, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 -1px 10px 0 #acabab4d
• none
• 0 1px 2px rgba(0, 0, 0, 0.02), 0 0.5px 1px rgba(0, 0, 0, 0.04)

Layout

Container max-width: 781px

Grid columns (largest detected grid): 3

Breakpoints

• 352px
• 425px
• 478px
• 576px
• 600px
• 768px
• 781px
• 782px

Animation & Motion

Transitions

• transform .2s,opacity .2s,filter .2s
• all 0.2s ease-in-out
• 0.4s
• background .2s,transform .1s,box-shadow .2s
• transform .1s ease

Keyframes

@keyframes faz-classic-expand { 0%{transform: translateY(50%);}100%{transform: translateY(0%);} }
@keyframes faz-classic-top-expand { 0%{opacity: 0; transform: translateY(-50%);}50%{opacity: 0;}100%{opacity: 1; transform: translateY(0%);} }
@keyframes overlay-menu__fade-in-animation { 0%{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:translateY(0)} }
@keyframes show-content-image { 0%{visibility:hidden}99%{visibility:hidden}to{visibility:visible} }
@keyframes turn-on-visibility { 0%{opacity:0}to{opacity:1} }
@keyframes turn-off-visibility { 0%{opacity:1;visibility:visible}99%{opacity:0;visibility:visible}to{opacity:0;visibility:hidden} }
@keyframes lightbox-zoom-in { 0%{transform:translate(calc((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position)),calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale))}to{transform:translate(-50%,-50%) scale(1)} }
@keyframes lightbox-zoom-out { 0%{transform:translate(-50%,-50%) scale(1);visibility:visible}99%{visibility:visible}to{transform:translate(calc((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position)),calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));visibility:hidden} }
@keyframes wpxero-icon-spinner { to{transform:rotate(1turn)} }
@keyframes pulse { 50%{opacity:.5} }
@keyframes spin { to{transform:rotate(1turn)} }
@keyframes enter { 0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))} }
@keyframes exit { to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))} }
@keyframes accordion-up { 0%{height:var(--radix-accordion-content-height)}to{height:0} }
@keyframes accordion-down { 0%{height:0}to{height:var(--radix-accordion-content-height)} }

CTA labels found on page

• Ik ben Nieuw
• Ik ben nieuw
• Bezoek een dienst
• Bekijk de livestream
• Route
• Wat je zondag kunt verwachten
• Accepteer cookies

Source Design Tokens (CSS custom properties)

:root {
  --wp-admin-border-width-focus: 1.5px;
  --wp--preset--font-size--normal: 16px;
  --wp--preset--font-size--huge: 42px;
  --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height,0px);
  --wp--preset--dimension--25: 25%;
  --wp--preset--dimension--50: 50%;
  --wp--preset--dimension--75: 75%;
  --wp--preset--dimension--100: 100%;
  --wp--style--global--content-size: 740px;
  --wp--style--global--wide-size: 1260px;
  --wp--style--block-gap: var(--wp--preset--spacing--medium);
  --wp--style--root--padding-top: 0;
  --wp--style--root--padding-right: var(--wp--preset--spacing--medium);
  --wp--style--root--padding-bottom: 0;
  --wp--style--root--padding-left: var(--wp--preset--spacing--medium);
  --faz-revisit-consent-background-color: #030e45;
  --faz-revisit-consent-color: #FFFFFF;
  --faz-notice-background-color: #FFFFFF;
  --faz-notice-border-color: #F4F4F4;
  --faz-title-color: #212121;
  --faz-description-color: #212121;
  --faz-settings-button-color: #1863DC;
  --faz-settings-button-background-color: transparent;
  --faz-settings-button-border-color: #1863DC;
  --faz-reject-button-color: #FFFFFF;
  --faz-reject-button-background-color: #1863DC;
  --faz-reject-button-border-color: #1863DC;
  --faz-accept-button-color: #FFFFFF;
  --faz-accept-button-background-color: #1863DC;
  --faz-accept-button-border-color: #1863DC;
  --faz-detail-color: #212121;
  --faz-detail-background-color: #FFFFFF;
  --faz-detail-border-color: #F4F4F4;
  --faz-detail-title-color: #212121;
  --faz-detail-description-color: #212121;
  --faz-detail-category-title-color: #212121;
  --faz-always-active-color: #008000;
  --faz-detail-category-description-color: #212121;
  --faz-audit-table-color: #212121;
  --faz-audit-table-background-color: #f4f4f4;
  --faz-audit-table-border-color: #ebebeb;
  --faz-detail-accept-button-color: #FFFFFF;
  --faz-detail-accept-button-background-color: #1863DC;
  --faz-detail-accept-button-border-color: #1863DC;
  --faz-detail-save-button-color: #1863DC;
  --faz-detail-save-button-background-color: transparent;
  --faz-detail-save-button-border-color: #1863DC;
  --faz-detail-reject-button-color: #FFFFFF;
  --faz-detail-reject-button-background-color: #1863DC;
  --faz-detail-reject-button-border-color: #1863DC;
  --faz-toggle-active-background-color: #1578F7;
  --faz-toggle-inactive-background-color: #D0D5D2;
  --navigation-layout-justification-setting: flex-start;
  --navigation-layout-direction: row;
  --navigation-layout-wrap: wrap;
  --navigation-layout-justify: flex-start;
  --navigation-layout-align: center;
  --background: 0 0% 100%;
  --card: 0 0% 100%;
  --popover: 0 0% 100%;
}

Do's and Don'ts

Do

• Do reserve the accent #E6E6E6 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 100, 400, 500, 600, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-text-primary: #393838;
  --color-text-secondary: #6E6E6E;
  --color-border: #E6E6E6;
  --color-primary: #393838;
  --color-secondary: #393838;
  --color-accent: #E6E6E6;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #393838;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F6F7F9;
  --color-surface-container: #F4F4F4;
  --color-surface-container-high: #EEEEEE;
  --color-surface-container-highest: #EBEBEF;
  --font-sans: var(--wp--preset--font-family--inter);
  --font-size-headline-lg: 36px;
  --font-size-headline-md: 24px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 2px;
  --radius-md: 14px;
  --radius-pill: 9999px;
  --shadow-sm: 0 -1px 10px 0 #acabab4d;
  --shadow-md: none;
  --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.02), 0 0.5px 1px rgba(0, 0, 0, 0.04);
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --tracking-label: 0.5px;
  --container-max: 781px;
}