NUBU

Overview

NUBU (Nasjonalt utviklingssenter for barn og unge) is Norway's national development center for children and youth, serving researchers, practitioners, and policymakers. The design system employs a 'Warm Institutional' aesthetic—combining the credibility and structure of government/academic design with the accessibility and human warmth of contemporary Scandinavian design. The visual language prioritizes clarity, trust, and approachability through soft, rounded forms (0.75rem–1rem border-radius), a cool-teal primary accent (#36a8bc) paired with warm earth tones (#f68027 secondary, #e7eecd tertiary), and generous whitespace. The UI evokes a sense of professional competence without coldness: every interaction feels supportive rather than bureaucratic.

The brand voice is direct, evidence-based, and genuinely child-centered. Tone: informative yet conversational, never patronizing. Vocabulary favors concrete language ('barn' over 'ungdommer' when discussing younger children; 'metoder' over 'løsninger'). Example sentence in brand voice: 'Vi forsker på, utvikler og implementerer metoder for statlige og kommunale tjenester for barn og unge' — notice the emphasis on concrete action and service delivery, not abstract innovation.

Colors

The color palette reflects Scandinavian institutional design: a neutral, light foundation (#ffffff surface, #f5f3ee surface-dim) paired with a distinctive teal primary (#36a8bc) that signals trust, clarity, and child-centered care. Primary (#36a8bc) is deployed on all CTAs, interactive focus states, and key navigation elements; it appears frequently but never dominates, maintaining visual hierarchy. Secondary (#f68027, a warm burnt-orange) is reserved for highlights, badges, and supporting CTAs—it adds warmth and energy without competing with primary. Tertiary (#e7eecd, a soft sage-green) is used for informational tags, accents, and background tints in content areas, reinforcing the 'nature-informed' institutional tone.

On-surface text is a deep navy-black (#041421, not pure black) for re

Typography

The type system uses Satoshi, a geometric sans-serif that balances warmth and professionalism—ideal for institutional contexts where both credibility and accessibility matter. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major page titles; headline-lg (40px, 600 weight, -0.02em) for section headers; headline-md (28px, 600 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent body copy; body-md (16px, 400 weight, 24px line-height) for standard paragraph text. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons, form labels, and navigation items; label-sm (12px, 500 weight, 0.02em tracking) for captions, metadata, and small UI text. All body text uses 1.5x line-height (28px for

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered with auto margins. Sections use lg spacing (40px) for vertical separation; cards and content blocks use md spacing (24px) for internal padding and gutter spacing. The design favors a fluid, single-column layout on mobile (< 768px), transitioning to a 2–3 column grid on tablet (768px–1024px) and full 12-column grid on desktop (> 1024px). Container max-widths are 1024px for narrow content (e.g., article text), 1250px for standard layouts, and 1280px for full-width sections. Whitespace is generous: sections are separated by 40px (lg spacing), and internal card padding is 24px (md spacing). The gutter (24px) is applied consistently to left/right margins on all breakpoints, creating a breathing room that reinforces the 'warm'

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background tints, avoiding the stark contrast of pure black shadows. Level 1 (Base): no shadow; surface is #ffffff with no border. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), border: 1px solid #e9ecef, background: #ffffff. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), background: #f5f3ee, border: 1px solid #ede9e0. Hover states transition from Level 2 to Level 3 over 250ms using cubic-bezier(0.4, 0, 0.2, 1). Focus states on interactive elements add a 3px ring of rgba(54, 168, 188, 0.

Shapes

The shape philosophy is 'Soft-Technical': rounded corners are applied consistently but conservatively, signaling approachability without sacrificing professional structure. Buttons use lg radius (0.75rem / 12px), creating a friendly, clickable appearance. Cards and containers use xl radius (1rem / 16px) for a softer, more inviting feel. Input fields use DEFAULT radius (0.375rem / 6px), a compromise between technical precision and warmth. Tags and badges use full radius (9999px) to emphasize their role as discrete, self-contained elements. Dividers and subtle UI elements use sm radius (0.125rem

Components

Action Elements Buttons follow a three-tier system: primary (solid teal #36a8bc, 48px height, 12px 24px padding, lg radius, label-md typography), secondary (transparent with 2px teal border, same dimensions), and ghost (transparent with 1px gray border #9ca3af). All buttons use a 200ms transition on hover, shifting to primary-fixed-dim (#7ec5d4) with elevated shadow (0 8px 24px rgba(0, 0, 0, 0.12)). Focus states add a 3px ring of rgba(54, 168, 188, 0.1) around the button. Disabled buttons use surface-container-high (#e9ecef) background with on-surface-variant (#68727a) text and cursor: not-allowed.

Containers & Surfaces Cards are the primary container: 1px border in surface-variant (#e9ecef), 24px padding, xl radius (1rem), background #ffffff, and md shadow (0 3px 8px rgba(0, 0, 0

Do's and Don'ts

**Do**

• Do use primary (#36a8bc) exclusively for CTAs, focus states, and key interactive elements—never for body text or backgrounds.
• Do apply lg spacing (40px) between major sections and md spacing (24px) within cards to maintain the warm, breathing layout.
• Do use Satoshi at 18px body-lg with 28px line-height for introductory paragraphs to ensure readability and approachability.
• Do apply the three-tier shadow system (md for cards, lg for hover) with rgba(0, 0, 0, 0.15) to maintain softness and avoid harsh contrast.
• Do use full radius (9999px) on badges and tags to signal their discrete, self-contained role in the UI.
• Do include a 3px focus ring of rgba(54, 168, 188, 0.1) on all interactive elements for keyboard navigation clarity.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—always use #041421 for text and #ffffff for surfaces to reduce eye strain.
• Don't apply secondary (#f68027) or tertiary (#e7eecd) to CTAs or primary interactive elements; reserve them for badges, highlights, and supporting UI.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) or blur radii greater than 24px; the system prioritizes clarity over depth.
• Don't apply border-radius smaller than sm (0.125rem) to primary containers; use sm only for dividers and secondary UI.
• Don't mix Satoshi with system fonts or fallbacks in component styles; always declare Satoshi as the primary fontFamily.
• Don't use glassmorphism, backdrop-filter blur, or transparency overlays; the design system relies on clean layering and solid colors for institutional credibility.