---
name: Rekki
description: "This site is a strong example of a high-contrast dark mode SaaS aesthetic, using typography and a single accent color to create a professional, authoritative brand presence."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "rgba(255, 255, 255, 0.52)"
  tertiary: "#0063E1"
  neutral: "#979797"
  bg-soft: "#040910"
  line: "rgba(255, 255, 255, 0.12)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2.25px"
  body-lg:
    fontFamily: sans-serif
    fontSize: 24px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "-0.27px"
  body-md:
    fontFamily: sans-serif
    fontSize: 18px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "-0.24px"
  body-sm:
    fontFamily: sans-serif
    fontSize: 16px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "0px"
  label:
    fontFamily: sans-serif
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "0.5px"

rounded:
  sm: 6px
  md: 8px
  lg: 16px
  pill: 59px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

Office robots built for wholesale distributors

*An AI-powered office assistant for wholesale distributors*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`rgba(255, 255, 255, 0.52)`)** — uses `ink-soft` token
- **Accent (`#0063E1`)** — uses `accent` token
- **Muted (`#979797`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.12)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

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

## Elevation & Depth

- 0px 0px 0px 1px rgba(255, 255, 255, 0.12) inset
- 0px 0px 1px 0px rgba(255, 255, 255, 0.2)
- Borders: 1px solid rgba(255, 255, 255, 0.12)

## Shapes

- `sm`: 6px
- `md`: 8px
- `lg`: 16px
- `pill`: 59px

## 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

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```