Národní technická knihovna (NTK)

Overview

Národní technická knihovna (NTK) operates as a professional, information-dense institutional interface rooted in **Institutional Modernism**—a design philosophy that prioritizes clarity, hierarchical navigation, and authoritative presence over decorative flourish. The brand serves researchers, students, and technical professionals seeking access to specialized collections, journals, and eResources. The visual language combines a neutral grayscale foundation (whites, light grays, dark charcoals) with a bold, energetic red accent (#e42929) that commands attention on critical actions and navigation elements. This creates a visual rhythm where the eye is drawn first to primary CTAs, then to secondary information architecture. The emotional response is one of institutional confidence: users perceive NTK as a reliable, well-organized repository of knowledge.

The brand voice is formal yet approachable, precise without being cold. Vocabulary favors clarity over jargon; when technical terms appear, they are contextualized. Tone examples: 'Search Our Collections' (direct, action-oriented), 'NTK Coffee Lectures: Every Wednesday at 12:30 p.m.' (specific, inviting). The interface avoids marketing language; instead, it speaks in the language of librarians and researchers—factual, organized, and respectful of user time.

Colors

The color system is built on a **neutral-with-accent** model, where grayscale surfaces provide visual stability and the primary red (#e42929) acts as the brand's signature accent, reserved exclusively for high-priority interactive elements and navigation. Primary (#e42929) is deployed on the main navigation bar, primary CTAs ('Add money to your account online'), and key links; it communicates urgency and importance without overwhelming the interface. On-primary is pure white (#ffffff), ensuring maximum contrast (WCAG AAA) and legibility at 14.4px font weight 700. Secondary colors—a teal (#01a3b8) and a muted blue (#337ab7)—support specialized contexts such as eResource categories or secondary navigation. The surface stack progresses from pure white (#ffffff) through carefully calibrated gr

Typography

The typography system employs a two-family strategy: **Helvetica Neue** for headlines and high-impact labels (weights 600–700, sizes 20–41px), and **Univers** for body and interface text (weights 300–400, sizes 14–18px). This pairing communicates institutional authority (Helvetica's geometric precision) paired with readable, human-scale body copy (Univers's open letterforms). Display text (41px, weight 700, line-height 48px) is reserved for page titles and hero sections; headline-lg (34px, weight 700) anchors major sections; headline-md (28px, weight 600) introduces subsections. Body-md (16px, weight 300, line-height 24px) is the default reading size, chosen for legibility on screens and print. Labels use weight 700 at 14px with 0.01em letter-spacing to ensure button text and form labels s

Layout

The layout operates on a **12-column fluid grid** with a maximum container width of 1180px, ensuring the interface scales gracefully from mobile (320px) to desktop (1920px+). The grid uses 20px gutters (padding-left/right on columns) and 20px container padding, creating a consistent breathing room around content. Page rhythm is established through the spacing scale: xs (4px) for micro-interactions, sm (12px) for form field spacing, md (24px) for section separation, lg (40px) for major content blocks, and xl (64px) for hero-to-content transitions. The search bar occupies the full width of the header at sm breakpoints (col-xs-12) and compresses to col-sm-9 at tablet and above, preserving the logo's prominence. Cards and content containers use md (24px) padding internally, with lg (40px) marg

Elevation & Depth

Depth in this system is conveyed through **subtle layering and shadow hierarchy**, not through dramatic glassmorphism or blur effects. Level 1 (Base) is the white background (surface, #ffffff) with no shadow. Level 2 (Standard Cards & Dropdowns) applies a soft shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), paired with a 1px solid border in outline-variant (#707070) to define edges crisply. Level 3 (Modals, Elevated Containers) uses a stronger shadow: box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), with the same 1px border. Hover states transition cards from Level 2 to Level 3 over 0.2s ease-in

Shapes

The shape language follows **Institutional Sharpness**: minimal border-radius values that convey precision and formality rather than friendliness. The default radius is 2px (rounded.sm), applied to most interactive elements (buttons, input fields, cards) to maintain crisp edges and a technical feel. Larger components like modals and dropdown panels use 4–5px (rounded.md/lg) to soften corners slightly without compromising the authoritative tone. The navbar and hero sections use 0px radius (sharp corners), anchoring the page with geometric confidence. Buttons specifically use 2px radius with no

Components

Action Elements Primary buttons (button-primary) use the brand red (#e42929) background with white text (Helvetica, 14px, weight 700), 11.52px vertical and 25.92px horizontal padding, and 2px border-radius. On hover, the background darkens to #d32f2f (primary-fixed-dim) with a 0.2s ease-in-out transition. Secondary buttons (button-secondary) use a neutral gray (#575757) background, white text, and 0px 0px 2px 2px border-radius (sharp top, soft bottom corners), signaling a less critical action. The navbar implements button-like items with transparent backgrounds and white text; on hover, they receive a 15% white overlay (rgba(255, 255, 255, 0.15)) over 0.2s, maintaining the red bar's visual dominance.

Containers & Surfaces Cards (card) have a light gray background (#f5f5f5), 24px p

Do's and Don'ts

**Do**

• Do use the primary red (#e42929) exclusively on CTAs, navigation, and high-priority interactive elements—never on passive text or backgrounds.
• Do maintain 24px padding inside cards and 40px margins between major sections to preserve the institutional breathing room.
• Do apply the 0 3px 8px rgba(0, 0, 0, 0.15) shadow to all Level 2 containers (cards, dropdowns) and transition to 0 8px 16px rgba(0, 0, 0, 0.12) on hover over 0.2s.
• Do use Helvetica Neue (weight 600–700) for all headlines and Univers (weight 300–400) for body text to maintain the two-family hierarchy.
• Do keep border-radius at 2–4px on most elements; reserve full radius (9999px) only for badges and pills.

**Don't**

• Don't apply the primary red to body text, backgrounds, or non-interactive elements—it must remain reserved for actions and navigation.
• Don't use border-radius values larger than 10px on cards or buttons; the institutional aesthetic demands crisp, geometric edges.
• Don't apply shadows stronger than 0 8px 16px rgba(0, 0, 0, 0.12) or use blur effects (backdrop-filter); this is not a glassmorphism system.
• Don't mix font families within a single component; headlines are always Helvetica Neue, body is always Univers or a system fallback.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; use #1a1a1a on light surfaces and #ffffff on dark surfaces for optimal contrast.