# Parentcom.nl Design System

> A vibrant educational canvas where lime-green organic curves and high-contrast orange actions anchor a clean, white-label communication platform.

**Source:** https://parentcom.nl | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Parentcom.nl utilizes a high-energy palette dominated by lime green (`#c4dc28`) and safety orange (`#ff9419`). The system is built on the Enfold framework, characterized by a clean white canvas (`#ffffff`) and dark gray text (`#575757`). Visual interest is generated through large, organic "blob" shapes and heart-shaped masks that frame photography. Primary actions are consistently rendered in orange with white text, while secondary brand elements use a deep moss green (`#719430`) for footer and socket areas.

## Signature DNA
1. **Organic Masking:** Large, fluid lime-green shapes and heart-shaped photographic masks create a friendly, approachable educational atmosphere (observed on homepage hero and feature sections).
2. **High-Contrast Utility:** The use of `#ff9419` (Orange) is strictly reserved for conversion-oriented CTAs, providing a sharp functional contrast against the lime-green brand motifs.
3. **The "Enfold" Gray:** Typography and borders avoid pure black, instead using `#575757` for all headings and body text to soften the interface while maintaining legibility.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--enfold-main-color-bg` | `#ffffff` | Primary page background | High | High | Token |
| `--enfold-main-color-color` | `#575757` | Primary body text and headings | High | High | Token |
| `--enfold-main-color-border` | `#e1e1e1` | Default hairline dividers and borders | Medium | High | Token |
| `--enfold-main-color-bg2` | `#f8f8f8` | Subtle section alternating background | Medium | High | Token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--enfold-main-color-primary` | `#ff9419` | Primary CTA background (Orange) | Medium | High | Token |
| `--enfold-main-color-secondary` | `#c4dc28` | Brand signature lime green | High | High | Token |
| `--enfold-socket-color-bg` | `#ffffff` | Bottom socket background | Low | High | Token |
| `--enfold-footer-color-bg` | `#a4be4f` | Footer background (Muted lime) | Low | High | Token |
| `--enfold-socket-color-primary` | `#719430` | Socket text and primary links | Low | High | Token |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Open Sans | 400, 600, 700 | Primary UI and Body | Open Sans (Google) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{typography.h1}` | 40px | 1.1 | -0.02em | 700 | Hero headlines | `.av-special-heading-tag` |
| `{typography.h2}` | 28px | 1.2 | 0 | 600 | Section headers | `h2` |
| `{typography.h3}` | 20px | 1.3 | 0 | 600 | Feature titles | `h3` |
| `{typography.body-lg}` | 18px | 1.6 | 0 | 400 | Intro paragraphs | `.av_inherit_color` |
| `{typography.body-md}` | 15px | 1.5 | 0 | 400 | Standard body | `body` |
| `{typography.button}` | 16px | 1.0 | 0.05em | 600 | CTA Labels | `.avia-button` |
| `{typography.caption}` | 13px | 1.4 | 0 | 400 | Footer links | `#footer a` |
| `{typography.nav}` | 14px | 1.0 | 0.1em | 600 | Main navigation | `.avia-menu-text` |

### Principles
1. **Uppercase Accents:** Navigation and specific sub-headers use uppercase with increased letter-spacing (0.1em) for clarity.
2. **Softened Contrast:** Headlines use `#575757` rather than `#000000` to reduce visual fatigue.
3. **Tight Hero Leading:** Large headlines use a 1.1 line-height to maintain impact within organic shapes.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{spacing.sm}` | 10px | Button internal padding |
| `{spacing.md}` | 20px | Element grouping |
| `{spacing.lg}` | 50px | Section vertical padding |
| `{spacing.xl}` | 80px | Hero section margins |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Default layout containers | Layout |
| `{radius.sm}` | 3px | Standard buttons | `.avia-button` |
| `{radius.full}` | 999px | Icon containers | `.av-icon-char` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `flat` | none | Standard cards and sections | Default |
| `raised` | 0 2px 5px rgba(0,0,0,0.1) | Hover states on specific cards | Not captured in source |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main conversion action
**Pages observed:** Homepage hero, feature sections
**Spec:** Background `#ff9419` | Text `#ffffff` | Radius `3px` | Padding `12px 25px` | Typography `16px/600`
**States observed:** Default | Hover: captured (darkens slightly)

#### Secondary Button
**Role:** Alternative paths (e.g., "Ik werk voor...")
**Pages observed:** Homepage middle section
**Spec:** Background `#ff9419` | Text `#ffffff` | Radius `3px` | Icon `chevron-right`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Icon Block
**Role:** Explaining product pillars
**Pages observed:** Homepage "School app", "Schoolwebsite"
**Spec:** Icon color `#c4dc28` | Title `#575757` | Body `#575757`
**States observed:** Default

#### Organic Image Mask
**Role:** Brand decorative framing
**Pages observed:** Hero section, "Ontdek binnen 5 minuten"
**Spec:** Shape: Heart or Blob | Border: none | Background: Lime Green or Photo
**States observed:** Static

### Tier 3: Surface-specific

#### Footer
**Role:** Site navigation and contact
**Pages observed:** Homepage bottom
**Spec:** Background `#a4be4f` | Text `#ffffff` | Heading `#ffffff`
**States observed:** Default

#### Cookie Bar
**Role:** Consent management
**Pages observed:** Homepage entry
**Spec:** Background `#222222` | Text `#ffffff` | Button `#c4dc28`
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max-width | 1310px |
| Column Gutter | 30px |
| Section Padding | 50px (Vertical) |

## Imagery & decoration
- **Masking:** Uses SVG-based organic blobs and heart shapes to frame UI screenshots and lifestyle photography.
- **Iconography:** Thin-stroke line icons, often paired with lime-green circular backgrounds.
- **Avoidance:** Avoids sharp 90-degree corners on brand graphics; avoids heavy drop shadows.

## Do's
- Use `#ff9419` for all primary "Call to Action" buttons.
- Mask photography inside organic lime-green shapes to maintain brand softness.
- Use `#575757` for long-form body text to ensure readability on white backgrounds.
- Maintain a minimum of 50px vertical spacing between major content sections.
- Ensure icons are consistently colored with the lime-green brand token.

## Don'ts
- **Wrong:** Using `#c4dc28` (Lime) for primary action buttons. **Right:** Use `#ff9419` (Orange). **Reason:** Lime is a brand identifier; Orange is the functional conversion signal.
- **Wrong:** Using pure black `#000000` for headlines. **Right:** Use `#575757`. **Reason:** Maintains the "Enfold" soft-monochrome aesthetic.
- **Wrong:** Mixing sharp-edged photos with organic brand blobs. **Right:** Mask photos to match the fluid brand language.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --primary-orange: #ff9419;
  --brand-lime: #c4dc28;
  --text-gray: #575757;
  --bg-white: #ffffff;
  --border-light: #e1e1e1;
  --footer-green: #a4be4f;
}
```

## Agent prompt examples
- "Create a primary CTA button using Parentcom orange #ff9419 with 3px border radius and white 16px bold text."
- "Design a feature section with a lime-green #c4dc28 organic blob background and dark gray #575757 text."
- "Generate a footer component with a background of #a4be4f and all text/links in pure white."

## Known gaps
- Hover states for navigation items were not explicitly captured in the static evidence.
- Mobile menu transition states are not documented.
- Form validation error states (Semantic) were not present on the analyzed homepage.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-----|----------|--------------|
| Homepage | https://parentcom.nl | 1440px / 390px | 2026-06-06 |