CURATED · OPEN · FREE

Rekki

Office robots built for wholesale distributors

SaaSDark ModeAIToolingBold Typography

↓ Download design system (9 MB)Open in OpenDesign

Visit: https://rekki.com

📦 Browse pack contents →

Identity DNA

automationwholesaleAIdistributorsB2B

An AI-powered office assistant for wholesale distributors

Color

#0063E1Accent

#FFFFFFInk

rgba(255, 255, 255, 0.52)Ink soft

#000000BG

#040910BG soft

#979797Muted

rgba(255, 255, 255, 0.12)Line

High-contrast dark mode with a single vibrant blue accent for actionable elements

Typography

geometric-sans · sans-serif · monospace

display56px · 700
body-lg24px · 400
body-md18px · 400
body-sm16px · 400
label12px · 400

Use tight negative letter-spacing for large headlines · Use uppercase for navigation links and small labels · Maintain a high contrast ratio (white on black) for readability

Spacing

4px

8px

12px

16px

20px

24px

32px

48px

64px

96px

Multiples of 4px, with larger jumps (32, 48) for section separation

Surfaces

sm · 6px

md · 8px

lg · 16px

pill · 59px

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

0px 0px 0px 1px rgba(255, 255, 255, 0.12) inset · 0px 0px 1px 0px rgba(255, 255, 255, 0.2)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-width dark hero with centered content, followed by a multi-column feature grid

Motion & Interaction

90msmicro

220mssmall

400msmedium

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

Subtle fade-ins for background elements · Smooth transitions for button hover states

Subtle brightness or opacity change on interactive elements · Instant visual feedback on button press

Components

button Large, pill-shaped (border-radius: 59px) solid blue (#0063E1) buttons with white bold text
card Dark background (#040910) containers with subtle 1px inset borders and rounded corners (16px)
chip Dark, semi-transparent badges with rounded corners used for AI status updates
input Dark-themed input fields with subtle borders
hero High-contrast headline and sub-headline over a dark, subtly photographic background

Voice & Don'ts

Tone Confident, professional, and results-oriented
Headlines Bold, direct, and benefit-driven (e.g., 'Office robots built for...')
CTAs Action-oriented and high-contrast (e.g., 'GET A DEMO', 'BOOK A DEMO')

Don't use a white background — the screenshot shows a deep black (#000000) primary background
Don't use rounded rectangles for primary buttons — the screenshot shows pill-shaped buttons (border-radius: 59px)
Don't use muted gray text for headlines — the screenshot shows high-contrast white (#FFFFFF) for main headings
Don't use decorative serifs — the screenshot shows clean geometric and sans-serif font categories
Don't use a wide variety of accent colors — the screenshot shows a single dominant blue (#0063E1)
Don't use heavy drop shadows — the screenshot shows subtle 1px inset borders and soft glows instead
Avoid: Playful jargon
Avoid: Passive voice
Avoid: Overly complex technical terms

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

REKKI is a B2B SaaS platform providing AI-driven office automation for wholesale distributors. The design language is strictly dark mode, featuring a deep black (#000000) background and high-contrast white (#FFFFFF) typography. A single vibrant blue (#0063E1) is used exclusively for primary calls-to-action, creating a clear visual hierarchy. The typography relies on clean geometric sans-serif categories with tight letter-spacing for large display text. Critical constraints: avoid white backgrounds, avoid multiple accent colors, and use pill-shaped buttons for primary actions. The layout emphasizes bold headlines and subtle, semi-transparent card surfaces to maintain a premium, professional feel.

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