Claimpaign

Overview

Claimpaign is a Cardano token distribution platform designed for real-world event activation—conferences, meetups, and community gatherings. The brand embodies "Vibrant Pragmatism": a design aesthetic that balances energetic, eye-catching color (vivid magenta #db2777 and deep indigo #3730a3) with clean, functional interface patterns. The UI evokes confidence and accessibility, transforming complex blockchain mechanics into a seamless, joyful experience. Users feel empowered to distribute tokens effortlessly, whether at a booth or stage.

The voice is direct, optimistic, and action-oriented—never technical jargon, always outcome-focused. Claimpaign speaks in short, punchy sentences that emphasize speed and simplicity. Example: "Create a campaign. Print QR codes. Watch tokens flow." The brand personality is approachable yet professional, balancing playfulness (the parachute illustration, the magenta accent) with the seriousness of blockchain distribution.

Colors

The color system is built on a high-contrast, dual-mode foundation. Light mode (default) uses a clean white surface (#ffffff) with soft grays (#f8f8fa, #e9ecef) for depth, while dark mode inverts to deep navy (#0e0e1a, #181828) for eye comfort. The primary accent is magenta (#db2777), used exclusively for CTAs, active states, and brand moments—it commands attention without overwhelming. Secondary brand color is indigo (#3730a3 light / #4f46e5 dark), reserved for hero sections and secondary actions. Tertiary is golden amber (#f59e0b), used sparingly for status badges and highlights. Error red (#ef4444) signals destructive actions or validation failures. All surfaces use a 1px border at {colors.outline} (#e0e0e8 light / #2a2a42 dark) to define edges without heaviness. Text hierarchy: primary

Typography

The type system uses Inter exclusively, a humanist sans-serif that conveys both approachability and technical competence. Display (64px, 800 weight, -0.02em tracking) anchors hero sections with maximum impact; Headline-lg (40px, 700 weight) breaks major sections; Headline-md (28px, 600 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and feature descriptions, while Body-md (16px, 400 weight, 24px line-height) serves as the default body copy. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons, form labels, and UI controls; Label-sm (12px, 500 weight, 0.05em tracking) for badges and helper text. All headings use negative letter-spacing (-0.01em to -0.02em) to tighten visual weight. On small labels over busy backg

Layout

The layout follows a 12-column grid with a fixed container max-width of 960px, centered with auto margins. Page rhythm is established through semantic spacing: lg (40px) separates major sections (hero, features, footer), md (24px) divides subsections and card groups, sm (12px) spaces inline elements. The hero section spans full-width with a deep indigo background (#3730a3 light / #4f46e5 dark), breaking the container constraint to create visual drama. Feature cards are arranged in a 3-column grid on desktop, collapsing to 1 column on mobile (max-width: 640px). Gutters are consistently 24px. White-space is generous—never cramped—allowing breathing room between text blocks and interactive elements. The footer uses a 4-column grid (2 columns on mobile) with a subtle top border gradient (linea

Elevation & Depth

Depth is achieved through a restrained shadow and border system rather than layered opacity. Level 1 (Base): flat surfaces with 1px solid border at {colors.outline}. Level 2 (Cards, Inputs): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), border: 1px solid {colors.outline}. Level 3 (Modals, Dropdowns): box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), border: 1px solid {colors.outline}. Hover states elevate to Level 2 with a 150ms ease transition. Focus states add a 3px inset ring at rgba(219, 39, 119, 0.1) around interactive elements. Dark mode uses the same shadow values but with slightly higher opaci

Shapes

The shape philosophy is "Soft-Technical"—rounded corners signal friendliness and approachability while maintaining clarity. Buttons and CTAs use full radius (50px) to maximize visual appeal and tap target size (48px height minimum). Cards and containers use md (8px) for a balanced, modern feel. Input fields use DEFAULT (6px) for subtle definition. Badges and pills use full (50px) radius. The hero section has zero border-radius to anchor the page with architectural weight. This hierarchy—sharp hero, soft interactions—creates a visual rhythm that guides users toward action.

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#db2777) background with white text, 48px height, 12px 32px padding, and full (50px) border-radius. On hover, shift to {colors.primary-fixed-dim} (#db2777 at 85% opacity) with a 150ms ease transition. On pressed, maintain the hover state. Button-secondary is transparent with a 2px border at {colors.primary}, text in {colors.primary}, and the same dimensions. Hover adds a subtle rgba(219, 39, 119, 0.08) background wash. All buttons use label-md typography (14px, 600 weight).

Containers & Surfaces Cards are the default container for grouped content. Base card: {colors.surface-container-lowest} (#f8f8fa) background, 1px solid border at {colors.outline} (#e0e0e8), 8px border-radius, 24px

Do's and Don'ts

**Do**

• Do use {colors.primary} (#db2777) exclusively for CTAs and primary actions—it's the brand's signature accent and must never be diluted or overused on secondary elements.
• Do maintain 48px minimum height for all touch targets (buttons, inputs, list items) to ensure mobile accessibility and comfortable interaction.
• Do apply the full (50px) border-radius to buttons and CTAs to signal friendliness and maximize visual appeal; reserve md (8px) for cards and containers.
• Do use label-md (14px, 600 weight) for all button text and form labels to maintain consistent visual hierarchy and readability.
• Do stack sections vertically with lg (40px) spacing to create breathing room and guide users through the page flow.
• Do apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) on small labels over colored backgrounds to ensure legibility in all contexts.

**Don't**

• Don't use {colors.primary} (#db2777) for body text, backgrounds, or non-interactive elements—reserve it exclusively for actions and brand moments.
• Don't mix border-radius values on related elements (e.g., don't use 4px on a button and 12px on its hover state); maintain consistency within a component family.
• Don't apply shadows deeper than {elevation.lg} (0 4px 16px rgba(0, 0, 0, 0.12)) on standard cards; excessive shadow depth flattens the visual hierarchy.
• Don't use more than 2 accent colors in a single view; {colors.primary} (#db2777) and {colors.secondary} (#3730a3) are sufficient for most layouts.
• Don't set line-height below 1.5 for body text; maintain 24px minimum line-height for body-md (16px) to ensure readability.
• Don't disable hover/focus states on interactive elements; all buttons, links, and inputs must have clear, 150ms ease transitions to communicate interactivity.