Signal Mint
#22e2a8Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content
Cosmos Network
cosmos.networkWebsite preview
The design language
Cosmos Network presents an institutional dark-mode financial infrastructure aesthetic: a near-black canvas where white typography does all the visual work, supported by pill-shaped ghost controls and generous whitespace. The single custom typeface 'The Future' carries a slight positive tracking that gives headlines a measured, ceremonial quality — authority through restraint rather than volume. Layout follows a disciplined two-column rhythm: large declarative headlines paired with restrained secondary imagery (like the concentric-circle globe diagram), followed by horizontal case-study card carousels. Color is almost entirely suppressed — any chromatic presence is deeply desaturated, creating a quiet, high-trust environment where structure and whitespace carry the weight.
Color palette
accent
Deep Navy
#0a2142Ambient atmospheric tint, decorative background wash behind globe visualization
Concentric Teal
#085556Diagram and data-visualization stroke, subtle infographic accent
neutral
Void Black
#000000Page canvas, section backgrounds, maximum-contrast surface
Carbon
#181818Navigation bar, elevated surface base, footer surface
Graphite
#1e1f20Card surfaces, elevated panels, contained content blocks
Iron
#333333Hairline borders, dividers, structural separators
Slate
#807f7fMuted secondary text, inactive nav items, subtle metadata
Fog
#999999Disabled labels, low-emphasis helper text, tertiary metadata
Ash
#666666Deep-recessed borders, very-low-emphasis outlines
Chalk
#f1f4f4Alternate light surface, inverted card context
Pure White
#ffffffPrimary headings, body text, icon strokes, button borders, link text — the single chromatic force in the system
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
60px · 400 · 1.13 · 2.4px trackingThe quick brown fox jumps
heading
36px · 400 · 1.13 · 0.9px trackingThe quick brown fox jumps
heading-sm
32px · 400 · 1.25 · 0.8px trackingThe quick brown fox jumps
subheading
24px · 400 · 1.33 · 0.6px trackingThe quick brown fox jumps
body
16px · 400 · 1.6 · 0.4px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.43 · 0.28px trackingThe quick brown fox jumps
caption
12px · 400 · 1.5 · 0.24px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
The Future
- Weights
- 400
- Sizes
- 12px, 14px, 16px, 24px, 32px, 36px, 60px
- Line height
- 1.13–1.63
- Letter spacing
- 0.02em at 12–14px, 0.025em at 16–24px, 0.04em at 32–60px
- Fallback
- Geist, Inter, or DM Sans with positive letter-spacing applied at small sizes
- Features
- "ss02" on, "ss09" on
Sole typeface across the entire system — navigation, body, headings, buttons, and labels. The slight positive tracking (0.02–0.04em) at all sizes creates a measured, architectural quality uncommon in fintech.
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1280px
- Section gap
- 80px
- Card padding
- 20px
- Element gap
- 16px
Border radius
nav
20pxcards
20pximages
10pxbuttons
20pxlargeCards
30pxSpacing scale
2px4px5px8px10px12px15px16px20px24px28px30px32px36px40px48px50px56px72px80px86px88px96px100px108px154px168px208px303px308pxGuidelines
Do
- Use 'The Future' exclusively at weight 400 — the system carries authority through spacing and restraint, not bold weights
- Maintain 20px border-radius for all interactive surfaces (buttons, nav items, cards) to preserve the pill geometry
- Keep the canvas near-pure-black (#000000) with #1e1f20 as the only card elevation — avoid introducing mid-gray fills that dilute contrast
- Apply positive letter-spacing from the type scale to every text element, including body copy at small sizes
- Use #ffffff for all text and icon strokes; introduce #807f7f only for genuine de-emphasis, never for decoration
- Anchor hero and section layouts on a two-column split (text-left, visual-right) with the headline at 60px display size
- Reserve #22e2a8 for live-status or active-state indicators only — do not use it as a brand color or button fill
Don’t
- Do not introduce a second typeface — 'The Future' at varying sizes and tracking covers the entire system
- Do not use colored backgrounds (blue, teal, orange) as section backgrounds — these appeared only in decorative diagrams and would break the monochrome system
- Do not add box-shadows or glows to cards or buttons — the system relies on flat dark surfaces and hairline borders, never elevation effects
- Do not bold or italicize type — weight 400 with tracking is the only typographic move available
- Do not place buttons in a filled-white style on dark sections — the ghost outlined pill is the canonical action surface
- Do not use #0000ee or any default-link blue — links inherit #ffffff with optional underline only
- Do not introduce gradients between surfaces — the system is strictly flat, with color appearing only in infographic elements
Components
Ghost Pill Button
Primary interactive control used for top-level calls-to-action in navigation and heroTransparent fill with 1px white border (#ffffff), 20px border-radius (pill shape), 10px 30px padding, text in 'The Future' at 16px weight 400, letter-spacing 0.025em, with a trailing arrow icon ›
Card Surface
Container for case studies, features, and content blocks20px border-radius, #1e1f20 background, no visible border or shadow, generous internal padding (20px), full-bleed image at top with sharp top corners rounding to match card
Case Study Card
Horizontal card displaying a customer/partnership story in a scrollable carouselImage header (rounded top corners), #1e1f20 background, 20px radius, white company name at 24px with positive tracking, body description at 16px in #807f7f, small uppercase category tag at bottom (Lending, Payments, Tokenization)
Navigation Bar
Top-level site navigationDark Carbon (#181818) background, 'C☿SMOS' wordmark left, four nav items centered (Solutions, Technology, Resources, About) with dropdown indicators, ghost pill CTA 'Contact Us' right-aligned
Headline Display Block
Hero and section headlinesLeft-aligned, 'The Future' at 60px weight 400, pure white (#ffffff), line-height 1.13, letter-spacing 0.04em, occupies left half of a two-column hero layout
Body Paragraph
Supporting descriptive text under headlines'The Future' at 16px weight 400, white with reduced visual weight, line-height 1.6, max-width ~540px, left-aligned in hero context
Stat Strip
Horizontal row of key metrics in the heroSingle line, 'The Future' at 24–32px, large numeric value in white followed by descriptive label in #807f7f, items separated by generous horizontal spacing (30px+)
Carousel Navigation Dots
Indicator for horizontal scroll position in case-study carouselSmall circular dots (6px), #807f7f for inactive, #ffffff for active state, positioned top-right of carousel header
Globe Visualization
Decorative data-visualization element in heroStylized Earth render in dark tones with concentric circles radiating from a 'TDeFi' node, white annotation labels ('FIGURE', 'Ondo fintech', 'ripple'), positioned right of headline
Footer Surface
Site footer with links and metadata#181818 background, same nav and typography as header, hairline #333333 top border, compact link rows
Category Tag Label
Small uppercase tag at bottom of case study cards'The Future' at 12px weight 400, letter-spacing 0.02em, #807f7f color, no background or border, sits flush left at card bottom
Surfaces & elevation
Level 0
Void
#000000Page-level canvas, full-bleed section backgrounds
Level 1
Carbon
#181818Navigation bar, footer, primary surface container
Level 2
Graphite
#1e1f20Elevated card surfaces, content blocks above canvas
Level 3
Chalk
#f1f4f4Inverted light surface for contrast sections or modal dialogs
The system intentionally avoids all shadow and glow effects. Elevation is communicated exclusively through surface tone shifts: #000000 canvas → #181818 nav/footer → #1e1f20 card. No drop-shadows, no inner-shadows, no blur effects. This flat elevation strategy creates a clean, diagrammatic quality where every element sits clearly on the same plane, reinforcing the institutional and technical character of the brand.
Layout & imagery
Layout
Page architecture is centered max-width contained at ~1280px with generous outer padding. The hero is a two-column split: headline + body left (~55%), globe diagram right (~45%), with the headline at 60px and a clear vertical hierarchy of headline → body → CTA → stat strip below. Below the hero, sections flow seamlessly on the same #000000 canvas with 80px vertical gaps between blocks. Case study content uses a horizontal card carousel with 4 visible cards and partial bleed on the right edge to suggest scroll continuation, with navigation dots top-right. Navigation is a single horizontal bar — no sidebar, no mega-menu overlay visible. The overall rhythm is quiet and spacious: large headlines anchor dark sections, whitespace separates content blocks, and no section uses a contrasting background color, keeping the monochrome system intact throughout.
Imagery
Visual language is restrained and diagrammatic rather than photographic. The hero uses a single large data-visualization element — a dark globe render with concentric circle nodes and white annotation labels (FIGURE, Ondo fintech, ripple) that reads like a schematic or system diagram. Case study cards use real photography but crop it tight to the top of the card, desaturated to fit the dark palette, functioning as content headers rather than lifestyle imagery. No full-bleed editorial photography exists anywhere on the page. Iconography is minimal-stroke white line icons used sparingly for nav dropdowns and directional arrows. The overall visual register is institutional and technical — closer to an annual report or infrastructure dashboard than a consumer product.
Design notes
Agent Guide
## Quick Color Reference - text: #ffffff - background: #000000 - border: #333333 - muted text: #807f7f - card surface: #1e1f20 - nav surface: #181818 - primary action: no distinct CTA color ## Example Component Prompts 1. **Hero section (dark, two-column)**: #000000 canvas, max-width 1280px centered. Left column: 60px 'The Future' weight 400, #ffffff, letter-spacing 2.4px, headline text. Below: 16px body, #807f7f, line-height 1.6, max-width 540px. Below: ghost pill button, 1px #ffffff border, 20px radius, 10px 30px padding, 16px 'The Future' #ffffff with arrow. Right column: 400px globe diagram with concentric circles, white annotation labels. 2. **Case Study Card**: #1e1f20 background, 20px radius, 20px internal padding. Top: full-width image header, 16:9 ratio, top corners rounded to 20px. Middle: 24px 'The Future' weight 400, #ffffff, company name. Below: 16px 'The Future', #807f7f, 2-line description. Bottom: 12px 'The Future', #807f7f, letter-spacing 0.24px, category tag. 3. **Navigation Bar**: #181818 background, full-width, 80px height. Left: 'C☿SMOS' wordmark in 16px 'The Future' weight 400, #ffffff. Center: four nav items at 16px 'The Future', #ffffff, separated by 30px gap, each with a dropdown chevron icon. Right: ghost pill button 'Contact Us' with 1px #ffffff border, 20px radius, 10px 30px padding. 4. **Stat Strip**: horizontal row, 24px 'The Future' weight 400, #ffffff for numeric values (150+, $70bn, 10 years+, 10000+, <1 second), followed immediately by 16px 'The Future', #807f7f, for descriptor text. Items separated by 30px gap, no dividers. 5. **Carousel Header with Nav Dots**: 36px 'The Future' weight 400, #ffffff headline on the left. Right side: two small 6px circular dots, #807f7f (inactive) and #ffffff (active), 8px gap between them, positioned vertically centered with the headline.
Typographic System Philosophy
The system uses a single weight (400) across all roles — the visual hierarchy is created entirely through size, tracking, and color opacity. Letter-spacing scales proportionally: smaller text gets tighter positive tracking (0.02em at 12px) while display text gets expansive tracking (0.04em at 60px). This creates a consistent 'architectural' feel where every element feels carefully measured. The font features ss02 and ss09 should always be enabled to preserve the intended character variants. Never simulate bold with font-weight — use size and tracking instead.
Similar brands
Chainalysis
Same dark-canvas financial-infrastructure aesthetic with white tracked type and minimal color
Stripe (Press / Institutional pages)
Large declarative headlines on near-black backgrounds with pill-shaped ghost controls and flat card surfaces
Messari
Institutional crypto research aesthetic with dark backgrounds, generous whitespace, and single-weight geometric type
Fidelity Institutional
Financial trust language expressed through monochrome dark surfaces and measured typography rather than color
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
