# Earlydog · Design system migration spec

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

> Strong example of how Bauhaus-inspired geometric design can humanize enterprise cloud infrastructure branding.

## 1. Identity DNA

Earlydog treats cloud infrastructure not as a cold utility, but as a system to be designed with the same clarity and purpose as a Bauhaus workshop. Its identity is built on the principle that playful geometry and bold type can make complex operations feel approachable and human-scaled. This digital Bauhaus studio forges a modern, developer-focused aesthetic from high-contrast forms and unapologetic typographic presence.

**One-liner:** Playful, geometric SaaS branding that humanizes cloud infrastructure through bold typography and abstract shapes.
**Keywords:** Cloud Ops · Infrastructure · Developer · Modern
**Analogy:** A digital Bauhaus studio for cloud operations

## 2. Color

The color system is grounded in a warm cream base, providing a soft, non-clinical foundation for the interface. Against this, a high-contrast geometric palette deploys vibrant primary accents—blue, orange-red, and yellow—to create immediate visual hierarchy and energy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFF9F0` | main background |
| `--ink` | `#000609` | body text |
| `--muted` | `#BFB1A3` | placeholder |
| `--accent` | `#0A65DB` | single accent |
| `--line` | `rgba(0, 6, 9, 0.1)` | divider |

**Color principle:** High-contrast geometric palette using a warm cream base with primary pops

The governing principle is one of high-contrast clarity, where color is used as a bold geometric element rather than a decorative gradient.

## 3. Typography

Typography is the system's primary voice, using **geometric sans-serif** for display and **humanist sans-serif** for body to balance technical precision with warmth. The scale prioritizes bold, direct headlines in a heavy weight, establishing a confident and benefit-focused editorial tone.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 116px | 1.03 | 700 | -1px | Hero headline |
| display-md | 80px | 1.1 | 700 | -1px | Section headline |
| body | 18px | 1.78 | 400 | 0px | Body text |

## 4. Spacing

Generous vertical rhythm, defined by 120px–128px of section padding, creates a structured cadence that gives compositions room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing with 120px-128px section padding

## 5. Surfaces

Surfaces are defined by crisp, graphic borders rather than depth cues. A 1px solid border contains standard interactive elements, while active states are punctuated by a heavier 3px stroke, creating clear affordances without relying on shadows.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Borders:** 1px solid rgba(0, 6, 9, 0.1) on buttons, 3px solid on active states

## 6. Layout

The core layout skeleton is an asymmetric hero, splitting the viewport between a bold, two-line typographic statement and an abstract geometric composition. This structure extends into subsequent sections, favoring graphic splits and large-scale type over traditional card-based layouts.

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

**Skeleton:** Full-bleed hero with asymmetric text/graphic split

## 7. Motion & Interaction

Motion philosophy is one of cohesive, system-wide change, achieved through global all-property transitions. This approach ensures that state changes feel smooth and intentional, binding interactive elements into a single, responsive system.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - transition: all applied globally

- **Hover:** Subtle state change on interactive elements
- **Click:** Immediate response
- **Transition:** Global all-property transitions
- **Keyboard:** Standard focus management

## 8. Voice & Don'ts

The editorial voice is professional yet approachable, delivering benefit-focused headlines in a bold, direct style. Clear action verbs guide interaction through simple pill buttons, maintaining clarity without resorting to dense jargon.

- **Tone:** Professional yet approachable
- **Headline style:** Bold, direct, benefit-focused
- **CTA style:** Simple pill buttons with clear action verbs
- **Avoid:** Jargon-heavy language / Dark mode aesthetics / Photorealistic imagery

### Don'ts
- ❌ Don't use a dark background — screenshot shows a warm cream (#FFF9F0) base
- ❌ Don't use serif typography — screenshot shows geometric and humanist sans-serif fonts only
- ❌ Don't use rounded cards with drop shadows — screenshot shows flat geometric compositions with no shadows
- ❌ Don't use muted, desaturated colors — screenshot shows high-chroma primary accents (blue, orange, yellow)
- ❌ Don't use gradient backgrounds — screenshot shows solid flat colors and geometric shapes
- ❌ Don't use thin, light typography — screenshot shows bold 700-weight headlines with tight letter spacing
- ❌ Don't use standard rectangular buttons — screenshot shows pill-shaped buttons with thick black borders

The system deliberately forgoes dark mode, serif typography, drop shadows, gradient fills, and muted palettes, committing instead to its bright, flat, and typographically-bold foundation.

## System Prompt (paste into AI tool)

```
EarlyDog is a cloud infrastructure SaaS company using a Bauhaus-inspired visual system. The palette centers on warm cream (#FFF9F0) with high-contrast black (#000609) text and vibrant geometric accents in blue (#0A65DB), orange-red (#EF4C2C), and yellow (#FFD100). Typography uses geometric sans-serif for display and humanist sans-serif for body, with extremely bold headlines (700 weight) and generous line heights. Critical don'ts: never use dark backgrounds, never use serif fonts, never add drop shadows to elements, never use gradient fills, and never use thin typography weights. The layout favors asymmetric splits with large graphic compositions rather than traditional card-based designs.
```