Dokument

Dokument

Preview image. Unlock full-res

Architectural blueprint on parchment

Industrydesign
Palette
#f6f6f4
#000000
#383734
#7a7874
#2c7ef8

Dokument presents a stark, minimalist aesthetic operating on a canvas of near-white. Typography is the primary visual driver, featuring precise letter-spacing and a carefully controlled hierarchy of an industrial, mono-like custom font and a refined sans-serif. The interface avoids complex UI elements, relying instead on ghosted or subtly-bordered components that provide functionality without visual weight. A single vivid blue serves as an accent, disrupting the monochrome with a sharp, digital punctuation for specific linked or action states, rather than broad splashes of color. The overall impression is one of restrained precision and quiet authority, where content takes absolute precedence. Prioritize Canvas (#f6f6f4) for all background surfaces to maintain the foundational lightness. Use Ink Black (#000000) for primary headlines and core content to establish strong contrast. Apply Söhne Mono Kräftig 12px with 0.2em letter-spacing for all tertiary links and utility text. Utilize 600px border-radius for avatars and small profile-like buttons, creating a circular or pill shape. Implement Digital Blue (#2c7ef8) exclusively as an accent for interactive states (hover/active on text links or ghost buttons), never as a solid background color for major elements. Maintain maximum vertical separation using 24px section gaps between major content blocks. Frame textual blocks (like the introductory text) with 16px of vertical padding to provide breathing room. Avoid using saturated background colors; all surfaces should remain within the neutral palette. Do not use heavy shadows or gradients; the design system emphasizes flatness and minimal elevation. Refrain from using common rounded corner values (e.g. 8px or 12px) on buttons or cards; instead, use 4px or 600px for specific shapes. Do not introduce new typefaces; adhere strictly to Söhne Buch, Söhne Mono Kräftig, Söhne Kräftig, and a system sans-serif. Avoid large imagery; visual elements should be highly contained and functional. Do not use full-width banners or hero components that break the central content column's composition. Never treat the browser's default blue link color as a brand color; always use Digital Blue (#2c7ef8).

More like this