Dappcon 2026

Overview

Dappcon is a summit for builders and innovators creating decentralized applications and infrastructure for an open internet. The design system employs a "Tech-Organic Fusion" aesthetic—combining sharp, geometric brand elements (the signature magenta and black color blocking) with warm, earthy neutrals (taupe, cream, olive) to humanize the technical subject matter. The visual language evokes both cutting-edge technology and approachable community, creating an environment where complex blockchain concepts feel accessible and exciting. The brand personality is confident yet inclusive: direct, forward-thinking, and unafraid of bold color choices. Voice is conversational and energetic without being breathless—example: "Go beyond the status quo. Dappcon is for innovators creating truly new systems on-chain." Every interaction should feel intentional and purposeful, reflecting the precision required in decentralized systems while maintaining warmth and invitation.

Colors

The color system is built on a high-contrast foundation: pure white (#ffffff) surfaces paired with deep black (#0f0c11) and the brand's signature hot magenta (#ff4087). Primary (#ff4087) is the dominant accent, used exclusively on CTAs, active states, and brand-critical interactive elements—it commands attention and signals action. Secondary (#ff4f07, a vibrant orange) provides supporting emphasis for secondary CTAs and highlights, creating visual rhythm without competing with primary. Tertiary (#005b9e, a professional blue) anchors data visualization and informational elements. The neutral palette—from cream (#efefe8) through warm grays (#b2afad, #7f7c7a) to near-black (#4c4c49)—provides breathing room and ensures legibility across all content. Surface containers use a stepped approach: s

Typography

The type system pairs Acumin Pro (a geometric, tech-forward sans-serif) for headlines and UI labels with Fragment Mono for micro-copy and technical labels, creating a clear hierarchy between narrative and functional content. Display (72px, 700 weight, -0.03em tracking) anchors hero sections with maximum impact; headline-lg (48px, 600 weight) commands section introductions; headline-md (36px, 600 weight) organizes content blocks. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) maintain comfortable reading rhythm with 0.01–0.02em tracking to prevent the tech-forward typeface from feeling cold. Label-md (14px, 600 weight, 0.05em tracking) is reserved for button text and form labels, ensuring crisp legibility at small sizes. Label-sm (12px, Fragmen

Layout

The page layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid gutter of 24px on desktop and collapsing to 12px on tablet. Sections are separated by lg spacing (40px) vertically to create clear visual breaks; content within sections uses md spacing (24px) for subsection separation and sm spacing (12px) for tight groupings. The hero section spans full-width with a contained text block (max 960px) positioned left-aligned, allowing the brand's geometric shapes to bleed into the right margin. Card-based content uses a 3-column layout on desktop, 2-column on tablet, and 1-column on mobile, with consistent md padding (24px) and lg gaps (40px) between cards. Container max-width of 1280px ensures readability while the grid's flexibility allows asymmetric layouts (e.g., 7-col

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts rather than dramatic layering. Level 1 (Base): white (#ffffff) surface with no shadow, used for primary content areas. Level 2 (Standard Card): surface-container (#f0f0eb) background with sm shadow (0 1px 2px rgba(0,0,0,0.06)), used for event cards, speaker profiles, and secondary content. Level 3 (Elevated/Modal): surface-container-high (#e8e8e3) background with md shadow (0 4px 12px rgba(0,0,0,0.08)), reserved for modals, popovers, and interactive overlays. On hover, cards transition to surface-container-

Shapes

The shape philosophy is "Geometric Precision with Organic Softness"—combining sharp, tech-forward corners with carefully calibrated border-radius values that feel intentional rather than arbitrary. Buttons use full border-radius (9999px) for primary CTAs, creating pill-shaped forms that feel friendly and clickable; secondary buttons use DEFAULT (0.5rem / 8px) for a more structured, technical appearance. Cards and containers use lg (1rem / 16px) for standard content cards, creating a subtle roundness that softens the geometric grid without sacrificing clarity. Input fields use DEFAULT (0.5rem /

Components

Action Elements Buttons are the primary interaction pattern. The primary CTA button uses backgroundColor: {colors.primary} (#ff4087), textColor: white, label-md typography (14px, 600 weight, 0.05em tracking), full border-radius (9999px), padding 12px 32px, and height 48px. On hover, the background shifts to #ff1a6e with a 200ms ease-out transition and lg shadow (0 6px 16px rgba(255,64,135,0.25)) to lift the button. On active/press, the background darkens to #e60052 and shadow reduces to sm (0 2px 4px rgba(0,0,0,0.15)) to create a tactile "press" effect. Secondary buttons invert the color scheme: backgroundColor {colors.on-surface} (#000000), textColor white, with the same sizing and rounded corners. Ghost buttons use transparent background with a 2px solid border in {colors.primary} an

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff4087) exclusively for primary CTAs, active states, and brand-critical interactions—it is the visual anchor of the system.
• Do apply the stepped surface palette (surface-container-lowest through surface-container-highest) to create clear hierarchy without relying on color alone.
• Do pair Acumin Pro headlines with Fragment Mono micro-copy to create a clear distinction between narrative and functional content.
• Do use full border-radius (9999px) for primary buttons and DEFAULT (8px) for secondary UI to reinforce the hierarchy between actions.
• Do maintain consistent shadow scales (sm/md/lg) and apply them over 200ms transitions to signal depth changes without jarring movement.
• Do include focus rings (0 0 0 3px rgba(255,64,135,0.1)) on all interactive elements to maintain accessibility and brand consistency.

**Don't**

• Don't use secondary (#ff4f07) or tertiary (#005b9e) as primary CTAs—they are supporting accents and will dilute the brand's visual impact.
• Don't apply border-radius to shadows; keep them soft and diffuse to maintain the floating, technical aesthetic.
• Don't mix rounded corners arbitrarily—use the defined scale (sm/DEFAULT/md/lg/xl/full) to maintain visual consistency.
• Don't exceed lg shadow (0 16px 40px rgba(0,0,0,0.12)) on any element; deeper shadows will feel heavy and undermine the clean, modern aesthetic.
• Don't use system fonts or generic sans-serif fallbacks—Acumin Pro and Fragment Mono are core to the brand identity and must load reliably.
• Don't apply text-shadow on body-lg or larger text; reserve it for label-md and label-sm over busy backgrounds to maintain legibility without visual noise.