Intersect

Overview

Intersect is a governance and membership platform designed to unite the Cardano ecosystem through transparent, collaborative decision-making. The brand embodies 'Institutional Clarity'—a design philosophy that combines corporate professionalism with approachable, human-centered interaction. The visual language prioritizes trust through clean hierarchy, bold primary colors (deep blue #0228aa paired with energetic coral #ff6b35), and generous whitespace that conveys openness and inclusivity. The UI evokes confidence and forward momentum, positioning Intersect as the secure backbone of decentralized governance. Voice: authoritative yet accessible, precise without jargon. Example: 'Join 200+ organizations shaping Cardano's future through transparent governance.'

Colors

The color system follows a dual-accent strategy: Primary (#0228aa, a deep institutional blue) anchors trust, governance, and brand identity across navigation, headings, and interactive focus states. Secondary (#ff6b35, a vibrant coral-orange) energizes call-to-action buttons and highlights member engagement, creating visual momentum on the page. Tertiary (#f0a500, a warm gold) accents badges, status indicators, and secondary highlights. The surface stack progresses from #f1f5ff (base surface) through #e9ecef (container) to #ffffff (bright), providing subtle depth without visual noise. On-surface text (#1a1a1a) maintains 7:1 contrast on all light backgrounds. Outline (#6c757d) is used for borders and disabled states. Error (#d32f2f) signals validation failures with 4.5:1 contrast. The inver

Typography

The type system uses Poppins exclusively, a geometric sans-serif that conveys modern governance and accessibility. Display (70px, 400 weight, -0.02em tracking) anchors hero sections with commanding presence. Headline-lg (48px, 600 weight) breaks content into scannable sections. Body-md (16px, 400 weight, 24px line-height) ensures readability at 1280px container width, with 1.5 line-height ratio for comfortable reading. Label-md (16px, 600 weight) is applied to button text and form labels, with 0.01em tracking for subtle emphasis. All headings use -0.01em to -0.02em negative letter-spacing to tighten the geometric letterforms and reinforce hierarchy. Apply text-rendering: optimizeLegibility and -webkit-font-smoothing: antialiased on all typography to ensure crisp rendering across browsers.

Layout

The layout uses a 12-column grid with a fixed 1280px container max-width, centered with auto margins. Hero sections span full-width with 64px (xl spacing) vertical padding and 24px (gutter) horizontal padding, creating breathing room around content. Section separation uses lg spacing (40px) between major blocks. The navigation header is fixed at the top with 16px vertical padding and gutter-width horizontal padding, maintaining visual hierarchy while staying compact. Card-based content uses md spacing (24px) for internal padding and 12px (sm spacing) for gaps between list items. The grid maintains 24px gutters between columns, collapsing to 12px on tablets and 8px on mobile. All text content respects a max-width of 65 characters per line for optimal readability, achieved through constraine

Elevation & Depth

Elevation is achieved through subtle shadows and layering rather than dramatic depth. Level 1 (Base): surface (#f1f5ff) with no shadow, establishing the foundation. Level 2 (Cards & Dropdowns): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating gentle separation from the background. Level 3 (Modals & Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for modal dialogs and floating panels that demand focus. Hover states on interactive elements transition to Level 2 shadows (200ms ease-in-out) to signal interactivity without jarring jumps. The header navigation uses Level 2 shadow

Shapes

The shape philosophy is 'Institutional Softness'—combining sharp, professional edges with subtle rounding that humanizes the interface. Buttons use full border-radius (9999px) to create pill-shaped CTAs that feel approachable and clickable, with 17px vertical padding and 24px horizontal padding for generous touch targets (48px total height). Cards and containers use md radius (0.75rem / 12px) for a balanced, modern appearance that avoids both hard corners and excessive rounding. Input fields use DEFAULT radius (0.5rem / 8px) for a slightly sharper, more utilitarian feel. Dropdown panels and mo

Components

Action Elements Buttons are the primary interaction mechanism. Primary CTAs use secondary coral (#ff6b35) with white text, full border-radius (9999px), and 17px vertical / 24px horizontal padding. Hover state darkens to #ff5722 with a 200ms ease-in-out transition and Level 2 shadow (0 3px 8px rgba(0, 0, 0, 0.15)). Secondary buttons use transparent background with a 2px solid primary blue (#0228aa) border and primary text, transitioning to primary-container (#e8f0ff) on hover. Both button types use label-md typography (16px, 600 weight) for clear, scannable text.

Containers & Surfaces Cards use surface-container (#e9ecef) background with md radius (12px) and md padding (24px). Hover states transition to surface-container-high (#dfe3eb) with a 200ms ease-in-out transition. Cards inh

Do's and Don'ts

**Do**

• Do use primary blue (#0228aa) for governance-related headings, navigation, and focus states to reinforce institutional trust.
• Do apply secondary coral (#ff6b35) exclusively to call-to-action buttons and member engagement highlights to drive conversion.
• Do maintain 24px gutter spacing between major sections and 12px spacing between list items to create visual rhythm and scannability.
• Do use Poppins 600 weight for all interactive labels (buttons, form labels) and Poppins 400 for body text to create clear hierarchy.
• Do apply 200ms ease-in-out transitions on hover states for buttons and cards to signal interactivity without feeling sluggish.
• Do use md radius (12px) consistently across cards, dropdowns, and modals to maintain a cohesive, modern aesthetic.

**Don't**

• Don't use primary blue (#0228aa) on body text or backgrounds—reserve it for interactive elements and headings to maintain focus.
• Don't apply shadows deeper than Level 2 (0 3px 8px rgba(0, 0, 0, 0.15)) to cards; excessive depth contradicts the clean, institutional aesthetic.
• Don't mix border-radius values within the same component family (e.g., don't use 8px on one card and 12px on another).
• Don't use tertiary gold (#f0a500) for primary CTAs or navigation; it should accent badges and secondary highlights only.
• Don't apply letter-spacing greater than 0.05em on body text; it reduces readability and contradicts the geometric Poppins design.
• Don't use color alone to communicate state; always pair color changes with shadow, border, or text weight changes for accessibility.