
Manus
A general-purpose AI agent that carries tasks through to the end
The style
A quiet, bookish product language. Modest classic-serif headlines sit over a plain system sans, on white and warm off-white. Colour is almost absent: near-black buttons with small 8px corners, greys for secondary text, and very faint, wide shadows. It reads as calm and capable rather than flashy.
Colours
- Buttons#1d1d1c
- Background#fefdfb
- Text#1a1a1a
Click a colour to copy it.
Fonts
Libre Caslon Text
For headings
Inter
For everything else
Free fonts that look like Manus’s own, so you can use them anywhere.
Buttons
32–36px near-black buttons (#1A1A19) with white labels and 8px corners.
Use this style in your project
Pick the way that suits you. The first one needs no design or coding knowledge.
With an AI tool
Your AI tool builds the page for you, in Manus’s style.
2. Open it in
For developers
Ready-made CSS variables, a Tailwind theme and design tokens, with light and dark modes.
See the codeMake it your own
Change the colours, fonts and shapes, and see the result straight away before you use it.
CustomiseFiles
The code, ready to copy
Every file says where the style came from.
tokens.css — Colours, fonts and sizes as CSS variables, with light and dark modes.
/* Linen Serif — design tokens generated by Markdown */
/* Derived from an analysis of manus.im; how different from the source: a little different (30/100). */
/* Inspired by, not a copy of, the source. Adapt before commercial use; no logos, imagery, copy or proprietary fonts are included. */
:root {
color-scheme: light;
--color-background: #fefdfb;
--color-surface: #f8f8f7;
--color-surface-muted: #f3f2f0;
--color-text: #1a1a1a;
--color-text-muted: #717070;
--color-border: #dedddc;
--color-primary: #1d1d1c;
--color-on-primary: #ffffff;
--color-brand: #1d1d1c;
--color-on-brand: #ffffff;
--color-accent: #537fac;
--color-success: #2f7e54;
--color-warning: #9c691c;
--color-danger: #a3443e;
--font-display: "Libre Caslon Text", ui-serif, Georgia, "Times New Roman", serif;
--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--text-display: 2.6875rem;
--text-display-line-height: 1.22;
--text-display-weight: 400;
--text-display-tracking: 0em;
--text-h1: 2.1875rem;
--text-h1-line-height: 1.25;
--text-h1-weight: 400;
--text-h1-tracking: 0em;
--text-h2: 1.8125rem;
--text-h2-line-height: 1.28;
--text-h2-weight: 400;
--text-h2-tracking: 0em;
--text-h3: 1.5rem;
--text-h3-line-height: 1.34;
--text-h3-weight: 400;
--text-h3-tracking: 0em;
--text-lead: 1.1875rem;
--text-lead-line-height: 1.5;
--text-lead-weight: 400;
--text-lead-tracking: -0.005em;
--text-body: 1rem;
--text-body-line-height: 1.6;
--text-body-weight: 400;
--text-body-tracking: 0em;
--text-small: 0.8125rem;
--text-small-line-height: 1.5;
--text-small-weight: 400;
--text-small-tracking: 0.005em;
--text-caption: 0.6875rem;
--text-caption-line-height: 1.4;
--text-caption-weight: 400;
--text-caption-tracking: 0.01em;
--text-label: 0.8125rem;
--text-label-line-height: 1.3;
--text-label-weight: 600;
--text-label-tracking: 0.01em;
--text-code: 0.875rem;
--text-code-line-height: 1.55;
--text-code-weight: 400;
--text-code-tracking: 0em;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
--radius-none: 0px;
--radius-sm: 5px;
--radius-md: 10px;
--radius-lg: 15px;
--radius-xl: 25px;
--radius-full: 9999px;
--border-width: 1px;
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);
--shadow-lg: 0 18px 40px -12px rgb(0 0 0 / 0.18);
--duration-fast: 100ms;
--duration-base: 160ms;
--duration-slow: 270ms;
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
--ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
--container: 1104px;
--gutter: 24px;
--button-radius: 10px;
--button-padding: 8px 12px;
--input-radius: 10px;
--input-height: 44px;
--card-radius: 20px;
--card-padding: 24px;
--badge-radius: 9999px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--color-background: #161410;
--color-surface: #22201c;
--color-surface-muted: #272521;
--color-text: #f0eeea;
--color-text-muted: #9d9b97;
--color-border: #42403c;
--color-primary: #a0a09c;
--color-on-primary: #141210;
--color-brand: #a0a09c;
--color-on-brand: #141210;
--color-accent: #7c9ec0;
--color-success: #72ca9b;
--color-warning: #e0a752;
--color-danger: #cd7f7a;
}
}
[data-theme="dark"] {
color-scheme: dark;
--color-background: #161410;
--color-surface: #22201c;
--color-surface-muted: #272521;
--color-text: #f0eeea;
--color-text-muted: #9d9b97;
--color-border: #42403c;
--color-primary: #a0a09c;
--color-on-primary: #141210;
--color-brand: #a0a09c;
--color-on-brand: #141210;
--color-accent: #7c9ec0;
--color-success: #72ca9b;
--color-warning: #e0a752;
--color-danger: #cd7f7a;
}
@media (prefers-reduced-motion: reduce) {
:root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}
See every detail
Buttons
Inputs
Badges
Project
Quarterly field notes
A card groups one idea: a title, one line of support and a clear next step.
Weekly digest is ready
Three new comments and one approval.
npm i @brandless/ui01
Colour
Semantic roles for light mode. Contrast is checked against WCAG AA as you edit.
Background
Surface
Surface muted
- AA 17.1:1
Text
- AA 4.9:1
Text muted
Border
- AA 16.6:1
Primary
- AA 16.9:1
On primary
Brand
- AA 16.9:1
On brand
- AA 4.1:1
Accent
- AA 4.9:1
Success
- AA 4.6:1
Warning
- AA 6.0:1
Danger
02
Typography
Base 16px on a 1.218 modular scale. Only open-licence fonts are recommended.
display
Libre Caslon Text
body
Inter
mono
DM Mono
display · 43px / 1.22 · 400 · 0em
The quiet grammar of form
h1 · 35px / 1.25 · 400 · 0em
The quiet grammar of form
h2 · 29px / 1.28 · 400 · 0em
The quiet grammar of form
h3 · 24px / 1.34 · 400 · 0em
The quiet grammar of form
lead · 19px / 1.5 · 400 · -0.005em
Readable text sets the pace of an interface.
body · 16px / 1.6 · 400 · 0em
Readable text sets the pace of an interface.
small · 13px / 1.5 · 400 · 0.005em
Readable text sets the pace of an interface.
caption · 11px / 1.4 · 400 · 0.01em
Readable text sets the pace of an interface.
label · 13px / 1.3 · 600 · 0.01em
Readable text sets the pace of an interface.
code · 14px / 1.55 · 400 · 0em
const tokens = await load();
03
Spacing
A 4px base unit. Use the scale for padding, gaps and section rhythm.
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
- 48px
- 64px
- 96px
- 128px
04
Shape & surface
Mostly flat surfaces with a light shadow reserved for raised, interactive elements.
Radii
none
0px
sm
5px
md
10px
lg
15px
xl
25px
full
pill
Shadows & borders
0 1px 2px rgb(0 0 0 / 0.05)
0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04)
0 18px 40px -12px rgb(0 0 0 / 0.18)
Borders: 1px hairline · Surfaces: flat
06
Layout
1104px container · 12 columns · 24px gutters
Patterns
- Split hero: message left, supporting visual or product frame right.
- Twelve-column grid; content blocks usually span 4, 6 or 8 columns.
- Contained sections with consistent side gutters.
- Reading text limited to roughly 65–72 characters per line.
Responsive principles
- Below md, grids collapse to a single column and side gutters drop to 16px.
- Type steps above h2 scale down one step on small screens.
- Navigation collapses to a disclosure menu below lg.
- Touch targets stay at least 44×44px on every breakpoint.
07
Motion
Durations and easing curves. Previews respect your reduced-motion setting.
- fast100ms
- base160ms
- slow270ms
ease-standard
ease-enter
ease-exit
Principles
- Motion is brisk and functional — it confirms, it doesn't perform.
- Animate opacity and transform only; avoid animating layout.
- Respect prefers-reduced-motion by replacing movement with instant state changes or fades.
Manus, its logo and trademarks belong to their owner and are shown only to say where this style comes from. This is our own study of their public website — not made or endorsed by Manus. Use your own words and images.
More like Manus

Cohere
Language models and AI tools built for enterprise work

Mercury
Business banking for startups and growing companies

Superpower
A health membership with 100+ lab tests a year