Ebook
The Complete SEO Playbook
A step-by-step guide to ranking on page one.
cmlabsBase Guidelinetext-7xl text-white tracking-tighter text-balance
Ship on-brand products without leaving the guideline.
text-lg text-white font-medium
A base guideline platform packed with tokens like primary-70, radius-lg and shadow-smooth that can be composed into any page, straight from the docs.
ProblemsOutputDebug ConsoleTerminalPorts
$
text-4xl text-white tracking-tighter text-balance
Consistent at every breakpoint.
text-base text-white
Every layout in this system shares the same sm/md/lg/xlbreakpoint scale, so a component built once keeps behaving the same way anywhere it’s dropped in.
Responsive by default
Every component ships with the same responsive utilities as the rest of the docs. Pick a breakpoint below and watch the card reflow — this is the real component, not a screenshot.
280px
Webinar
Link Building Masterclass
Recorded session covering outreach at scale.
text-4xl text-white tracking-tighter text-balance
Built from real tokens, not screenshots.
text-base text-white
Everything below is the real thing running live — the same variants, tokens, and color scale documented under /docs/style-guide.
13 variants, 6 sizes
Every Button variant mirrors the real cmlabs.co component byte-for-byte — default, outline, ghost, destructive, and more.
Badge
Green
Radius & shadow, on a scale
Three radius steps and four named shadows — shadow-smooth, shadow-card, shadow-and-blur — so elevation stays consistent everywhere.
Real CSS variables
Every color, radius, and shadow token lives in globals.css as a plain CSS variable — no build step, no JS config to dig through.
:root {
--primary-70: #1f95f5;
--success-70: #50a06d;
--radius-lg: 8px;
}A real 13-step brand scale
Primary, yellow, success, danger, purple, and gray all run the same 10→130 lightness scale, copied from the source platform.
text-4xl text-white tracking-tighter text-balance
Brand elements.
text-base text-white
The face, symbol, and voice this system uses consistently — reused for every card, section, and demo on this page.
Our face
Logo
Our symbol
Iconography
Our mark
Typography
Ship.
Consistent.
Design tokens
Base Guideline
Satoshi
Our palette
Color
primary-70
primary-50
success-70
danger-70
Our toolkit
Reusable Utilities
- Hooks
- Custom Layout Grid Configurations
Our vocal
Tone and voice
Technical
Direct.