Eclipse runs a monochromatic canvas with a single neon-green pulse — the visual grammar is closer to a 90s anime cel than a blockchain dashboard. Headlines use GT Alpina Condensed at hairline weights (100–200), the thinnest possible serif line that still reads as letterforms, paired with Barlow Condensed for compact UI chrome. The single chromatic token (#a1fea0) behaves like a highlighter drawn over an ink-on-paper sketch: borders, button fills, cloud illustrations, and glow halos all share that one vivid green against pure black and white. Surfaces are flat — no shadows, no gradients, no elevation tricks. Buttons are fat pills (25px radius), labels are tracked-out typewriter caps, and illustration carries the atmosphere while the type does the structural work.
#a1fea0Primary action fill, active nav state, decorative border accents, cloud and glow illustration fills, investor-card spotlight — the only chromatic token in the system, applied sparingly to make each occurrence feel like a marker pen stroke
#000000Body and heading text, hairline borders across cards/badges/buttons, footer rules, outlined button stroke — the dominant neutral that carries all structural lines
#ffffffPage canvas, card surfaces, button text on dark fills, nav backgrounds, image backdrop — the base layer everything sits on
562px · 200 · 0.8The quick brown fox jumps
182px · 700 · 0.8 · -0.06px trackingThe quick brown fox jumps
120px · 700 · 0.83 · -0.06px trackingThe quick brown fox jumps
96px · 700 · 0.83The quick brown fox jumps
88px · 100 · 1.1The quick brown fox jumps
80px · 700 · 0.9 · -0.04px trackingThe quick brown fox jumps
64px · 100 · 1.13The quick brown fox jumps
61px · 100 · 1.1The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
UI chrome, nav links, buttons, badges, secondary headlines, marquee strips. Condensed proportions keep horizontal copy tight inside pill buttons and ticker bars. 700 for emphasis, 500 for nav, 400 for body UI. Letter-spacing opens up on small caps labels (0.1–0.2em) and tightens on large display uses (-0.02 to -0.03em).
Display and hero headlines — the signature voice. Hairline weights 100–200 push the serif into a near-glyph wireframe, making words feel stamped rather than typeset. Letter-spacing tightens as size grows: -0.01em at 24px climbing to -0.06em at the 562px masthead. Substitutes: Cormorant Garamond Condensed Light, EB Garamond 200.
Eyebrow labels, section tags, small body annotations — the 'label maker' voice. Always set in uppercase with 0.2em tracking, functioning as a timestamp or chapter mark. Substitutes: IBM Plex Mono, Space Mono, JetBrains Mono.
math — detected in extracted data but not described by AI
25px100px25px25px1px2px3px4px5px6px8px10px16px18px20px24px32px36px40px48px52px60px64px120px140pxFilled #a1fea0 background, Ink Black text. Barlow Condensed 500, 16px, uppercase, 0.1em tracking. Padding 10px 24px. Border 1px solid Ink Black. Radius 25px (pill). No shadow. On hover the background intensifies and the border thickens to 2px.
White background, Ink Black text and 1px border. Barlow Condensed 500, 16px, uppercase, 0.1em tracking. Padding 10px 24px. Radius 25px. Trailing arrow icon (→) in Ink Black. Pairs directly beside the primary green button to create a two-step 'softer / louder' hierarchy.
White background, transparent until scrolled. Left: text nav links in Barlow Condensed 500, 16px, uppercase (ABOUT, BUILDERS, CAREERS, ECOSYSTEM) with caret dropdowns. Center: Eclipse wordmark in Barlow Condensed 700. Right: social icon cluster (Instagram, YouTube, Discord, X) + 100px-radius pill 'Start Building' CTA in Ink Black with Paper White text.
Stacked three-line composition. Line 1 'SOLANA' in GT Alpina Condensed 200, 120–182px, line-height 0.80, -0.06em tracking, Paper White on Ink Black band. Line 2 'ON' in 80px regular, treated as connector. Line 3 'ETHEREUM' mirrors Line 1. Eyebrow 'ECLIPSE IS' in Atlas Typewriter 12px, 0.2em tracking, sits above. Center-aligned. No drop cap, no decoration — the type does the work.
Atlas Typewriter 12px, weight 400, uppercase, 0.2em tracking, Ink Black. Centered. 16px gap to the headline below. Examples: 'ECLIPSE IS', 'BACKED BY', 'ETHEREUM'S FIRST SVM L2'.
White card, 1px Ink Black border, 25px radius, padding 32px. Serif name (e.g. 'Portal Ventures') in GT Alpina Condensed 100–200, 24–33px, centered. Active state: #a1fea0 fill replaces white, text remains Ink Black, and a soft green glow halo extends ~20px beyond the card edge (a blurred green ellipse behind the card). Inactive state: pure white.
Ink Black background, Paper White crescent ring (the Eclipse), green cloud illustrations at the base, and an illustrated character/vehicle in the lower third. Centered play button: 80px circle, 1px Paper White border, no fill, with a Paper White triangle icon. No drop shadow on the illustration itself — depth comes from the green cloud layer sitting below the character.
Single horizontal line scrolling edge-to-edge. Barlow Condensed 700, 48–80px, uppercase, Ink Black on Paper White. Items separated by em-dashes and 32px gaps. No background color change — relies on weight and scale for emphasis.
Ink Black background band. White text and icons. Barlow Condensed 500, 16px, uppercase for link lists. Social icons 24px, 1px stroke, Paper White. Generous 80px top padding.
#ffffffDefault page and card canvas
#a1fea0Accent wash — investor spotlight, decorative blob, active highlight
#000000Hero and footer inversion band
The system avoids box-shadow elevation almost entirely. The only deliberate glow is the green halo behind an active investor card — a single soft outer shadow that reads as a spotlight, not depth. Cards, buttons, and badges rely on 1px ink borders for definition, keeping the surface treatment flat and comic-like.
0 0 40px 10px rgba(161, 254, 160, 0.5)
Centered max-width 1200px column with full-bleed dark hero at the top. The hero is a pure vertical stack: eyebrow label → stacked display headline → dual pill CTAs → illustration anchored bottom-center. Below the hero, the page alternates between Paper White sections (investor grid, feature blocks) and thin marquee strips, with generous 80px section gaps. The investor grid is a 3-column layout that collapses vertically on narrow screens. Footer is a full-bleed Ink Black band. Navigation is a fixed white top bar with a centered wordmark and right-aligned social + CTA cluster.
Illustration-first, anime/cel-shaded style with thick ink outlines and flat color fills. Characters (bull-headed rider on a motorcycle, turbo car) drawn in a 90s-anime register. Environments mix pure black negative space with flat green cloud forms — no gradients, no atmospheric perspective. Photography is absent; product UI is rendered through illustration and video. Icons are minimal-stroke line icons, mono (Ink Black or Paper White), 1px weight, never filled. Imagery is contained — never full-bleed except inside the hero band — and always sits above a flat color field, never composited onto a photo.
Quick Color Reference - text: #000000 - background: #ffffff - border: #000000 - accent / decorative: #a1fea0 - primary action: #a1fea0 (filled action) - inversion band: #000000 background, #ffffff text Example Component Prompts 1. Hero Display Headline: full-bleed #000000 background. Eyebrow 'ECLIPSE IS' in Atlas Typewriter 12px, 0.2em tracking, #ffffff, centered. Then a three-line stacked headline: 'SOLANA' / 'ON' / 'ETHEREUM' in GT Alpina Condensed weight 200, 120px, line-height 0.80, -0.06em letter-spacing, #ffffff, centered. Below, a 16px gap, then two pill buttons side by side: outlined black 'Bridge to Eclipse →' and filled #a1fea0 'Build on Eclipse', both 25px radius, Barlow Condensed 500, 16px, uppercase, 0.1em tracking, 10px 24px padding, 1px solid #000000 border. 2. Investor Spotlight Card: 1200px max-width parent, 3-column grid. Each card is 32px padded, 1px solid #000000 border, 25px radius, #ffffff background. Name in GT Alpina Condensed 200, 24px, centered. Active card swaps #a1fea0 for the background and gains a 40px green outer glow (#a1fea0 at 50% alpha). Eyebrow 'BACKED BY' / 'GREAT INVESTORS & ANGELS' in Atlas Typewriter 12px above the grid. 3. Marquee Strip: full-bleed band, 80px tall, #ffffff background. Scrolling single-line copy in Barlow Condensed 700, 48px, uppercase, #000000, with em-dash separators and 32px gaps between items (e.g. 'FASTEST LAYER 2 — POWERED BY SVM — ETHEREUM'S FASTEST LAYER 2'). 4. Footer Band: full-bleed #000000 background, 80px top padding. Two-column inner layout, 1200px max-width, #ffffff text. Left: Barlow Condensed 500, 16px, uppercase link list. Right: row of social icons at 24px, 1px stroke, #ffffff. 5. Section Header Pair: an Atlas Typewriter 12px eyebrow (#000000, 0.2em tracking, centered) with 16px gap, then a Barlow Condensed 700, 48px heading below — pair this whenever a section needs a title without using the full display serif.
Same mono-plus-one-accent discipline with a single vivid brand color against black/white, plus pill-shaped CTAs and heavy condensed display type.
Cel-illustration meets crypto dashboard — flat black/white surfaces with one neon token, tight letter-spaced caps, and pill buttons.
Dark hero inversion over a white site, outlined-vs-filled pill CTA pairing, and a single saturated accent used as spotlight not chrome.
Anime/cel-shaded illustration language applied to a tech brand, with ultra-condensed display type and high-contrast ink-on-white surfaces.
Use the design exports or connect Musterlab to your AI.
