Nedbase

Overview

Nedbase is a full-service digital agency headquartered in Middelburg, Zeeland, serving ambitious organizations across the Netherlands. The brand embodies a philosophy of translating strategic vision into tangible digital outcomes—websites, e-commerce platforms, applications, and integrated marketing campaigns. The aesthetic is rooted in **Warm Minimalism with Craft Sensibility**: a palette of soft, earthy neutrals (warm beige #f0eae4, charcoal #2f322f) punctuated by a distinctive terracotta accent (#e47463) that signals energy, action, and human-centered design. The UI conveys approachability without sacrificing sophistication—every interaction feels intentional and grounded.

The brand voice is direct, confident, and pragmatic. Nedbase speaks in the language of outcomes: not "we design interfaces" but "we translate vision into concrete action." The tone avoids corporate jargon; instead, it uses concrete, active verbs and Dutch directness. Example: "Wij vertalen visie naar concrete actie. Zo ontwikkelen we merken, platforms, websites, applicaties en campagnes." The personality is that of a trusted partner who listens first, acts decisively, and measures success by client impact.

Colors

The color system is anchored in a warm, neutral foundation that evokes craftsmanship and approachability, with a bold terracotta accent that commands attention and drives action. **Primary (#e47463)** is the signature terracotta—used exclusively on primary CTAs, active states, and key brand moments. It is warm, human-scaled, and avoids the coldness of pure red or orange. **Secondary (#fcdd64)** is a soft, buttery yellow reserved for highlights, badges, and supporting accents; it adds warmth without competing for focus. **Tertiary (#ff6900)** is a vibrant orange used sparingly for status indicators and secondary CTAs. The surface stack is built on warm beige: **surface (#f0eae4)** is the primary page background, **surface-container (#f0eae4)** serves as the default card/container tone, and

Typography

The type system pairs two distinct typefaces to create visual hierarchy and emotional resonance. **Unytour** (a custom or display serif) is reserved for headlines and display text—it carries the brand's distinctive voice and appears at sizes 32px and above (headline-md: 32px/600 weight, headline-lg: 40px/600 weight, display: 60px/600 weight). Its geometric, slightly unconventional character signals creativity and forward-thinking. **Hanken Grotesk** (a humanist sans-serif) handles all body copy and UI labels, ensuring readability and accessibility at smaller sizes (body-lg: 20px/300 weight, body-md: 16px/400 weight, label-md: 14px/600 weight). The weight contrast is deliberate: headlines use 600 weight for authority, body text uses 300–400 weight for approachability. Letter-spacing is tigh

Layout

The layout system employs a fluid, 12-column grid with a maximum container width of 1280px, allowing content to breathe on large screens while maintaining focus on smaller viewports. The spacing scale is semantic and hierarchical: **gutter (24px)** defines the standard horizontal margin for sections and cards; **lg spacing (40px)** separates major sections and creates visual breathing room; **md spacing (24px)** is used for internal padding within cards and components; **sm spacing (12px)** handles tight groupings like button groups or label-input pairs. The page rhythm relies on generous white space—sections are separated by at least 40px (lg) vertically, and cards maintain 24px internal padding to avoid visual clutter. Container max-width is 1280px, ensuring that on ultra-wide displays,

Elevation & Depth

Visual hierarchy is achieved through a restrained shadow system that preserves the warm, soft aesthetic. The elevation scale uses three levels: **Level 1 (sm, 0 1px 2px rgba(0,0,0,0.06))** for subtle depth on interactive elements like buttons and small cards; **Level 2 (md, 0 3px 8px rgba(0,0,0,0.15))** for standard cards, modals, and containers that sit above the base surface; **Level 3 (lg, 0 8px 24px rgba(0,0,0,0.12))** for elevated modals, dropdowns, and floating elements. Shadows use a low-opacity black (0.06–0.15 alpha) rather than harsh black to maintain the warm, inviting tone. Hover s

Shapes

The shape philosophy is **Warm Geometric Clarity**—rounded corners are used consistently but not excessively, creating a friendly, approachable aesthetic without sacrificing clarity or modernity. **Buttons and primary interactive elements** use rounded.md (0.75rem / 12px) for a balanced, slightly rounded appearance that feels contemporary yet grounded. **Cards and containers** use rounded.lg (1rem / 16px) or rounded.xl (1.25rem / 20px) to create a softer, more inviting surface; the larger radius on cards signals that they are containers for content, not interactive elements. **Input fields** u

Components

Action Elements **Button Primary** is the hero CTA: backgroundColor {colors.primary} (#e47463), textColor {colors.on-primary} (white), typography {typography.label-md} (14px/600 weight), rounded {rounded.md} (12px), padding 12px 24px, height 48px. On hover, shift backgroundColor to #d4624f (15% darker) over 200ms ease-out, maintaining white text. On focus, add a 2px outline in {colors.primary-container} (#fce4df) with 2px outlineOffset to create a clear focus ring. **Button Secondary** is a ghost variant: backgroundColor transparent, textColor {colors.on-surface} (#2f322f), border 1px solid {colors.outline-variant} (#cccccc), rounded {rounded.full} (9999px), same padding and height as primary. On hover, backgroundColor shifts to {colors.surface-container-high} (#e8ddf5) over 200ms. Use

Do's and Don'ts

**Do**

• Do use primary (#e47463) exclusively for CTAs and key interactive moments—it is the brand's signature accent and should never be diluted or overused.
• Do maintain the warm beige (#f0eae4) as the dominant background; it is the foundation of the brand's approachable, crafted aesthetic.
• Do pair Unytour headlines with Hanken Grotesk body text to create clear visual hierarchy and reinforce the brand's dual personality (creative + pragmatic).
• Do apply consistent rounded corners from the semantic scale (sm, DEFAULT, md, lg, xl, full) to maintain visual cohesion across all components.
• Do use the shadow scale (sm, md, lg) to create depth without harshness; shadows should feel warm and soft, never harsh or cold.
• Do write in active, outcome-focused language: emphasize what clients achieve, not what Nedbase does.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; instead, use the warm neutrals (#2f322f for text, #f0eae4 for surfaces) to maintain the brand's warmth.
• Don't introduce new accent colors outside the defined palette (primary, secondary, tertiary, error); consistency is key to brand recognition.
• Don't apply shadows with opacity > 0.15 or blur radius > 24px; the design should feel grounded and inviting, not floating or theatrical.
• Don't mix typefaces arbitrarily; reserve Unytour for headlines (32px+) and Hanken Grotesk for body and UI text.
• Don't use rounded corners > 1.25rem (20px) on interactive elements like buttons; reserve full radius (9999px) for pills and badges only.
• Don't sacrifice legibility for aesthetics; always ensure sufficient color contrast (WCAG AA minimum) and avoid placing small text over busy backgrounds without a text-shadow or background treatment.