Caldera

Overview

Caldera is a blockchain infrastructure platform that demands visual authority and technical credibility. The design system employs 'Maximalist Minimalism'—a paradoxical aesthetic that pairs austere, neutral surfaces (#f7f6f2 background, #151317 text) with a vivid, energetic primary orange (#fc5000) that commands attention on CTAs, interactive elements, and brand moments. This creates a high-contrast, no-nonsense visual language that feels both corporate and cutting-edge, evoking the precision of infrastructure engineering paired with the boldness of Web3 innovation. The UI is intentionally stark: generous whitespace, heavy typography (PP Neue Corp Compact Ultrabold at 64px for headlines), and minimal ornamentation ensure that every interactive element—especially the orange buttons—feels intentional and urgent.

The brand voice is technical yet approachable, confident without arrogance. Caldera speaks in declarative statements about interconnected blockchains and Ethereum settlement, avoiding hype-speak. Tone: direct, informative, occasionally witty. Example: 'The Internet Of Chains' (the hero headline) is a bold, simple claim—no superlatives, no marketing fluff. The vocabulary favors precision: 'purpose-built blockchains,' 'settling on Ethereum,' 'interconnected'—language that signals expertise to developers and architects.

Colors

The color system is built on a foundation of near-monochrome neutrals with a single, dominant accent. The surface stack ranges from #f7f6f2 (primary background, warm beige-gray) through #e2e2df (surface-dim) to #151317 (near-black text and inverse surfaces), creating a sophisticated, print-like palette. This neutral foundation is deliberately austere—it communicates stability, technical rigor, and institutional credibility. Primary (#fc5000, vivid orange-red) is the brand's signature accent, used exclusively on CTAs ('Get Started,' 'Explore Chains'), hover states, and focus indicators. It appears sparingly but with maximum impact: at 27 occurrences in the DOM, it commands attention without overwhelming. Secondary (#1358df, deep blue) and Tertiary (#524ae9, purple) provide supporting accent

Typography

The type system is a two-family stack: PP Neue Corp Compact Ultrabold (a geometric, ultra-condensed sans-serif) for all display and headline levels, and DM Sans (a humanist sans-serif) for body, labels, and UI text. This pairing creates visual tension—the display family is architectural and commanding (64px at -0.04em letter-spacing for the hero), while DM Sans is warm and readable (18px body-lg at 28px line-height). Headlines use aggressive negative letter-spacing (-0.04em for display, -0.03em for headline-lg) to create a compact, powerful silhouette; body text uses neutral or slightly positive spacing (0em to 0.01em) for legibility. Fragment Mono is reserved for labels and technical annotations (12px, 400 weight, 0.05em letter-spacing) to signal code or system-level information. Apply te

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid-to-fixed breakpoint strategy. The hero section spans full-width with generous vertical rhythm: the headline 'The Internet Of Chains' sits in the upper-left quadrant with 40px (lg spacing) margins, while the descriptive text and CTAs occupy the lower-right, creating asymmetrical balance. Section separation uses lg spacing (40px) for major content breaks and md spacing (24px) for subsections. The gutter (24px) is applied consistently to card grids and list layouts. Whitespace is weaponized: the hero has substantial empty space (roughly 50% of the viewport below the headline) to emphasize the boldness of the claim. Container max-widths vary by section (874px, 1166px, 1299px observed) to create visual rhythm and p

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than color shifts. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on flat elements, md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and lifted surfaces, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and prominent overlays. The primary CTA button uses a consistent 0 3px 8px rgba(0, 0, 0, 0.15) shadow to lift it from the surface and signal interactivity. Cards use md elevation by default and transition to lg on hover, creating a tactile sense of lift. Input fields use a 1px soli

Shapes

The shape philosophy is 'Technical Softness'—sharp, geometric forms softened only where interaction demands it. Buttons and input fields use full-radius (border-radius: 9999px, or {rounded.full}) to signal affordance and approachability; they are the most rounded elements on the page, making them instantly recognizable as interactive. Cards and containers use lg radius (1rem, 16px) to create a modern, approachable aesthetic without feeling overly playful. Navigation and list items use md radius (0.75rem, 12px) for subtle definition. The logo and brand mark use no radius (0px), emphasizing geom

Components

Action Elements Buttons are the primary interactive element and use a strict two-state system. button-primary uses {colors.primary} (#fc5000) background with white text, full radius (9999px), and 12px 24px padding for a 48px total height. On hover, the background shifts to {colors.primary-fixed-dim} (#eb4a00, a darker orange) with a smooth 200ms transition. The button includes a consistent 0 3px 8px rgba(0, 0, 0, 0.15) shadow to lift it from the surface. button-secondary uses a transparent background with a 1px solid outline at {colors.outline} (#757473), maintaining the same dimensions and radius. On hover, the background fills with {colors.surface-container-high} (#c7c6c4) while the text remains {colors.on-surface} (#151317). This creates a clear visual hierarchy: primary buttons dem

Do's and Don'ts

**Do**

• Do use the primary orange (#fc5000) exclusively on CTAs and focus states—it is the brand's signature accent and loses impact if overused.
• Do apply full radius (9999px) only to buttons and input fields; use lg radius (1rem) for cards and md radius (0.75rem) for secondary containers to maintain visual hierarchy.
• Do pair PP Neue Corp Compact Ultrabold headlines with aggressive negative letter-spacing (-0.04em to -0.02em) to create a compact, powerful silhouette that commands attention.
• Do use the surface stack (#f7f6f2 to #151317) to create depth through background shifts and shadows, not color saturation—the palette is intentionally monochromatic to emphasize the orange accent.
• Do apply consistent shadow elevations (sm/md/lg) to create tactile hierarchy; hover states should transition shadows smoothly over 200ms to signal interactivity.

**Don't**

• Don't use the primary orange on non-interactive elements or backgrounds—it is reserved for CTAs, focus states, and brand moments to maintain maximum impact.
• Don't apply rounded corners to the logo, brand mark, or structural containers; reserve rounding for interactive elements to signal affordance.
• Don't mix typefaces within a single headline or body paragraph; use PP Neue Corp Compact Ultrabold for display/headlines and DM Sans for body/UI consistently.
• Don't introduce new accent colors beyond primary (#fc5000), secondary (#1358df), and tertiary (#524ae9); the palette is intentionally limited to maintain visual clarity.
• Don't use color alone to convey status or hierarchy—always pair color changes with weight, size, or shadow shifts to ensure accessibility and visual clarity.