Oral History Kosovo

Overview

Oral History Kosovo is a digital archive platform dedicated to preserving and sharing personal narratives from Kosovo's complex history. The design philosophy embraces 'Archival Minimalism'—a movement that prioritizes content clarity and historical authenticity over decorative flourish. The interface uses a restrained palette of whites, grays, and a signature teal accent (#1DBBD5) to create visual hierarchy while maintaining the gravitas appropriate to testimonial material. The brand personality is scholarly yet accessible: authoritative without being cold, inviting without being casual. The UI evokes the feeling of opening a carefully curated archive—organized, respectful, and focused on human stories. Voice example: 'Listen to Miradije's account of life in Pristina before 1998—a firsthand perspective on a pivotal moment.'

Colors

The color system balances institutional credibility with contemporary accessibility. Primary (#1DBBD5), a vibrant teal, serves as the signature accent for all interactive elements—CTAs, active navigation states, and focus indicators. This color appears on the hero overlay card and the primary button, creating a cohesive visual thread through the archive. Secondary (#FF6900), a warm orange, is reserved for supporting accents and status indicators, providing warmth against the cool primary. The surface stack uses near-white (#FFFFFF) as the base, with subtle grays (#EEEEEE, #D8D8D8) for container differentiation. Text defaults to dark gray (#333333) for body copy and slightly lighter (#444444) for secondary information. The outline color (#CDCDCD) provides subtle borders between sections wit

Typography

The type system pairs Cardo (serif, used for display and archival emphasis) with Source Sans Pro (sans-serif, used for body and UI text), creating a visual distinction between content hierarchy and functional interface. Display (60px, Cardo, 400 weight) is reserved for hero moments and major section titles, conveying editorial importance. Headline-lg (40px, Source Sans Pro, 600 weight) anchors page sections like 'LATEST INTERVIEWS.' Body-lg (20px, 400 weight) is the primary reading size for interview excerpts and narrative text, set at 28px line-height for comfortable scanning. Body-md (16px) handles secondary content and metadata. Labels use Source Sans Pro at 14px (label-md) for buttons and 12px (label-sm) for badges and small UI text. All text over colored backgrounds (like the teal her

Layout

The layout follows a 12-column grid with a max-width of 1280px, ensuring content remains readable on all screen sizes. The gutter spacing is set to 30px, providing breathing room between sections without excessive whitespace. Hero sections use full-width imagery with a 40px (lg spacing) padded overlay card positioned on the right, creating visual asymmetry that draws focus to interview subjects. The 'LATEST INTERVIEWS' section uses a 3-column card grid on desktop, collapsing to 1 column on mobile. Container padding follows the semantic scale: md (24px) for standard cards, lg (40px) for section separation. The header navigation spans the full width at 64px height with 30px horizontal padding, maintaining visual consistency. Whitespace between major sections (interview cards, metadata blocks

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic effects, maintaining the archival aesthetic. The base elevation (sm: 0 1px 2px rgba(0, 0, 0, 0.06)) is applied to interactive elements like buttons and form inputs, providing just enough lift to signal interactivity. Standard cards (md: 0 3px 8px rgba(0, 0, 0, 0.15)) create a clear separation between content containers and the background. On hover, cards elevate to lg (0 8px 24px rgba(0, 0, 0, 0.12)), signaling engagement without jarring the user. The hero overlay card uses a 1px border at rgba(0, 0, 0, 0.1) combined wi

Shapes

The shape philosophy is 'Functional Clarity'—rounded corners are used strategically to soften hard edges without introducing visual noise. Buttons and form inputs use DEFAULT radius (0.5rem / 8px), providing a modern, approachable feel while remaining professional. Cards use md radius (0.75rem / 12px), slightly more rounded than inputs to create visual distinction. The hero overlay and larger containers use lg radius (1rem / 16px), signaling importance through increased curvature. Navigation pills and badges use full radius (9999px) to create a cohesive, badge-like appearance. All radius value

Components

Action Elements Buttons are the primary call-to-action mechanism. The primary button uses #1DBBD5 background with white text, 15px vertical and 24px horizontal padding, and a 48px minimum height for touch accessibility. On hover, the background darkens to #16A5B8 over 200ms. Active states use #0F7A8A. Secondary buttons maintain a transparent background with a 1px outline at #CDCDCD, allowing for multiple CTAs without visual competition. The 'Contact' link in the header is a secondary button variant. All buttons use label-md typography (14px, 600 weight) and DEFAULT radius (8px). Focus states add a 3px ring at rgba(29, 187, 213, 0.1) to support keyboard navigation.

Containers & Surfaces Cards are the primary content container, using white background (#FFFFFF) with md-level shadow (

Do's and Don'ts

**Do**

• Do use the teal primary (#1DBBD5) exclusively for interactive elements—buttons, links, focus states—to create a consistent visual language across the archive.
• Do maintain generous whitespace (lg spacing: 40px) between interview sections to prevent cognitive overload and respect the weight of testimonial content.
• Do apply text-shadow (0 1px 2px rgba(0, 0, 0, 0.1)) to all text overlaid on colored backgrounds to ensure 4.5:1 contrast ratio for accessibility.
• Do use Cardo serif for display-level typography to signal editorial importance and archival authenticity; reserve Source Sans Pro for functional UI.
• Do transition all interactive states over 200ms with ease-in-out timing to create a smooth, professional feel that respects user attention.

**Don't**

• Don't use secondary colors (#FF6900, #9B51E0) as primary CTAs—reserve them for badges, status indicators, and supporting accents only.
• Don't apply shadows exceeding 24px blur radius; the design prioritizes clarity over depth, maintaining the archival aesthetic.
• Don't use border-radius values between 1rem and 9999px on buttons or cards; stick to the defined scale (DEFAULT, md, lg, full) for visual consistency.
• Don't set body text smaller than 16px or larger than 20px; maintain the 28px line-height for interview excerpts to ensure readability across devices.
• Don't add decorative gradients or glassmorphism effects; the design relies on solid colors and subtle shadows to maintain institutional credibility.