Studio Modular

Overview

Studio Modular is a Belgian graphic design studio serving visionary entrepreneurs who demand visual systems that reflect their brand's integrity. The design language embodies 'Soft Modernism'—a philosophy that balances geometric precision with human warmth, combining the structured grid-based thinking of Swiss design with the approachable, craft-forward sensibility of contemporary Scandinavian practice. The UI evokes clarity and confidence: soft, rounded forms (100px border-radius on buttons, 6.25rem on form inputs) sit against a warm beige canvas (#fff7f0), while a cool blue accent (#bad6ff) and deep forest green (#1e4137) create visual tension that feels both professional and inviting. The emotional response is one of calm competence—a studio that understands both business and beauty.

The brand voice is direct, unpretentious, and grounded in craft. Studio Modular speaks in Dutch with precision and warmth, avoiding jargon while celebrating the work. Vocabulary patterns favor concrete nouns ("merken," "visie," "design") over abstract marketing speak. The tone is conversational yet authoritative, as if a thoughtful designer is explaining their process over coffee. Example sentence in brand voice: "Jouw merk verdient een visueel systeem dat net zo gedacht is als jouw bedrijf—geen shortcuts, geen trends, alleen wat werkt."

Colors

The color system operates on a principle of 'Warm Minimalism': a neutral, warm background (#fff7f0 beige) provides visual rest, while a carefully curated accent palette drives interaction and hierarchy. Primary (#bad6ff, a soft periwinkle blue) is the signature CTA color—used on the hero button 'Start jouw project' and all primary interactive elements. This cool blue against the warm beige creates visual pop without aggression, inviting users to engage. Secondary (#1e4137, a deep forest green) anchors the brand identity, appearing in the logo, headings, and secondary CTAs; it conveys stability and craft heritage. Tertiary (#ffb1eb, a soft pink) and supporting accents (orange #ff643c, purple #cdb7f1, yellow #f9e283) are reserved for accent moments, illustrations, and status indicators—never

Typography

The type system uses a single typeface family—PolySans (Helvetica, Arial fallback)—applied across all scales with weight variation driving hierarchy. Display (100px, 600 weight, -0.02em tracking) anchors hero sections with commanding presence; Headline-lg (64px, 600 weight) breaks major sections; Body-md (18px, 400 weight, 1.6 line-height) carries narrative content with generous leading for readability on warm backgrounds. The system uses a fluid sizing approach: base font-size scales from 18px on mobile to 26px on desktop via CSS clamp(), ensuring legibility across devices without breakpoint-dependent jumps. All headings use 1.1 line-height (tighter than body) and text-wrap: balance to prevent orphans. Small labels (14px, 500 weight, 0.02em tracking) appear on badges and form hints with s

Layout

The page uses a 12-column fluid grid with a max-width of 1280px, centered with equal gutters (24px on desktop, responsive down to 12px on mobile). The spacing scale is semantic: lg (40px) separates major sections (hero to case studies), md (24px) creates breathing room within components, sm (12px) tightens internal element spacing. The container max-width of 1280px ensures content never stretches beyond comfortable reading width; images and full-width elements break the container only intentionally. White-space philosophy prioritizes visual rest: the warm beige background (#fff7f0) is never fully covered—cards and sections float with breathing room, never edge-to-edge. The page header uses clamp(4.375rem, 3.16vw + 5.18vw, 9.375rem) for margin-bottom, scaling fluidly between 70px and 150px

Elevation & Depth

Depth is conveyed through subtle shadow and surface layering rather than dramatic drop-shadows. Level 1 (Base): The warm beige background (#fff7f0) with no shadow. Level 2 (Standard Cards): background-color: #edebe8 with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift. Level 3 (Elevated/Modals): background-color: #e9ecef with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), suggesting greater separation. On hover, cards transition to Level 3 shadow over 0.25s, signaling interactivity. Form inputs use a 1px border (#d0d0d0) at rest; on focus, the border becomes a 2px inset box-shadow

Shapes

The shape philosophy is 'Geometric Warmth'—sharp enough to feel designed, rounded enough to feel approachable. Buttons use full-circle border-radius (9999px, or 100% on square elements), creating pill-shaped CTAs that feel friendly and clickable. Form inputs use 100px border-radius (6.25rem in CSS), slightly less aggressive than buttons, signaling they are containers for input rather than actions. Cards and containers use 1rem (16px) border-radius, a moderate curve that suggests craft without softness. Dividers and small UI elements use 0.5rem (8px) or 0.25rem (4px) for subtle definition. The

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use background: #bad6ff, text: #0b1311, padding: 12px 30px, border-radius: 9999px, height: 48px, with box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06). On hover (button-primary-hover), the background transitions to #c2d5f1 (primary-container) over 0.25s ease, maintaining the same text color. Secondary buttons (button-secondary) use a transparent background with a 2px solid border in #1e4137 (secondary), same padding and height, text in secondary. On hover, the background fills with #2d5a4f (secondary-container) and text becomes white. Ghost buttons (button-ghost) use transparent background, text in on-surface (#0b1311), and on hover transition to background: #e9ecef (surface-container-high) over 0.25

Do's and Don'ts

**Do**

• Do use the primary blue (#bad6ff) exclusively for CTAs and interactive focus states—it is the visual signature and must never be diluted by overuse.
• Do maintain 24px (lg spacing) between major sections and 12px (sm spacing) within component groups to create visual rhythm without clutter.
• Do apply the full-circle border-radius (9999px) only to buttons and pill-shaped elements; use 1rem for cards to avoid visual confusion.
• Do use PolySans at 600 weight for all headings and 400 weight for body text; never mix weights within a single text block without semantic reason.
• Do ensure all interactive elements have a 0.25s ease transition on hover to signal responsiveness without feeling sluggish.
• Do layer shadows subtly (0 3px 8px for standard, 0 8px 24px for elevated) rather than using harsh drop-shadows; the warm beige background requires soft depth cues.

**Don't**

• Don't use the secondary green (#1e4137) as a CTA color—it is reserved for branding, headings, and secondary navigation; using it on buttons dilutes the primary blue's authority.
• Don't apply border-radius greater than 1rem to cards or containers; the 'Soft Modernism' aesthetic requires geometric clarity, not organic softness.
• Don't mix typefaces; PolySans is the system typeface across all scales. Helvetica and Arial are fallbacks only.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) or blur radii greater than 24px; the warm background requires subtle depth, not dramatic layering.
• Don't place text directly over photographic backgrounds without a text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) or semi-transparent overlay; legibility is non-negotiable.
• Don't use the accent colors (pink #ffb1eb, orange #ff643c, purple #cdb7f1, yellow #f9e283) on primary CTAs or interactive elements; they are reserved for illustration, status badges, and decorative accents.