Cardano

Overview

Cardano is a decentralized blockchain platform designed for mission-critical applications requiring institutional-grade security and peer-reviewed research validation. The design system embodies 'Research-Driven Minimalism'—a aesthetic that prioritizes clarity, trust, and technical credibility through bold color contrasts and structured typography. The brand personality is authoritative yet approachable: precise in language, confident in claims, and grounded in scientific rigor. The UI evokes a sense of institutional reliability—like stepping into a well-lit research facility where complex systems are made intelligible. Example sentence in brand voice: 'Cardano's Ouroboros protocol delivers proof-of-stake consensus with peer-reviewed security guarantees, enabling sustainable blockchain infrastructure at scale.'

Colors

The color system centers on a deep, institutional blue (#3578e5) as the primary accent—used exclusively for interactive elements, links, and calls-to-action. This blue conveys trust, technical sophistication, and forward momentum. The secondary palette consists of neutral grays (#1c1e21 for text, #ebedf0 for surfaces, #dadde1 for dividers) that provide visual breathing room and ensure accessibility (WCAG AA contrast ratios: primary on white = 4.8:1, body text on white = 8.2:1). Tertiary green (#00a400) is reserved for success states and positive confirmations. Error red (#fa383e) signals warnings and destructive actions. The hero section uses a darker blue (#0136ae) as a gradient backdrop with subtle radial overlays (rgba(255, 255, 255, 0.08)) to create depth without obscuring the white he

Typography

The type system uses Chivo (a variable font family loaded from /fonts/Chivo-VariableFont_wght.ttf) across all scales, establishing visual consistency and technical modernity. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; headline-lg (48px, 700 weight) breaks major content zones; body-md (16px, 400 weight, 24px line-height) ensures readability at 1.5x line-height ratio for accessibility. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons and UI controls, with letter-spacing tightened to 0.01em to maintain visual weight at small sizes. On hero sections with white text over dark blue backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to preserve legibility at 48px+ sizes. The type pairing communicates 'technical authorit

Layout

The layout system uses a 12-column grid with a max-width of 1280px (container-max-width), maintaining consistent horizontal rhythm across breakpoints. The hero section spans full-width with 80px vertical padding (top and bottom) and 24px horizontal gutter, creating a 16:9 aspect ratio at desktop. Content sections use lg spacing (40px) for vertical separation between major blocks, md spacing (24px) for subsection breaks, and sm spacing (12px) for intra-component spacing. The grid is fluid below 1280px, collapsing to single-column at mobile with 12px gutter. Mega-menu panels use a 3-column layout (data-column-count='3') with 24px padding and 12px gaps between columns. Cards maintain 24px padding internally with 12px gaps between card instances. This spacing philosophy prioritizes 'generous w

Elevation & Depth

Visual hierarchy is achieved through a three-tier shadow system combined with subtle background color shifts. Level 1 (Base): flat surfaces at surface (#ffffff) with no shadow, used for primary content areas. Level 2 (Elevated): cards and containers use elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)) with a 1px border at outline-variant (#bec3c9), creating a crisp, defined edge. Level 3 (Modal/Overlay): dialogs and mega-menus use elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)) with increased blur radius to create clear separation from background content. The hero section uses a radial-gradient ov

Shapes

The shape philosophy is 'Institutional Precision'—combining sharp, defined edges for data-heavy components with soft, approachable rounded corners for interactive elements. Buttons use full radius (9999px / border-radius: 50%) to signal 'tap here' affordance and soften the technical aesthetic. Cards use lg radius (1rem / 16px) to create visual softness while maintaining structure. Input fields use DEFAULT radius (0.5rem / 8px) for a balanced, professional appearance. Dividers and borders use sharp 90-degree angles (0px radius) to maintain grid alignment and technical clarity. The mega-menu and

Components

Action Elements Buttons are the primary interaction mechanism, using full radius (9999px) and 48px height to meet accessibility standards (WCAG 2.1 Level AAA touch target size). Primary buttons use {colors.primary} (#3578e5) background with white text, 12px vertical padding, and 32px horizontal padding. Hover state transitions to #306cce over 200ms with cubic-bezier(0.08, 0.52, 0.52, 1) timing. Active state darkens to #2d66c3. Secondary buttons invert the scheme: white background with 2px primary border and primary text, maintaining the same padding and radius. All buttons include {elevation.sm} (0 1px 2px rgba(0, 0, 0, 0.06)) to lift slightly off the surface.

Containers & Surfaces Cards use {rounded.lg} (16px) with {spacing.md} (24px) internal padding and a 1px border at {colors.

Do's and Don'ts

**Do**

• Do use primary blue (#3578e5) exclusively for interactive elements—links, buttons, focus states—to create a consistent 'tap target' language across the interface.
• Do maintain 48px minimum height for all clickable targets (buttons, list items, menu triggers) to meet WCAG AAA accessibility standards and reduce mobile mis-taps.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to white text on dark backgrounds (hero section) to preserve readability at large sizes (48px+).
• Do use Chivo variable font at weights 400 (body), 600 (labels/buttons), and 700 (headlines) only—avoid intermediate weights to maintain visual clarity and reduce font file size.

**Don't**

• Don't use secondary gray (#ebedf0) or outline colors (#bec3c9) as primary interactive elements—these are reserved for surfaces and dividers, not CTAs.
• Don't apply shadows to input fields or form controls—keep them flat with a 1px border to signal 'editable' state and avoid visual confusion with elevated cards.
• Don't mix border-radius values arbitrarily; stick to the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 24px, full: 9999px) to maintain visual coherence.
• Don't use color alone to communicate state—always pair color changes with icon, text label, or border treatment to ensure users with color blindness can distinguish interactive states.