CURATED · OPEN · FREE

Cosmos Network

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

01

Identity DNA

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

02

Color

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

03

Typography

geometric-sans · monospace

• display56px · 400
• h240px · 400
• body16px · 400

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.

04

Spacing

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

05

Surfaces

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

none

06

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.

07

Motion & Interaction

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.

Subtle background color shifts and transform-based scaling on interactive elements like buttons and navigation links. · Immediate feedback through micro-transforms (scale) and color transitions.

08

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.

09

Voice & Don'ts

• Tone Authoritative, professional, and forward-looking, emphasizing security, scalability, and global impact.
• Headlines Bold, large-scale, and declarative statements that clearly articulate the value proposition.
• CTAs Direct and action-oriented, using simple phrases like 'Contact Us' within a prominent pill-shaped button.

• 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.
• Avoid: Avoid overly casual language or slang.
• Avoid: Avoid excessive use of exclamation points or hype-driven adjectives.
• Avoid: Avoid complex jargon without clear explanation.
• Avoid: Avoid cluttered layouts that distract from the core message.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko