# Vimcal · Design system migration spec

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

> Worth including for its excellent execution of dark mode productivity design

## 1. Identity DNA

Vimcal presents itself as a high-performance cockpit for scheduling, and the analogy holds. Every design choice reinforces the sensation of operating a precision instrument built for speed, efficiency, and control, all within a premium digital environment.

**One-liner:** The world's fastest calendar for people with too many meetings.
**Keywords:** speed · efficiency · control · premium
**Analogy:** A high-performance cockpit for scheduling

## 2. Color

The color system is built on a deep purple-black foundation that serves as the stage for high-contrast white text and vibrant neon accents. This palette prioritizes clarity and focus, using pink and blue not as decoration but as functional signals within the interface.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#040126` | main background |
| `--bg-soft` | `#0a0a0a` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#98A2B3` | secondary text |
| `--muted` | `#B0B1B4` | placeholder |
| `--accent` | `#E35294` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** Dark mode with high-contrast white text and vibrant neon accents

The principle is one of high-contrast legibility against a dark, non-reflective ground.

## 3. Typography

Typography is split into three distinct roles: geometric sans for authoritative headlines, humanist sans for readable body text, and monospaced type for technical details. This hierarchy establishes a clear voice, balancing modern punch with human warmth.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1.68px | Hero headline |
| heading | 24px | 1.2 | 500 | -0.5px | Section titles |
| body | 16px | 1.6 | 400 | 0 | Paragraph text |
| caption | 14px | 1.6 | 400 | 0.32px | Metadata and labels |

**Type rules:**
- Geometric sans for headlines
- Humanist sans for body text
- Monospaced for technical details

## 4. Spacing

All vertical and horizontal rhythm derives from an 8px base grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base grid

## 5. Surfaces

Depth is communicated through dark glass-morphism panels, which create layered surfaces without resorting to heavy drop shadows. Subtle, semi-transparent borders define card edges, reinforcing the interface's structured yet fluid depth.

- **Radius:** sm 4px · md 6px · lg 16px · pill 999px
- **Shadows:**
  - rgba(255, 255, 255, 0.1) 0px 2px 5px 0px inset
  - rgba(227, 82, 148, 0.8) -8px 0px 20px 0px inset
  - rgba(23, 144, 255, 0.8) 8px 0px 20px 0px inset
- **Borders:** 1px solid rgba(255,255,255,0.1)

## 6. Layout

The layout skeleton is a split hero: large, commanding typography occupies the left half, while a floating application preview occupies the right. This immediate juxtaposition of value proposition and tangible product defines the first impression.

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

**Skeleton:** Split hero with text left, app preview right

## 7. Motion & Interaction

Motion philosophy prioritizes instant feedback and spatial awareness. Interactions respond in under 100ms, with transitions like fade-ins and slide-ins serving as subtle guides rather than performances.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Fade-in transitions
  - Subtle slide-ins

- **Hover:** Subtle brightness increase
- **Click:** Immediate response (<100ms)
- **Transition:** All transitions 0.3s ease
- **Keyboard:** Full keyboard shortcut support

## 8. Voice & Don'ts

The editorial voice is confident and professional, favoring direct, benefit-focused headlines and clear, low-friction calls to action. The system is defined as much by its rejections—cluttered layouts, complex terminology, and slow interactions—as its inclusions.

- **Tone:** Confident and professional
- **Headline style:** Direct and benefit-focused
- **CTA style:** Clear and low-friction
- **Avoid:** Cluttered layouts / Complex terminology / Slow interactions

### Don'ts
- ❌ Don't use light backgrounds — screenshot shows dark mode
- ❌ Don't use serif fonts — screenshot shows sans-serif
- ❌ Don't use muted colors — screenshot shows high-contrast
- ❌ Don't use complex layouts — screenshot shows clean split-screen
- ❌ Don't use small fonts — screenshot shows large display type
- ❌ Don't use rounded corners everywhere — screenshot shows sharp edges on cards

It deliberately avoids light backgrounds, serif fonts, muted colors, and cluttered layouts to maintain its focused, premium dark-mode identity.

## System Prompt (paste into AI tool)

```
Vimcal is a premium productivity tool for executive assistants and busy professionals. The design features a dark mode (#040126 background) with high-contrast white text and vibrant accent colors like pink (#E35294) and blue (#1790FF). Typography uses geometric-sans for headlines and humanist-sans for body text. Key features include: 1) Split hero layout with text left, app preview right, 2) Dark glass-morphism cards with subtle borders, 3) Full keyboard shortcut support, 4) Instant response times (<100ms). Critical donts: don't use light mode, don't use serif fonts, don't use small text, don't clutter the interface, don't use slow transitions, don't use complex color schemes.
```