blockVote

Overview

blockVote is a Cardano governance voting platform that embraces a retro-futuristic terminal aesthetic to democratize fractionalized voting. The design language draws from 1980s command-line interfaces and cyberpunk culture, transforming complex governance mechanics into an accessible, visually distinctive experience. The brand evokes precision, technical authority, and decentralized empowerment—users feel they are operating a sophisticated system, not clicking through a generic web app. The UI personality is direct and unadorned: no gradients, no soft shadows, no decorative flourishes. Every element serves function. The emotional response is one of clarity and control: "I understand exactly what this system does, and I have agency within it."

The voice is terse, technical, and confident—never marketing-speak. Sentences are short and imperative. Example: "Connect wallet. Claim pact. Vote on governance." The vocabulary favors blockchain terminology (DRep, fractionalization, threshold) and command-line metaphors (NAVIGATE, FEATURES, WALLET CONNECTION). The brand personality is that of a seasoned developer who has seen too much to waste words: pragmatic, slightly irreverent, deeply competent.

Colors

The color system is built on a high-contrast dark foundation (#0a0a0a background, #ededed foreground) with three accent colors that map to action intent: Primary green (#22c55e) signals governance actions and CTAs—it is the color of "go" and "vote." Secondary blue (#3b82f6) supports informational elements and secondary navigation. Tertiary purple (#a855f7) marks advanced or membership-related actions (CLAIM PACT). The palette rejects gradients and transparency in favor of flat, solid colors with precise 2px borders. Hover states use a combination of color shift (to the fixed-dim variant) and a glowing box-shadow: `0 0 12px rgba(34, 197, 94, 0.4)` for primary, `0 0 12px rgba(59, 130, 246, 0.3)` for secondary. Terminal boxes use a semi-transparent black background (`rgba(0, 0, 0, 0.6)`) with

Typography

The type system splits into two families: JetBrains Mono (700 weight, 0.05em letter-spacing) for all UI labels, buttons, and terminal headers—reinforcing the command-line aesthetic—and Arial/Helvetica for body text and descriptions. Display and headline levels use monospace at 60px and 40px respectively, with tight leading (68px and 48px) and negative letter-spacing (-0.04em, -0.02em) to create visual density. Body text uses the sans-serif family at 16–18px with 24–28px line-height for readability over the dark background. Labels are always monospace, 12–14px, with 0.03–0.05em letter-spacing to mimic terminal output. When small labels appear over busy terminal boxes, apply `text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5)` to ensure legibility. The monospace choice is not decorative—it signals th

Layout

The page uses a 12-column grid with a max-width of 1280px, but the visual rhythm is dominated by centered, narrow containers (max 540–720px) that create a focused, almost meditative reading experience. The hero section is vertically centered with 24px (md spacing) gutters on desktop, scaling down to 12px (sm spacing) on mobile. Section separation uses 40px (lg spacing) margins, creating clear visual breaks between terminal boxes. The main content area has 128px horizontal padding on desktop (from the body element), which can be overridden by container queries for narrower viewports. White-space is generous but intentional: every pixel of empty space is a design decision, not a default. The terminal boxes themselves use 24px internal padding (md spacing) with 12px gaps between nested elemen

Elevation & Depth

Depth is achieved through borders and shadows, not through layering or blur. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.3)) for subtle dividers, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.25)) for modals and elevated states. Terminal boxes use a 2px solid border in the accent color (green, blue, or purple) instead of shadow, creating a flat, graphic quality. On hover, buttons and interactive elements gain a glow effect: `box-shadow: 0 0 12px rgba(34, 197, 94, 0.4)` for primary actions. This glow is the only

Shapes

The shape philosophy is "Geometric Precision"—sharp corners and minimal rounding, reflecting the technical nature of the platform. Border-radius is used sparingly: buttons and inputs use 0.5rem (8px), cards use 1rem (16px), and only badges and pills use full rounding (9999px). The 2px border is the primary shape-defining element, not the radius. Terminal boxes use 0.5rem rounding with a 2px border, creating a subtle frame effect. The reasoning is that sharp corners feel more technical and authoritative than soft, rounded corners; they also align with the retro-terminal aesthetic. When rounding

Components

Action Elements Buttons are the primary interactive element and come in three variants: primary (green, #22c55e), secondary (blue, #3b82f6), and tertiary (purple, #a855f7). All buttons use a 2px border, 12px horizontal padding, 48px height, and JetBrains Mono 700 weight at 14px. The text is uppercase with 0.05em letter-spacing. On hover, the background shifts to the fixed-dim color and a glow shadow appears: `box-shadow: 0 0 12px rgba(34, 197, 94, 0.4)` for primary. The transition duration is 200ms. Focus states add a 2px outline in the accent color, offset 2px from the button edge. Disabled buttons use the outline-variant color (#6b7280) with reduced opacity (0.5) and cursor: not-allowed.

Containers & Surfaces Terminal boxes are the primary container and use a semi-transparent bl

Do's and Don'ts

**Do**

• Do use JetBrains Mono for all UI labels, buttons, and terminal headers—it is the voice of the system.
• Do pair every accent color with a 2px border; borders define shapes more clearly than radius alone.
• Do use glowing box-shadows on hover (`0 0 12px rgba(color, 0.3–0.4)`) to signal interactivity without breaking the flat aesthetic.
• Do maintain high contrast: #ededed text on #0a0a0a background ensures readability and reinforces the terminal aesthetic.
• Do use generous white-space (lg spacing for section breaks, md spacing for box padding) to create visual breathing room.
• Do apply text-shadow (0 2px 4px rgba(0, 0, 0, 0.5)) to small labels over busy backgrounds for legibility.

**Don't**

• Don't use gradients, blur, or transparency in backgrounds—the system is flat and graphic, not volumetric.
• Don't round corners beyond 1rem (16px) except for badges and pills; sharp corners feel more technical.
• Don't mix serif and sans-serif fonts; use JetBrains Mono for UI and Arial/Helvetica for body only.
• Don't use soft shadows (blur > 8px); shadows are always sharp and precise, with max blur of 8px.
• Don't add decorative elements (icons, illustrations, animations) that don't serve a functional purpose.
• Don't use colors outside the defined palette; the three accents (green, blue, purple) are the only interactive colors.