# Auros Global · Design system migration spec

> Source: https://auros.global  ·  Curated by OpenDesign  ·  en

> Worth including for its masterful use of gradient-based depth and premium, institutional aesthetic that avoids the typical cluttered look of many fintech sites.

## 1. Identity DNA

The system's identity is modeled on the precision of a modern digital bank vault, sealed with a glowing neon edge. It pairs institutional solidity with an ethereal luminosity to define its premium fintech character.

**One-liner:** A premium fintech interface for high-stakes digital market trading.
**Keywords:** crypto · liquidity · infrastructure · institutional
**Analogy:** A modern digital bank vault with a glowing neon edge

## 2. Color

The palette establishes a deep teal foundation for a moody, focused atmosphere. Interactive accents break this calm with an iridescent, pastel glow that feels both technical and refined.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#001413` | main background |
| `--bg-soft` | `#012624` | card background |
| `--bg-quiet` | `#003734` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#BBC7C6` | secondary text |
| `--muted` | `#707777` | placeholder |
| `--muted-soft` | `#BBC7C6` | weak hint |
| `--line` | `rgba(1, 38, 36, 1)` | divider |

**Color principle:** Deep teal foundation with ethereal, iridescent gradient accents on primary actions.

The governing principle is depth and luminescence, never garish saturation.

## 3. Typography

Typography operates on a strict hierarchy of voice. A geometric sans-serif commands headlines with impact, while a clean sans-serif carries the body with comfortable, readable measure.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 1.0 | 500 | -3.84px | Hero headlines |
| heading | 60.8px | 1.1 | 500 | -2.44px | Section titles |
| body-lg | 20px | 1.4 | 400 | -0.4px | Subheadings and intro text |
| body | 16px | 1.4 | 400 | normal | Standard paragraph text |
| caption | 14px | 1.4 | 400 | normal | Fine print and UI labels |

**Type rules:**
- All primary navigation and buttons use all-caps with wide tracking
- Headlines use tight negative letter-spacing for impact
- Body text maintains comfortable line-heights for readability

## 4. Spacing

The system is anchored to a consistent 4px base grid, establishing a precise, rhythmic order.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 120 px
- **Rhythm:** Consistent 4px base grid with generous vertical whitespace for a premium feel.

## 5. Surfaces

Depth is suggested through gradient-based surfaces rather than heavy drop shadows. Minimal borders use deep teal to seamlessly integrate with the dark background.

- **Radius:** sm 4px · md 6px · lg 16px · pill 999px
- **Borders:** Minimal, using deep teal borders that blend with the dark background.

## 6. Layout

The layout skeleton begins with a full-width dark hero that transitions into structured content blocks. Generous side padding and vertical whitespace reinforce the premium, centered aesthetic.

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

**Skeleton:** Full-width dark hero transitioning into structured content blocks with generous side padding.

## 7. Motion & Interaction

Motion is deliberate and understated, prioritizing calm and focus over flash. The philosophy centers on slow, atmospheric background shifts and clean, instantaneous feedback.

- **Durations:** micro 200ms · small 200ms · medium 600ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth background-position shifts on gradients
  - Subtle opacity fades on hover states

- **Hover:** Subtle background-color or opacity shift on 200ms ease-in-out.
- **Click:** Immediate visual feedback with reduced opacity.
- **Transition:** All transitions standardized to 0.2s ease-in-out for consistency.
- **Keyboard:** Standard focusable elements with cursor pointer indicated on interactive areas.

## 8. Voice & Don'ts

The voice is authoritative, institutional, and forward-looking. Language is direct, using active verbs and high-impact nouns without descending into casual slang or vague proposition.

- **Tone:** Authoritative, institutional, and forward-looking.
- **Headline style:** Direct, active verbs paired with high-impact nouns.
- **CTA style:** Short, action-oriented, and set in wide-tracked uppercase.
- **Avoid:** Overly casual slang / Excessive exclamation points / Complex jargon without context / Vague or generic value propositions

### Don'ts
- ❌ Don't use bright, saturated primary colors — screenshot shows a dark teal foundation with iridescent accents instead
- ❌ Don't use thin, light typography for headlines — screenshot shows bold, 500-weight geometric sans-serif instead
- ❌ Don't use sharp, square corners for major components — screenshot shows 16px rounded corners on cards and buttons instead
- ❌ Don't use heavy drop shadows for elevation — screenshot shows flat, gradient-based depth instead
- ❌ Don't use small, cramped spacing — screenshot shows generous padding (120px vertical) and gaps (48px) instead
- ❌ Don't use lowercase for navigation and CTAs — screenshot shows strict all-caps with wide tracking instead

The system deliberately avoids bright saturated primaries, thin headline typography, sharp corners, and cramped spacing.

## System Prompt (paste into AI tool)

```
This is a premium fintech website for a crypto liquidity provider. It features a deep dark teal background with an ethereal, iridescent gradient accent system. Typography relies on a geometric sans-serif for display and a clean sans-serif for body text, with heavy use of uppercase, wide-tracked labels. The layout is spacious and centered, emphasizing authority and institutional trust. Critical donts: never use bright saturated primary colors, avoid thin/light typography for headlines, do not use sharp square corners on cards or buttons, avoid heavy drop shadows, maintain generous spacing rather than cramped layouts, and never use lowercase for primary navigation or calls to action.
```