BlockSign

Overview

BlockSign is a German-engineered digital trust platform delivering legally binding electronic signatures, asset management, and identity verification under a single, unified interface. The brand serves enterprises, legal professionals, real estate firms, and HR departments across the EU who demand regulatory compliance (ISO 27001, eIDAS, DSGVO) without compromise. The design language is 'Technical Minimalism'—a fusion of corporate precision and modern clarity. The UI evokes confidence through a vibrant, saturated blue accent (#0081FF) deployed strategically on call-to-action elements, set against expansive white surfaces and subtle gray containers. This creates visual hierarchy without visual noise, allowing complex compliance features to feel approachable and trustworthy.

The brand voice is direct, authoritative, and jargon-aware: BlockSign speaks to both C-suite executives and compliance officers with equal fluency. Tone is reassuring without being patronizing—sentences are declarative and fact-driven. Example: 'Your signatures are legally binding in 27 EU countries. Audit trails are immutable. Compliance is automatic.' The vocabulary emphasizes security, legality, and German engineering ("Made in Germany," "ISO 27001-zertifiziert"). Personality is professional yet approachable—the brand avoids corporate coldness by using clear, conversational language and avoiding unnecessary jargon.

Colors

The color system is anchored by a single, dominant accent: Primary Blue (#0081FF), which appears on all primary call-to-action buttons, interactive focus states, and brand-critical UI elements. This vivid, saturated blue (#0081FF, RGB 0, 129, 255) is the signature of BlockSign's digital trust promise—it signals action, confidence, and regulatory authority. Secondary accents include Purple (#a855f7) for supporting actions and tertiary highlights, Amber (#f59e0b) for warnings or status indicators, and Green (#10b981) for success states. The surface stack is built on pure white (#ffffff) as the primary canvas, with a carefully calibrated gray hierarchy: surface-container-low (#f3f4f6, RGB 243, 244, 246) for subtle backgrounds, surface-container (#eff0f2) for grouped content, and surface-conta

Typography

Space Grotesk is the exclusive typeface across all scales, chosen for its geometric precision and modern neutrality—it communicates technical competence while remaining warm and accessible. The type hierarchy is built on a strict scale: Display (72px, 700 weight, -0.02em letter-spacing) anchors hero sections and major headings with commanding presence; Headline-lg (40px, 600 weight) is used for section titles and modal headers; Headline-md (28px, 600 weight) for subsection breaks; Title-lg (20px, 600 weight) for card titles and form labels. Body text is set in Body-md (16px, 400 weight, 24px line-height) for standard paragraph copy, with Body-lg (18px, 400 weight, 28px line-height) reserved for emphasized content or introductory copy. Labels use Label-md (14px, 600 weight, 20px line-height

Layout

The page grid is a fluid 12-column layout with a maximum container width of 1280px, allowing content to breathe on large screens while maintaining focus on medium and small viewports. The spacing scale uses an 8px unit base: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Gutters are consistently 24px on desktop, reducing to 16px on tablet and 12px on mobile. White-space is used aggressively to separate concerns: hero sections are given 96px vertical padding (top and bottom) to create breathing room; card stacks use lg spacing (40px) between groups; form fields use sm spacing (12px) between label and input. The container max-width of 1280px ensures tha

Elevation & Depth

Depth is conveyed through a restrained shadow system and glass-morphic layering rather than dramatic z-depth. Level 1 (Base): Clean white background (surface, #ffffff) with no shadow—this is the canvas. Level 2 (Standard Cards & Inputs): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) with a 1px border in outline-variant (#d0d5dd) creates subtle separation without visual heaviness. Level 3 (Elevated Cards, Modals, Dropdowns): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with the same border treatment. Level 4 (Glass Surfaces, Headers): backdrop-filter: blur(8px) on rgba(255, 255, 255, 0.6) with a 1px

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used sparingly and purposefully to soften technical interfaces without compromising clarity. Buttons and primary interactive elements use rounded.md (0.75rem, 12px) to signal interactivity while maintaining a modern, slightly geometric feel. Cards and containers use rounded.lg (1rem, 16px) for a softer, more approachable appearance that invites exploration. Input fields use rounded.DEFAULT (0.5rem, 8px) to maintain visual distinction from larger containers—the tighter radius signals 'form field' without ambiguity. Badges and sma

Components

Action Elements Primary buttons (button-primary) use a solid background in primary blue (#0081FF) with white text (16px, 600 weight, Space Grotesk), 16px vertical padding, 32px horizontal padding, and rounded.md (12px). On hover, the background shifts to #0070e0 (a darker blue, 5% darker) and the shadow expands from 0 2px 8px rgba(0, 129, 255, 0.2) to 0 4px 12px rgba(0, 129, 255, 0.3). On focus, add a 2px solid outline in primary blue with a 2px offset. Secondary buttons (button-secondary) use a transparent background with a 1px border in primary blue and primary-blue text; on hover, the background becomes primary-container (#e0f2ff) with on-primary-container text (#003d7a). Transition all color changes over 150ms using ease-out timing.

Containers & Surfaces Cards (card) have a ba

Do's and Don'ts

**Do**

• Do use primary blue (#0081FF) exclusively for primary call-to-action buttons, focus states, and brand-critical interactive elements—it is the signature of BlockSign's trust promise.
• Do maintain a minimum 24px gutter and 40px section separation to create visual breathing room and reduce cognitive load on compliance-heavy interfaces.
• Do apply negative letter-spacing (-0.01em to -0.02em) on all headlines to reinforce the geometric precision of Space Grotesk and signal technical authority.
• Do use glass surfaces (backdrop-filter: blur(8px), rgba(255, 255, 255, 0.6)) on headers and modals to create visual separation without breaking the minimalist aesthetic.
• Do pair primary blue with white text (not gray) on buttons and interactive elements to maximize contrast and accessibility (WCAG AAA).

**Don't**

• Don't use secondary or tertiary colors as primary call-to-action buttons—primary blue is reserved for the most critical user actions to maintain visual hierarchy.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or blur values greater than 12px on glass surfaces; this keeps the interface feeling light and trustworthy, not heavy.
• Don't mix rounded-corner radii arbitrarily—use the defined scale (8px for inputs, 12px for buttons, 16px for cards, 9999px for badges) to maintain visual consistency.
• Don't reduce the 24px gutter or 40px section spacing below the defined minimums; white-space is a core part of the minimalist aesthetic and aids compliance communication.
• Don't use system fonts or fallback sans-serif; Space Grotesk must load via Google Fonts to preserve the geometric precision and modern neutrality that define BlockSign's technical identity.