Ung.no

Overview

Ung.no is a public, government-backed information platform serving Norwegian youth aged 13–20 with accessible, trustworthy guidance on rights, opportunities, and responsibilities. The design aesthetic is "Warm Minimalism with Accessible Clarity"—a deliberate rejection of corporate coldness in favor of human-scaled, approachable interfaces. The visual language combines a soft, warm beige canvas (rgb(245, 243, 240)) with a deep forest-green primary accent (rgb(45, 90, 61)) that evokes trust, growth, and stability. The typography pairs the custom Borna serif for headlines (evoking Norwegian heritage and authority) with Open Sans for body text (ensuring legibility for younger readers on all devices). The emotional response is calm, non-judgmental, and empowering—users should feel that asking questions here is safe and normal.

The brand voice is direct, conversational, and peer-aware without being patronizing. Sentences are short and active: "Du kan enkelt reine ut hvilken BH-størrelse som er rett for deg" (You can easily figure out which bra size is right for you). The vocabulary avoids jargon; when technical terms are necessary, they are explained immediately. The tone never lectures or shames; instead, it normalizes adolescent experiences and provides practical, judgment-free information. Example sentence in brand voice: "Stiller du spørsmål til KI om helsa di? Da må du huske dette" (Asking AI about your health? Remember this)—direct, practical, and acknowledging real youth behavior.

Colors

The color system is built on a warm, neutral foundation that prioritizes accessibility and emotional safety. The primary surface is a soft, warm beige (rgb(245, 243, 240) / #f5f3f0), chosen to reduce visual fatigue for extended reading and to evoke a sense of calm, approachable authority. The primary accent color is a deep forest green (rgb(45, 90, 61) / #2d5a3d), used exclusively for call-to-action buttons, active navigation states, and key interactive elements. This green is not corporate or cold; it references Norwegian forests and conveys growth and trustworthiness. Secondary accents include a soft pink (rgb(248, 168, 212) / #f8a8d4) for supportive tags and highlights, and a bright blue (rgb(37, 99, 235) / #2563eb) reserved for tertiary interactions and focus states. The text hierarchy

Typography

The type system reflects the dual nature of Ung.no's mission: authoritative yet approachable. Borna, a custom Norwegian serif font, is reserved for headlines (display, headline-lg, headline-md) at weights 600–700, establishing visual hierarchy and cultural specificity. Borna's generous letterforms and slight warmth signal that this is a human institution, not an algorithm. Body text uses Open Sans at 400 weight, sized at 16px with 24px line-height (1.5) for comfortable reading on mobile and desktop. The 16px base size is intentional: it accommodates users with mild vision impairment and respects the cognitive load of dense information. Labels and metadata use Open Sans at 12–14px with 0.01–0.02em letter-spacing to maintain clarity at small sizes. Headings employ negative letter-spacing (-0

Layout

The page layout uses a 12-column grid with a maximum container width of 1280px (xl:max-w-7xl in Tailwind), ensuring content remains readable on ultra-wide displays while maintaining focus on smaller screens. The gutter is 24px on desktop (md:px-10) and 12px on mobile (px-3), creating a responsive breathing room that scales with viewport. Section separation uses the lg spacing token (40px) between major content blocks, creating a rhythm that guides users through the information hierarchy. The homepage employs a 2-column grid on large screens (lg:grid lg:grid-cols-2 lg:gap-6) for topic cards and featured articles, collapsing to a single column on mobile. White-space is used strategically: cards have 24px internal padding (md:p-4 on mobile, p-4 on desktop), and the space between card rows is

Elevation & Depth

Depth in Ung.no is achieved through subtle, naturalistic shadows rather than aggressive layering or glassmorphism. The elevation system uses three levels: Level 1 (cards, inputs) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that suggests the element sits 4–8px above the surface. Level 2 (modals, dropdowns, hover states) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), indicating greater separation and focus. Level 3 (reserved for future use) would employ box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) for maximum prominence. All shadows use a warm black (rgba

Shapes

The shape philosophy is "Soft Accessibility"—rounded corners are used generously to soften the interface and reduce visual aggression, but never so much that they obscure function or create ambiguity. Buttons use full-rounded (border-radius: 9999px / rounded-full) to create a pill shape that feels friendly and clickable; this is applied to primary, secondary, and ghost buttons uniformly. Cards and containers use 1.5rem (24px) border-radius (rounded-xl), creating a gentle, approachable frame without appearing cartoonish. Input fields use 0.5rem (8px) border-radius (rounded-DEFAULT) to maintain

Components

Action Elements Buttons are the primary interactive currency on Ung.no. The primary button (button-primary) uses a full-rounded pill shape (border-radius: 9999px), the forest-green background ({colors.primary} / #2d5a3d), white text, and 12px 32px padding for a 48px total height. The label uses {typography.label-md} (14px, 600 weight, 0.01em letter-spacing). On hover, the background shifts to {colors.primary-fixed-dim} (#7db896, a lighter green) with a 200ms ease-out transition. On focus, a 2px white offset ring appears, followed by a 2px green ring (box-shadow: 0 0 0 2px #f5f3f0, 0 0 0 4px #2d5a3d), ensuring WCAG AAA keyboard navigation compliance. The secondary button (button-secondary) mirrors the primary in size and shape but uses a white background ({colors.surface-bright}), a 1px

Do's and Don'ts

**Do**

• Do use the forest-green primary (#2d5a3d) exclusively for call-to-action buttons and active navigation states; it signals trustworthiness and action.
• Do maintain 24px padding inside cards and 24px gaps between sections to create breathing room and reduce cognitive load for younger readers.
• Do apply the 2px white + 2px green focus ring (box-shadow: 0 0 0 2px #f5f3f0, 0 0 0 4px #2d5a3d) to all interactive elements for WCAG AAA keyboard navigation.
• Do use Borna serif for all headlines (h1–h3) at 600–700 weight to establish cultural authority and visual hierarchy.
• Do pair soft pink badges (#f8a8d4) with primary-green badges (#a8d5b8) to create visual variety and support topic differentiation.
• Do use full-rounded pill buttons (border-radius: 9999px) for primary actions; they feel inviting and clearly signal clickability.

**Don't**

• Don't use the primary green (#2d5a3d) for body text or backgrounds; reserve it exclusively for interactive elements and active states.
• Don't apply shadows stronger than {elevation.md} (0 8px 24px rgba(0, 0, 0, 0.12)) to cards; excessive depth creates visual clutter and reduces focus.
• Don't mix Borna and Open Sans within a single headline or body paragraph; maintain clear typographic separation between serif (headlines) and sans-serif (body).
• Don't use border-radius smaller than 8px (rounded-DEFAULT) on buttons or inputs; sharp corners feel corporate and reduce approachability.
• Don't omit focus rings on interactive elements, even if they appear 'ugly' in mockups; keyboard users depend on them for navigation.
• Don't exceed 70 characters per line in body text; enforce container max-width: 1280px and use generous padding to maintain readability.