# Atlantistech · Design system migration spec

> Source: https://www.atlantistech.com  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of modern, premium SaaS design that balances technical authority with executive-level sophistication.

## 1. Identity DNA

The design system for Atlantistech is built like a seasoned mountain guide's kit—every tool purposeful, every element serving the ascent. It operates with the authority of a summit expedition, where clarity and consequence replace decorative flourish, positioning the platform as an elite partner for high-stakes organizational transformation.

**One-liner:** Elite operators for high-stakes organizational transformations.
**Keywords:** transformation · ambition · operators · consequence · summit
**Analogy:** A seasoned mountain guide leading an expedition

## 2. Color

The color system is a study in strategic contrast, built on a deep navy-black foundation where light recedes to let content and action command attention. A single vibrant orange acts as the system's pulse, reserved exclusively for critical interactive elements to guide decision pathways with unmistakable clarity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#12151C` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `rgba(255,255,255,0.7)` | secondary text |
| `--muted` | `rgba(255,255,255,0.5)` | placeholder |
| `--muted-soft` | `rgba(255,255,255,0.3)` | weak hint |
| `--accent` | `#F7931A` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** High-contrast dark mode with vibrant orange for critical actions.

Every hue in this palette exists not for decoration, but to establish hierarchy and signal consequence.

## 3. Typography

Typography here is a dialogue between geometric precision and humanist warmth, pairing Inter and Space Grotesk to balance technical authority with approachable clarity. The scale is built for bold, high-impact display weights that command attention in a hero context without sacrificing readability in body columns.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -2px | Primary Hero |

## 4. Spacing

Rhythm is established through a consistent 4px grid and generous vertical padding, creating measured intervals that give content room to breathe and visual weight to settle.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid with generous vertical padding.

## 5. Surfaces

Depth is communicated not through shadow, but through a carefully considered layering of surfaces defined by subtle, semi-transparent borders. These 1px dividers and rgba(255,255,255,0.1) edges create a structured, almost architectural partitioning of space within the dark environment.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Borders:** Subtle rgba(255,255,255,0.1) borders and 1px dividers.

## 6. Layout

The foundational layout skeleton prioritizes focused communication, opening with a single-column hero section designed for maximum impact. This structure then expands into a two-column grid for presenting key statistics or features, maintaining constrained horizontal containers to preserve readability and control.

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

**Skeleton:** Single-column hero, 2-column stats grid.

## 7. Motion & Interaction

Motion is treated as functional feedback rather than performance, with smooth 0.3s ease transitions reinforcing the system's professional solidity. Hover states and background shifts provide subtle, direct acknowledgment of user interaction without introducing visual noise.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Hover color transitions
  - Subtle background shifts

- **Hover:** Color transitions on links and buttons
- **Click:** Direct navigation
- **Transition:** 0.3s ease for interactive elements
- **Keyboard:** Standard focus states

## 8. Voice & Don'ts

The editorial voice is authoritative, experienced, and direct, speaking with the confidence of practitioners who understand consequence. Headlines are punchy and strategically highlighted, while calls to action use clear language and arrow indicators to drive straightforward navigation.

- **Tone:** Authoritative, experienced, direct
- **Headline style:** Confident and punchy with strategic word highlights.
- **CTA style:** Clear and action-oriented with arrow indicators.
- **Avoid:** Generic buzzwords / Passive language / Visual clutter / Overly playful elements / Bright multi-color palettes

### Don'ts
- ❌ don't use playful illustrations — screenshot shows a sophisticated, minimal dark interface
- ❌ don't use a light background — screenshot shows a deep dark navy/black foundation
- ❌ don't use rainbow gradients — screenshot uses a strictly limited two-color accent palette
- ❌ don't use thin, delicate typography — screenshot shows bold, high-impact display weights
- ❌ don't use excessive borders — screenshot uses subtle transparency-based edges
- ❌ don't use centered text for body copy — screenshot shows clean, left-aligned reading columns

The system deliberately excludes playful imagery, light-mode foundations, rainbow gradients, and delicate typography, understanding that restraint is the core of its premium authority.

## System Prompt (paste into AI tool)

```
Atlantis is a premium, high-stakes consultancy targeting executive leaders. Its design DNA is defined by a deep navy/black (#12151C) background and a vibrant orange (#F7931A) accent used for critical actions. Typography features a mix of geometric and humanist sans-serifs (Inter, Space Grotesk) to balance precision with approachability. Critical design constraints include: no playful or whimsical imagery, no light-mode backgrounds, and no overly decorative elements. The voice is authoritative and direct, positioning the service as an elite team of operators for complex transformations.
```
