# Cosmos Network · Design system migration spec

> Source: https://cosmos.network  ·  Curated by OpenDesign  ·  en

> 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, functional color palette.

## 1. Identity DNA

The system is conceived as a secure, high-tech command center for global financial infrastructure, where every component serves a clear operational purpose. Its identity is built on the core principles of being **sovereign** and **interoperable**, establishing a visual language of controlled power and technical precision.

**One-liner:** Enterprise-grade blockchain solutions for building interoperable, sovereign financial systems.
**Keywords:** blockchain · enterprise · ledger · sovereign · interoperable
**Analogy:** A secure, high-tech command center for global financial infrastructure.

## 2. Color

The palette operates with the stark clarity of a terminal interface, employing a deep black ground and high-contrast white for essential information. A single, vibrant mint-green accent acts as the system's sole signal light, guiding interaction without disrupting the authoritative darkness.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#181818` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#808080` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--accent` | `#22E6A8` | single accent |
| `--line` | `rgba(128,128,128,0.5)` | divider |

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

The guiding principle is absolute restraint: a limited palette ensures the focus remains on function and data, never decoration.

## 3. Typography

The typographic voice is defined by the geometric-sans 'The Future', a choice that communicates clean modernity and unwavering legibility. Its consistent weight and tight tracking at large scales create cohesive visual blocks, suitable for declarative headlines and clear information hierarchy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | Main hero headlines |
| h2 | 40px | 1.1 | 400 | -0.5px | Section titles |
| body | 16px | 1.5 | 400 | 0.32px | Body text and navigation |

**Type rules:**
- 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.

## 4. Spacing

A strict 4px grid establishes a uniform spatial rhythm, ensuring predictable alignment and generous separation between elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px-based grid system that ensures uniform spacing between elements, with larger multiples used for major sections and layout containers.

## 5. Surfaces

Surfaces are deliberately flat, rejecting shadow-based depth for clarity and a premium digital feel. Borders are minimal and functional, providing only the essential structural definition for components like navigation and buttons.

- **Radius:** sm 4px · md 8px · lg 20px · pill 9999px
- **Shadows:**
  - none
- **Borders:** Minimal and functional, using 1px borders primarily for structural definition in navigation and buttons.

## 6. Layout

The structural skeleton begins with a full-width, two-column hero that balances large-scale typography against a technical illustration. This establishes authority before transitioning into a centered, single-column content zone organized with horizontal cards.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is treated as a functional feedback mechanism, not a narrative device. It employs consistent, 0.2-second transitions for state changes on color, fill, and transform properties, ensuring interactions feel smooth, professional, and instantaneous.

- **Durations:** micro 150ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for background-color, border-color, and fill on interactive elements.
  - Transform-based animations (scale, translate) for hover states on buttons and links.
  - Opacity transitions for fading elements in and out.

- **Hover:** Subtle background color shifts and transform-based scaling on interactive elements like buttons and navigation links.
- **Click:** Immediate feedback through micro-transforms (scale) and color transitions.
- **Transition:** Consistent use of a 0.2s cubic-bezier(0.4, 0, 0.2, 1) timing function for most property changes.
- **Keyboard:** Standard focus-visible outlines or border-color changes to ensure accessibility and clear navigation.

## 8. Voice & Don'ts

The editorial voice is authoritative and professional, delivering bold, declarative headlines that articulate value with clarity and forward-looking confidence. The tone avoids casual language and hype, opting instead for direct, action-oriented calls to action.

- **Tone:** Authoritative, professional, and forward-looking, emphasizing security, scalability, and global impact.
- **Headline style:** Bold, large-scale, and declarative statements that clearly articulate the value proposition.
- **CTA style:** Direct and action-oriented, using simple phrases like 'Contact Us' within a prominent pill-shaped button.
- **Avoid:** Avoid overly casual language or slang. / Avoid excessive use of exclamation points or hype-driven adjectives. / Avoid complex jargon without clear explanation. / Avoid cluttered layouts that distract from the core message.

### Don'ts
- ❌ 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 tool)

```
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.
```