De Cultuurwerkplaats

Overview

De Cultuurwerkplaats is a vibrant cultural community hub that celebrates creative expression, artistic workshops, and collaborative cultural activities. The design system embodies a "Warm Constructivism" aesthetic—combining the geometric precision of architectural modernism with the approachable, human-centered warmth of a creative studio. The brand personality is inviting yet purposeful, energetic yet grounded. The UI evokes a sense of creative possibility: soft, tilted card compositions suggest movement and spontaneity, while the carefully chosen warm accent colors (#fa1919 for primary energy, #4ca8f5 for secondary clarity, #bb947a for earthy grounding) create visual rhythm without overwhelming. The voice is conversational, encouraging, and direct—never corporate or distant. Example sentence in brand voice: "Huur je eigen ruimte en maak je wildste idee waar—wij zorgen voor de rest."

Colors

The color system balances a clean, light foundation with three strategic accent colors that drive emotional engagement and visual hierarchy. Primary (#fa1919) is a vivid, warm red used exclusively for call-to-action buttons, key interactive elements, and brand-defining moments—it commands attention without aggression. Secondary (#4ca8f5) is a bright, friendly blue deployed for supporting CTAs, links, and informational highlights, creating a complementary energy to primary. Tertiary (#bb947a) is a warm, earthy tan used for accents, badges, and secondary content areas, grounding the palette and adding sophistication. The surface stack is deliberately minimal: white (#ffffff) as the primary canvas, with subtle warm-toned grays (#ebebc6 for container-lowest, #e8e8e8 for container, #e5e5e5 for

Typography

The type system pairs Poppins (a geometric, friendly sans-serif) for headlines and display text with Noto Sans (a warm, humanist sans-serif) for body and label content. This pairing communicates both creative confidence and accessibility. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and major announcements, commanding the page with bold geometric forms. Headline-lg (40px, 700 weight) anchors section introductions, while headline-md (28px, 600 weight) breaks content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) maintain readability across all content areas with generous line-height (1.56–1.5 ratio) to support scanning. Labels (14px and 12px, 600 weight) are used for buttons, badges,

Layout

The page layout uses a fluid, 12-column grid system with a max-width container of 1080px, ensuring content remains readable on all devices while maintaining visual breathing room. The spacing scale is semantic and hierarchical: unit (8px) is the baseline, with sm (12px), md (24px), lg (40px), and xl (64px) used for progressive separation of content blocks. Section separation uses lg spacing (40px) to create clear visual rhythm; card padding uses md (24px) for comfortable internal breathing room. The gutter (24px) is applied consistently to horizontal margins, creating a 48px total margin between adjacent cards. Container max-width of 1080px prevents line-length from exceeding 75–80 characters on large displays, supporting readability. White-space is generous and intentional: the hero secti

Elevation & Depth

Depth in this system is achieved through subtle layering and perspective transforms rather than heavy shadows. Level 1 (Base/Surface) is the white canvas (#ffffff) with no shadow. Level 2 (Standard Cards) uses a soft, spread shadow (0 8px 24px rgba(34, 44, 57, 0.08)) combined with a 1px border in outline-variant (#bbbbbb) to define edges without harshness. Level 3 (Elevated/Modals) applies a stronger shadow (0 16px 40px rgba(0, 139, 219, 0.247)) with a subtle blue tint, creating visual lift and focus. Interactive cards employ a 3D perspective transform (perspective(1000px) rotateY(-2deg) rotat

Shapes

The shape philosophy is "Soft Geometry"—combining the precision of architectural design with the approachability of rounded corners. Border-radius follows a deliberate scale: sm (4px) for subtle rounding on small interactive elements like badges and inputs; DEFAULT (8px) for standard buttons and form fields; md (12px) for card corners and medium containers; lg (16px) for larger cards and section containers; xl (24px) for hero sections and prominent modals; full (9999px) for pill-shaped buttons and circular badges. The most frequently used radius is lg (20px in observed frequency), reflecting t

Components

Action Elements Buttons are the primary interaction mechanism and must be highly visible. Primary buttons use background {colors.primary} (#fa1919), text color {colors.on-primary} (#ffffff), padding 20px 24px, height 48px, and rounded {rounded.DEFAULT} (8px). On hover, the background transitions to {colors.primary-container} (#ff6b6b) with a 200ms cubic-bezier(0.4, 0, 0.2, 1) easing, and the button lifts 2px (transform: translateY(-2px)). Secondary buttons are transparent with a 2px border in {colors.secondary} (#4ca8f5), text color {colors.secondary}, and the same padding/height. On hover, secondary buttons fill with {colors.secondary-container} (#8ed1fc) background and shift text to {colors.on-secondary-container} (#000000). All buttons use {typography.label-md} (14px, 600 weight, 0.

Do's and Don'ts

**Do**

• Do use primary (#fa1919) exclusively for primary CTAs and brand-defining moments—never for backgrounds or secondary content.
• Do maintain 24px minimum spacing between major content blocks and 12px between related items to preserve the calm, spacious aesthetic.
• Do apply the 3D perspective transform (rotateY(-2deg) rotateX(1deg)) to cards in their default state to create visual movement and warmth.
• Do use Poppins (700 weight) for all headlines and Noto Sans (400 weight) for body text to maintain the warm, geometric brand voice.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small labels over warm or busy backgrounds for legibility.
• Do use the full rounded scale (sm through xl) hierarchically: buttons use DEFAULT (8px), cards use lg (16px), hero sections use xl (24px).

**Don't**

• Don't use pure black (#000000) for backgrounds or large text areas; instead layer warm neutrals (#ebebc6, #e8e8e8) to maintain approachability.
• Don't apply heavy shadows (box-shadow: 0 20px 60px) to cards; use the defined elevation scale (sm, md, lg) to avoid visual heaviness.
• Don't mix Poppins and Noto Sans weights arbitrarily; reserve 700 weight for Poppins headlines and 600 weight for labels only.
• Don't create button widths under 120px or padding under 20px 24px; ensure comfortable touch targets and visual prominence.
• Don't remove the 1px border on cards or input fields; the outline-variant (#bbbbbb) is essential for defining edges in the light palette.
• Don't use secondary (#4ca8f5) or tertiary (#bb947a) for primary CTAs; they are supporting accents only.