Hello, Mantis.
Use tokens via var(--color-primary-6).
```
The single primary color (`#1677ff` — Ant Design's "geekblue 6") and Public Sans are the two
signals that immediately read as "Mantis." Everything else is the Ant Design v5 neutral grey
scale and 4-pt spacing grid.
---
## Content Fundamentals
Mantis is an **admin / dashboard** kit, not a marketing site. Copy is functional, neutral, and
short. The voice is **professional, second-person, terse**.
| Trait | Convention |
|--------------------|-------------------------------------------------------------------|
| Voice | Neutral, helpful. Never cute, never hype-y, never exclamatory. |
| Person | Second-person ("You", "Your"). First-plural ("We") only in marketing surfaces (landing, auth callouts). |
| Casing | Sentence case for body, buttons, menu items. Title Case for page titles, card headers, navigation section labels. |
| Buttons | One or two words, verb-first: `Login`, `Sign in`, `Create`, `View Full Statistic`, `Need Help?`, `Add to cart`. |
| Headlines | Concise. Section headings: `Recent orders`, `Income Overview`, `Page Views by Page Title`. |
| Empty state copy | Short, descriptive. e.g. `What would you want to learn today` / `Your learning capacity is 80% as daily analytics`. |
| Numbers + currency | Plain, locale-formatted: `$1560`, `$1.430`, `35%`, `-128`. |
| Times & dates | `Today , 2:00 AM` (admin), `Last Date 5th Nov 2020` (marketing). |
| Status words | `Approved`, `Pending`, `Rejected`, `Active`, `Disabled`. |
| Emoji | Sparingly. Used only in flavour copy (e.g. `Her We Go! 🎉` in onboarding) — never in dashboards, menus, or buttons. |
| Punctuation | No trailing periods on labels or buttons. Periods end full sentences in helper / paragraph text. |
| Microcopy examples | `I don't have an account`, `or with email`, `input password`, `Get to resolve query`, `Typical replay within 5 min`. |
**Tone shift between surfaces:**
- **App chrome:** dry, label-like (`Analytics`, `Dashboard`, `Mail`).
- **Marketing / onboarding:** warmer, declarative (`Welcome to TolbNet`, `Switch effortlessly
between Light and Dark Layout.`).
- **Error / warning:** explicit and blameless (`Payment from #002434 -$1.430`).
---
## Visual Foundations
### Color identity
- **One dominant accent:** `#1677ff` (Ant Design blue-6). Used for primary CTAs, links, selected
nav, focused inputs. Backgrounds use the very light `#e6f4ff` tint (blue-1).
- **Neutrals carry the design.** The 13-step grey scale (`#fafafa → #141414`) does ~80% of the
visual work. Backgrounds: `#fafafa`. Cards: `#ffffff`. Borders: `#f0f0f0`. Body text: `#262626`.
Secondary text: `#8c8c8c`. Disabled: `#bfbfbf`.
- **Status colors** are reserved for tags, badges, alerts and chart accents: green `#52c41a`,
orange `#faad14`, red `#f5222d`. Tag/chart palette extends to 13 hues (magenta, volcano, gold,
lime, cyan, geekblue, purple, …) — see `colors_and_type.css`.
- **Imagery:** photographic illustrations in the marketing/onboarding surfaces use a **warm
blue + soft pastel** palette (light blues, mint, peach) on near-white grounds. No grain, no
duotones. Spot illustrations are flat-vector with friendly characters.
### Typography
- **Public Sans** is the brand font. `Inter` is an accepted fallback the Figma uses
interchangeably for marketing display. `Roboto` appears in some legacy frames — treat as
Public Sans. `SF Pro` is iOS-native. `Roboto Mono` for code.
- Type ramp is Ant Design v5's: 12 / 14 / 16 / 20 / 24 / 30 / 38 px with matching line heights
(20 / 22 / 24 / 28 / 32 / 38 / 46). Marketing display can scale to 58px.
- Default weight is **400 (regular)** for body, **500 (medium)** for navigation labels and
card titles, **700 (bold)** for headlines.
### Spacing & layout
- **4-pt grid.** Tokens: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64.
- Default card padding is **24px**. Default control gutter is **16px**.
- **Sidebar:** 240px expanded, 60px collapsed. Header: 60px.
- **Page content:** max-width is intentionally large — these are admin views; full-width
responsive grids of 12 columns, 24px gutters.
- Cards stack with **16–24px vertical rhythm** in a 2 / 3 / 4-up grid by viewport.
### Borders, radii, elevation
- **Radius is conservative:** 4px is the default (buttons, inputs, tags). Cards 8px. Pills 9999.
Never above ~12px — Mantis doesn't do squishy bubble UI.
- **Borders are thin and pale:** 1px solid `#f0f0f0` is the universal divider. 1px `#d9d9d9` for
input outlines and dashed dividers in the Figma "demo" wrappers (these dashed borders are
Figma-only and should not be rendered in product).
- **Shadow system (Ant 5):**
- Buttons get a single 2px drop: `0 2px 0 rgba(0,0,0,0.043)` (primary buttons swap the alpha
for `rgba(5,145,255,0.10)`).
- Cards/popovers use the 3-layer Ant elevation: `0 1px 2px -2px / 0 3px 6px 0 / 0 5px 12px 4px`.
- Auth & modal cards take a softer `0 8px 25px rgba(0,0,0,0.05)`.
- **Inner shadows are not used.**
### States
- **Hover:** primary buttons darken from `#1677ff` to `#4096ff` (-actually lighter, Ant's hover
is the lighter blue-5). Ghost / default buttons hover by changing border + text to primary.
Menu items hover with a flat `#f5f5f5` background.
- **Active / pressed:** colors shift one step down (`#0958d9`). No transform, no scale.
- **Selected nav item:** light-blue background (`#e6f4ff`) + blue text (`#1677ff`) + 3px left
accent or just blue text — both patterns appear.
- **Focus rings:** 2px primary blue glow (`0 0 0 2px rgba(22,119,255,0.1)`).
- **Disabled:** 25% opacity text, `#f5f5f5` fill, no shadow.
### Motion
- Subtle and quick. Transitions are `0.2s cubic-bezier(0.645, 0.045, 0.355, 1)` for most state
changes. No bouncy spring animations. Page transitions are simple fades. Skeleton loaders
pulse on a 1.4s ease.
### Imagery & backgrounds
- Dashboards: **flat white cards on a `#fafafa` ground.** Never patterns, gradients or noise.
- Auth screens use a soft **diagonal pastel-chevron background** (light blue + mint + peach)
bleeding off the left edge — see the Login screenshot for reference.
- Marketing welcome banners use a **diagonal blue gradient** (`#1677ff → #69b1ff`) with a faint
doodled accent.
- No glassmorphism, no heavy blurs. A subtle `backdrop-filter: blur(8px)` is acceptable on
floating headers when content scrolls under them.
### Charts
- **Apexcharts** style. Line/area charts get a 30% opacity fill under the stroke. Bar charts use
primary blue + warning orange as the default pair. Axis labels are `#8c8c8c`, gridlines `#f0f0f0`.
### Fixed elements & layering
- Sidebar is fixed-left. Header is fixed-top. Content scrolls beneath. Drawers slide from the
right at 400px wide. Modals are centered, max-width 520px, with a 45%-opacity black mask.
---
## Iconography
Mantis uses **Ant Design Icons** as the primary icon system (the Figma `/Icon` page contains
~150 outline glyphs that match `@ant-design/icons` 1:1 — Mail, Calendar, Setting, Bell, Search,
User, Plus, Edit, Delete, Download, etc).
| Surface | Icon source |
|---------------|--------------------------------------------------------------------------|
| Web admin | `@ant-design/icons` (CDN) — outline by default, solid for selected nav. |
| iOS app | **SF Symbols** native (use Apple's stock glyphs). |
| Brand mark | `assets/tolbnet-icon.svg` — blue rounded square with a stylized "T" + node. |
| Brand wordmark| `assets/tolbnet-logo-full.svg` — icon + "TolbNet" set in Public Sans Bold. |
| DS mark | `assets/mantis-icon.svg` — Mantis design-system diamond (internal use only). |
- Icons in nav menus: **14px or 16px**, color inherits from text (`#8c8c8c` default,
`#1677ff` selected).
- Icons inside buttons: **14px**, sit 8px left of label.
- Icons in alerts / tags: **14px**, color matches the semantic accent.
- **No emoji** in product UI. Emoji only appears as flavor copy in marketing/onboarding
("Her We Go! 🎉").
- **No unicode-character icons.** Always real SVG.
If a needed icon isn't in `@ant-design/icons`, fall back to **Lucide** (close stroke weight)
and flag the substitution in code comments.
---
## File index
- [`README.md`](README.md) — this file.
- [`SKILL.md`](SKILL.md) — agent-skill manifest.
- [`colors_and_type.css`](colors_and_type.css) — all tokens.
- [`assets/`](assets/) — `tolbnet-icon.svg`, `tolbnet-logo-full.svg` (brand), plus `mantis-icon.svg`, `mantis-logo-full.svg` (design-system reference).
- [`preview/`](preview/) — design-system cards (logo, colors, type, spacing, components).
- [`ui_kits/web/`](ui_kits/web/) — Mantis web admin recreation (`index.html` + components).
- [`ui_kits/ios/`](ui_kits/ios/) — Mantis iOS companion kit (`index.html` + components).
---
## Substitutions & caveats
- **Web font:** Public Sans — the canonical Mantis font — is loaded from the Google Fonts CDN
in `colors_and_type.css`. Same family the real `mantis-react-next-ts` app pulls via
`next/font/google`. No local `.ttf` files shipped.
- **iOS font:** the iOS kit uses `-apple-system, "SF Pro Display"` first (renders real SF Pro on
iOS/macOS browsers) and falls back to **Inter** on other platforms (Inter was designed as a
metric-compatible SF Pro substitute and is the closest free webfont). Both Public Sans and
Inter are loaded from Google Fonts already.
- **Icons:** Inline SVG glyphs in the kit. Production should use `@ant-design/icons` directly.
- **MUI:** The real Mantis is **MUI v9** with `@ant-design/colors`. The CSS tokens in
`colors_and_type.css` mirror MUI's `palette.*` and `typography.*` exit values but are framework-
agnostic. If working in the real codebase, prefer `theme.vars.palette.primary.main` over the
CSS var; both resolve to the same hex.
- **Heading weight:** All h1–h5 are **600**, not 700. (Mantis `typography.ts` defines `fontWeightBold: 600`.)
- **Primary button hover:** the dark shade `#0958d9`, **not** the lighter `#4096ff` you'd expect
from Ant Design defaults — Mantis's `Button.ts` override sets `&:hover { backgroundColor: dark }`.
- **Button variants:** Mantis adds two variants on top of MUI's `contained / outlined / text`:
`dashed` (1px dashed border + lighter background) and `shadow` (contained with a soft
`0 14px 12px rgba(primary, .2)` glow). The kit has primary, default, dashed and shadow tokens.
- **Drawer width:** 260px (open) / 60px (mini) — per `src/config.ts`.
- **Button text:** `textTransform: capitalize` (not uppercase) and `fontWeight: 400`.
- **No production codebase rewrite** — UI kit components are cosmetic recreations, not
Mantis MUI components. For real product work, install the package and use MUI components
directly; lean on this kit for guidance + colors + copy tone.