---
name: Cosmos Network
description: "This site is worth including as a prime example of a premium, enterprise-focused SaaS/Developer Tools design that balances bold typography, a technical dark aesthetic, and a highly restrained, functio"
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#808080"
  tertiary: "#22E6A8"
  neutral: "#808080"
  bg-soft: "#181818"
  line: "rgba(128,128,128,0.5)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  h2:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.32px"

rounded:
  sm: 4px
  md: 8px
  lg: 20px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

Enterprise-grade blockchain solutions for building interoperable, sovereign financial systems.

*A secure, high-tech command center for global financial infrastructure.*

## Colors

High-contrast dark mode with a single mint-green accent, using stark white text on deep black and muted gray for secondary information.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#808080`)** — uses `ink-soft` token
- **Accent (`#22E6A8`)** — uses `accent` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(128,128,128,0.5)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

- Use 'The Future' (geometric-sans) for all text to maintain a clean, modern, and highly legible hierarchy.
- Keep font weight consistent at 400 for a lightweight and professional feel.
- Use tight letter-spacing for large display text to create a more cohesive and impactful visual block.

## Layout

A full-width hero with a 2-column split (text left, illustration right) followed by a centered 1-column content section with horizontal cards.

*Rhythm:* A consistent 4px-based grid system that ensures uniform spacing between elements, with larger multiples used for major sections and layout containers.

## Elevation & Depth

- none
- Borders: Minimal and functional, using 1px borders primarily for structural definition in navigation and buttons.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 20px
- `pill`: 9999px

## Components

- **button:** Pill-shaped buttons with white background and black text, featuring a small '+' icon and subtle rounded corners.
- **card:** Horizontal cards with a soft off-white background, rounded corners, and a clear left-to-right flow (icon, title, description, badge).
- **chip:** Small, pill-shaped tags with a light gray background and dark text, used for categorization.
- **input:** Simple text fields with minimal styling, focusing on clear typography and ample padding.
- **hero:** A high-impact dark section featuring large-scale typography on the left and a detailed, dotted-globe illustration with overlapping lines and labels on the right.

## Do's and Don'ts

**Don't:**
- Don't use bright, multi-colored gradients — the screenshot shows a stark, high-contrast dark theme with a single mint-green accent.
- Don't use heavy, ornate typography — the screenshot shows a clean, geometric sans-serif font with consistent weight.
- Don't use sharp, square corners for buttons and cards — the screenshot shows soft, rounded, and pill-shaped elements.
- Don't use busy, photographic backgrounds in the hero — the screenshot shows a stylized, technical dotted-globe illustration.
- Don't use excessive drop shadows or 3D effects — the screenshot shows flat, surface-based design with minimal depth.
- Don't use small, cramped spacing — the screenshot shows generous padding and clear separation between elements.
- Don't use a wide variety of colors — the screenshot shows a limited palette of black, white, gray, and a single accent color.

---

## System Prompt (paste into AI agent)

```
Design a sophisticated, enterprise-grade technology website for a blockchain company. Use a deep black (#000000) background with high-contrast white (#FFFFFF) text and muted gray (#808080) for secondary elements. Incorporate a single, vibrant mint-green (#22E6A8) accent for key highlights. Employ a clean, geometric sans-serif font (like 'The Future') with a tight, professional scale. Maintain a strict 4px spacing grid and use soft, pill-shaped components. The layout should feature a powerful 2-column hero with a technical illustration and a clear, 1-column content section with horizontal cards. Ensure all interactions are smooth with subtle 0.2s transitions. Focus on clarity, authority, and a premium, futuristic aesthetic. Never use heavy shadows, sharp corners, or cluttered multi-color palettes.
```