CURATED · OPEN · FREE

Vimcal

The world's fastest calendar for people with too many meetings.

productivitysaas

Vimcal screenshot

↓ Download design system (12 MB)Open in OpenDesign

Visit: https://www.vimcal.com

📦 Browse pack contents →

01

Identity DNA

speedefficiencycontrolpremium

A high-performance cockpit for scheduling

02

Color

#E35294Accent

#FFFFFFInk

#98A2B3Ink soft

#040126BG

#0a0a0aBG soft

#B0B1B4Muted

rgba(255,255,255,0.1)Line

Dark mode with high-contrast white text and vibrant neon accents

03

Typography

geometric-sans · humanist-sans · monospaced

display56px · 500
heading24px · 500
body16px · 400
caption14px · 400

Geometric sans for headlines · Humanist sans for body text · Monospaced for technical details

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

8px base grid

05

Surfaces

sm · 4px

md · 6px

lg · 16px

pill · 999px

1px solid rgba(255,255,255,0.1)

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

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Split hero with text left, app preview right

07

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Fade-in transitions · Subtle slide-ins

Subtle brightness increase · Immediate response (<100ms)

08

Components

button White pill-shaped primary button with black text
card Dark glass-morphism panels with subtle borders
chip Small rounded tags for calendar events
input Dark background fields with subtle borders
hero Large text left, floating app UI on right

09

Voice & Don'ts

Tone Confident and professional
Headlines Direct and benefit-focused
CTAs Clear and low-friction

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
Avoid: Cluttered layouts
Avoid: Complex terminology
Avoid: Slow interactions

10

Inside the pack — real screenshots

Vimcal — 桌面首屏（hero） — 桌面首屏（hero）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Vimcal — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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