CoinGraph

Overview

CoinGraph is a precision-engineered crypto intelligence platform designed for AI agents, developers, and traders who demand verifiable, real-time data. The design system embodies "Technical Clarity"—a movement that prioritizes information density and trustworthiness through a high-contrast, data-forward aesthetic. The void-dark canvas (#0b0e15) provides a neutral backdrop that allows the vibrant lime accent (#b4de6d) to command attention on critical CTAs and live indicators, while secondary accents (orange #ff9540 for warnings, green #2fd98c for confirmation) create a semantic color language rooted in crypto trading conventions. The UI evokes precision, authority, and real-time responsiveness—evoking the feeling of a professional trading terminal reimagined for the AI era.

The brand voice is direct, technical, and unapologetic. Sentences are short and fact-driven: "Fragmented crypto data in. One verifiable answer out." Vocabulary leans into crypto-native terms (onchain, liquidity, leverage, momentum) without condescension. The tone avoids hype; instead, it emphasizes proof, fingerprints, and sourcing. Every design decision—from the monospace font on inputs to the animated radial diagram showing data sources—reinforces the message: this is infrastructure you can trust because every number is traced, timed, and verifiable.

Colors

The color system is built on a void-to-bone spectrum anchored by three semantic accent roles. Primary (#b4de6d, a vibrant lime) is reserved exclusively for CTAs, live indicators, and brand moments—it commands the eye and signals actionable elements. Secondary (#ff9540, a warm orange) appears on warnings, deprecations, and secondary actions, maintaining visual hierarchy without competing for attention. Tertiary (#2fd98c, a teal-green) confirms successful states and live status badges. The surface stack progresses from void (#0b0e15, the base canvas) through ink (#0d1119, slightly raised), slab (#141924, card backgrounds), edge (#232a38, borders and dividers), to bone (#e8ecf2, primary text). Mist (#858da0) is the secondary text color, used for helper text, labels, and disabled states. All i

Typography

The type system uses Geist (sans-serif) for UI and Geist Mono for data, code, and technical labels. Display (62px, 600 weight, -0.035em tracking) anchors hero sections with maximum impact; headline-lg (40px, 600 weight, -0.02em) breaks sections; body-md (16px, 400 weight) carries narrative copy. The monospace font (13px, 400 weight) appears on input fields, API endpoints, and token addresses—reinforcing the technical, verifiable nature of the product. All headings use negative letter-spacing to create visual compression and authority; body text uses neutral tracking to maintain readability at 16px. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm) when overlaid on animated backgrounds (e.g., the hero diagram) to ensure legibility. Numerals use tabular figures (fon

Layout

The layout uses a 12-column grid with a max-width of 1400px, centered with auto margins. Hero sections use a 2-column split (1.05fr / 1fr) on large screens, collapsing to single-column on mobile. Spacing follows a 4px unit system: xs (4px), sm (8px), md (16px), lg (24px), xl (32px), 2xl (48px). Section separation uses lg spacing (24px) vertically; card padding uses md (16px). The gutter (16px) applies to left/right padding on all sections. White-space is generous but purposeful—the void background is never empty; animated gradients and dot-grid overlays (opacity: 60%) provide visual texture without clutter. Container queries are not used; instead, fluid typography (clamp(38px, 5.6vw, 62px)) scales headings responsively. The grid-based rhythm creates predictable, scannable layouts that feel

Elevation & Depth

Depth is conveyed through layered surfaces and subtle shadows, not through dramatic drop-shadows. The elevation system has three levels: sm (0 1px 2px rgba(11, 15, 23, 0.1)) for minor separations like borders; md (0 12px 32px -20px rgba(11, 15, 23, 0.15)) for card hover states and modals; lg (0 24px 48px -24px rgba(11, 15, 23, 0.4)) for prominent overlays and hero elements. Cards use a 1px border at {colors.outline} (#232a38) to define edges without relying on shadow alone. On hover, cards elevate to md shadow and shift border to primary (#b4de6d), creating a subtle but clear state change. The

Shapes

The shape philosophy is "Precision Minimalism"—sharp, technical corners softened only where interaction demands it. Buttons and inputs use 8px border-radius ({rounded.lg}), creating a subtle, modern feel without the softness of 12px+ radii. Cards use 8px as well, maintaining visual consistency. Badges and pills use full (9999px) border-radius to signal non-interactive status elements. The 8px radius is the workhorse; it's large enough to feel contemporary but small enough to preserve the technical, no-nonsense aesthetic. Animated elements (the radial diagram, the dot-grid background) use sharp

Components

Action Elements Buttons come in three variants: primary (lime background, dark text, 8px radius, 10px 20px padding), secondary (dark background with border, light text, same radius and padding), and ghost (transparent, no border, text-only). All buttons use a 150ms transition on background-color and border-color. Primary buttons shift to primary-fixed-dim (#8fb84d) on hover, maintaining the lime family while signaling interactivity. Secondary buttons gain a primary border and primary text on hover. Ghost buttons simply shift text to primary. Active states (pressed) apply an inset shadow (box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2)) to create tactile feedback. Disabled states reduce opacity to 50% and remove pointer-events.

Inputs & Forms Input fields use a 1px border at {colors

Do's and Don'ts

**Do**

• Do use primary (#b4de6d) exclusively for CTAs, live indicators, and brand moments—never for body text or backgrounds.
• Do apply 150ms transitions on all interactive state changes (hover, focus, active) using cubic-bezier(0.4, 0, 0.2, 1) for snappy, predictable feedback.
• Do use Geist Mono (13px, 400 weight) for all data, API endpoints, token addresses, and technical labels to reinforce verifiability.
• Do maintain 8px border-radius on buttons, inputs, and cards for a consistent, technical aesthetic.
• Do layer surfaces using the surface-container stack (low → high) on hover to create depth without heavy shadows.
• Do use semantic colors (tertiary for success, secondary for warnings, error for failures) to create a scannable, crypto-native interface.

**Don't**

• Don't use primary color for body text, backgrounds, or non-interactive elements—it must remain a signal for action.
• Don't apply shadows larger than md (0 12px 32px -20px) on cards or buttons; the void background is dark enough without heavy shadows.
• Don't use rounded corners larger than 12px on any component; the brand is technical, not soft.
• Don't mix Geist and Geist Mono on the same line unless separating data from labels (e.g., 'Price: $1,234.56').
• Don't reduce opacity below 50% for disabled states; use a desaturated color or a distinct disabled variant instead.
• Don't animate elements for more than 2 seconds in a loop; keep animations subtle and purposeful (e.g., the throb badge, the radial diagram).