Cardano Cube

Overview

Cardano Cube is a blockchain ecosystem explorer designed for traders, developers, and community members seeking clarity in the Cardano (ADA) ecosystem. The design system embraces a "Tech-Forward Minimalism" aesthetic: a deep purple-to-black gradient background (#1c0732 to #0f041a) provides visual depth and sophistication, while a vibrant emerald-green primary accent (#00d061) cuts through the darkness with energy and trust. The interface prioritizes information density without sacrificing legibility—complex project data, governance metrics, and transaction flows are presented through a carefully orchestrated hierarchy of cards, badges, and interactive elements. The brand personality is authoritative yet approachable: precise, data-driven, and optimistic about blockchain innovation. Voice example: "Bifrost bridges Bitcoin to Cardano's decentralized future—explore how."

Colors

The color system is rooted in a high-contrast, dark-mode-first philosophy designed for extended screen time and financial data visualization. Primary (#00d061, rgb(0, 208, 97)) is the signature accent—used exclusively on call-to-action buttons (Register, Explore Projects), interactive links, and focus states. It conveys trust, growth, and blockchain momentum. Secondary (#ff8040, rgb(255, 128, 64)) is a warm alert orange reserved for notifications, warnings, and promotional badges; it creates visual tension against the cool purple background. Tertiary (#0d6efd, rgb(13, 110, 253)) is a technical blue used sparingly for links and secondary interactive states. The surface stack is built on deep purples: surface-container-highest (#311957) for elevated cards, surface-container (#1c0732) for the

Typography

Mulish is the sole typeface, chosen for its geometric clarity and excellent readability at small sizes—critical for displaying project names, wallet addresses, and transaction hashes. The type scale spans eight levels: display (60px, 700 weight) for hero headlines; headline-lg (40px, 600 weight) for section titles; headline-md (28px, 600 weight) for card headers; title-lg (20px, 600 weight) for subsections; body-lg (18px, 400 weight) for long-form content; body-md (16px, 400 weight) for standard UI text; label-md (14px, 600 weight) for buttons and form labels; and label-sm (12px, 600 weight) for metadata and captions. Letter-spacing is tight (-0.04em on display, -0.02em on headlines) to reinforce the tech-forward aesthetic, while body text uses 0em spacing for neutral readability. Line-hei

Layout

The layout system uses a 12-column grid with a max-width of 1320px, providing ample breathing room for complex data tables and project cards. The gutter is fixed at 24px, maintaining consistent rhythm across breakpoints. Container padding follows the spacing scale: 24px (md) for standard sections, 40px (lg) for hero areas, and 64px (xl) for full-width sections. White-space is generous—cards are separated by at least 24px vertically, and section breaks use 40px or 64px to create visual pauses. The hero section uses a full-width gradient background (dark purple to near-black) with white text (36px, 600 weight) and a subtitle in on-surface-variant (#dbe0df). Below the fold, three-column card layouts (Latest Projects, Latest Articles, Promoted Project) use equal widths with 24px gaps, collapsi

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than aggressive drop shadows. Level 1 (Base): the main canvas uses surface (#1c0732) with no shadow. Level 2 (Standard Cards): cards use surface-container-highest (#311957) with a subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)) and a 1px border in outline-variant (#5a4a7a). Level 3 (Elevated/Hover): on hover, cards elevate to a larger shadow (0 8px 24px rgba(0, 0, 0, 0.2)) and a slightly lighter background, creating a sense of lift without visual jarring. Modals and dropdowns use the Level 3 shadow wit

Shapes

The shape philosophy is "Geometric Precision"—rounded corners are used strategically to soften the tech-forward aesthetic without sacrificing clarity. Buttons use 0.25rem (4px) border-radius, creating a subtle softness while maintaining a sharp, professional appearance. Cards and containers use 1rem (16px) border-radius for a more approachable, modern feel. Input fields and small UI elements use 0.5rem (8px) border-radius as a middle ground. Badges and chips use full (9999px) border-radius to create pill-shaped elements that feel friendly and distinct from rectangular containers. The 4px butto

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use a solid background of #00d061 with white text, 12px vertical padding, 24px horizontal padding, and 4px border-radius. On hover, the background shifts to #00a64e (primary-container) with a 200ms ease-out transition. Secondary buttons (button-secondary) use a transparent background with a 1px border in #00d061 and the same text color; on hover, they gain a subtle rgba(0, 208, 97, 0.08) background. Ghost buttons (button-ghost) are borderless with transparent backgrounds and on-surface text; they're used for tertiary actions like "Learn More" or navigation links. All buttons maintain a 44px minimum height for touch accessibility.

Containers & Surfaces Cards (card) are the primary conten

Do's and Don'ts

**Do**

• Do use primary (#00d061) exclusively for high-priority CTAs (Register, Explore, Sign In) and focus states—it's the visual anchor that guides user attention.
• Do maintain the 24px gutter between cards and sections; white-space is a design feature, not wasted space.
• Do apply the 200ms ease-out transition to all interactive state changes (hover, focus, active) for a cohesive, responsive feel.
• Do use Mulish at 600 weight for all headlines and button text; 400 weight is reserved for body copy and descriptions.
• Do layer rgba-based overlays (e.g., rgba(0, 208, 97, 0.08)) for hover states instead of introducing new hex colors—this keeps the palette tight and predictable.
• Do test all text on the dark background for WCAG AAA contrast; on-surface (#f5f6fb) is the minimum standard.

**Don't**

• Don't use secondary (#ff8040) or tertiary (#0d6efd) for primary CTAs—they dilute the primary accent's impact and confuse the visual hierarchy.
• Don't apply sharp corners (0px border-radius) to buttons or cards; use 4px for buttons and 16px for cards to maintain the geometric precision aesthetic.
• Don't exceed 44px height for standard buttons; oversized buttons feel clunky and waste vertical space in data-dense layouts.
• Don't use pure black (#000) or pure white (#fff) for text or backgrounds—use the defined surface and on-surface tokens instead to maintain the dark-mode cohesion.
• Don't animate transitions faster than 200ms or slower than 400ms; the sweet spot is 200ms ease-out for snappy, professional interactions.
• Don't introduce new accent colors outside the primary/secondary/tertiary palette; every new color dilutes the brand identity and increases cognitive load.