Human-centred technology
Modern, intelligent and technology-led. How the Rankwyn logo, colour, type and interface work together, in light and dark.
Premium, not flashy. Data-rich, not noisy.
Rankwyn is the control tower agencies run their SEO and AI visibility from. The brand should feel calm, capable and precise, and put people in charge of the technology.
The abstract geometric R
One unbroken stroke forms the stem and bowl. The leg breaks away as a forward step and lands on a node: movement, and the connection between a site, its data and the agent working on it. The wordmark is always lowercase.
Primary lockup on light and on Midnight Navy.
Monochrome navy and white, for reports, print and embossing.
Favicon, app icon, browser extension, MCP server identity, social profile and the corner of every white-label report. Minimum size: 16px for the mark, 88px wide for the lockup.
Keep a quarter of the mark’s height clear on every side. Nothing else enters that space.
Master palette
Indigo is the recognisable accent, not the background of every component. Most of any page is neutral.
Hero sections, primary text, logo on light.
The brand accent: primary buttons, links, the logo tile.
Accent on dark surfaces, agent and MCP moments.
Highlights and selected states in light mode.
App and page background in light mode.
Cards, sidebars and content sections.
Supporting colours
Status always pairs colour with an icon and a word. On white, small text uses the darker text shade.
Approved, healthy, published.
Needs review, scores 65–84.
Failed, missing, scores under 65.
Neutral notices, sync status.
Colour ratio on the website
Light by default. Dark by design.
Light mode is the default. Dark mode is a designed alternative, not an inversion: layered navy surfaces, no pure black and no large neon gradients. Use the moon or sun in the navigation to switch.
- App background#F7F8FC
- Sidebar#FFFFFF
- Card#FFFFFF
- Primary text#111827
- Secondary text#667085
- Border#E6E8EF
- Primary button#635BDB
- Button hover#5149C6
- Selected background#E9E8FF
- Main background#0B1020
- Sidebar#0E1528
- Cards#151D31
- Elevated surfaces#1B2740
- Primary text#F5F7FF
- Secondary text#A3AEC3
- Borders#28334A
- Primary accent#8B83F6
- Selected surface#29264F
Semantic accents, not sub-brands
Each product capability has an accent for icons, chart series and small highlights. The logo, buttons and links stay Indigo everywhere.
Three typefaces, three jobs
Headings, navigation, buttons and the marketing site.
Get your clients cited, not just ranked.
Dashboard, tables and interface text.
Every change waits as a dry-run until a person approves it.
MCP commands, code and logs.
rankwyn.apply_fix({ site: "apexlaw.com", dry_run: true })
Components and states
Subtle borders, generous spacing and very light shadows. Indigo marks the one action that matters on a screen.
Contrast, checked
Every pair below is computed with the WCAG 2.x contrast formula when this page is built. AA needs 4.5:1 for normal text and 3:1 for large text (24px, or 19px bold). Where a base colour fails for small text, the site uses its darker text shade.
| Pair | Sample | Ratio | WCAG AA |
|---|---|---|---|
LightPrimary text on app background #111827 on #F7F8FC | Aa rankwyn | 16.72:1 | Normal passLarge pass |
LightSecondary text on card #667085 on #FFFFFF | Aa rankwyn | 4.97:1 | Normal passLarge pass |
LightSecondary text on app background #667085 on #F7F8FC | Aa rankwyn | 4.69:1 | Normal passLarge pass |
LightWhite on primary button #FFFFFF on #635BDB | Aa rankwyn | 5.19:1 | Normal passLarge pass |
LightWhite on hover button #FFFFFF on #5149C6 | Aa rankwyn | 6.73:1 | Normal passLarge pass |
LightIndigo link on white #635BDB on #FFFFFF | Aa rankwyn | 5.19:1 | Normal passLarge pass |
LightSelected text on lavender #3F37B0 on #E9E8FF | Aa rankwyn | 7.32:1 | Normal passLarge pass |
LightSuccess base on white #16A37A on #FFFFFF Icons and large text only; small text uses #0F7A5B. | Aa rankwyn | 3.20:1 | Normal failLarge pass |
LightSuccess text shade on white #0F7A5B on #FFFFFF | Aa rankwyn | 5.31:1 | Normal passLarge pass |
LightWarning base on white #E9A23B on #FFFFFF Fills and icons beside a label; text uses #8F5C0D. | Aa rankwyn | 2.17:1 | Normal failLarge fail |
LightWarning text shade on white #8F5C0D on #FFFFFF | Aa rankwyn | 5.67:1 | Normal passLarge pass |
LightError base on white #E45C65 on #FFFFFF Icons and large text only; small text uses #B9313B. | Aa rankwyn | 3.49:1 | Normal failLarge pass |
LightError text shade on white #B9313B on #FFFFFF | Aa rankwyn | 5.89:1 | Normal passLarge pass |
LightInformation on white #3985D6 on #FFFFFF Large text and icons; small text uses #2C67A8. | Aa rankwyn | 3.82:1 | Normal failLarge pass |
LightReports amber on white #C48627 on #FFFFFF Accent fills and icons only, never body text. | Aa rankwyn | 3.09:1 | Normal failLarge pass |
DarkPrimary text on main background #F5F7FF on #0B1020 | Aa rankwyn | 17.70:1 | Normal passLarge pass |
DarkSecondary text on card #A3AEC3 on #151D31 | Aa rankwyn | 7.51:1 | Normal passLarge pass |
DarkSecondary text on elevated surface #A3AEC3 on #1B2740 | Aa rankwyn | 6.66:1 | Normal passLarge pass |
DarkPeriwinkle accent on main background #8B83F6 on #0B1020 | Aa rankwyn | 6.02:1 | Normal passLarge pass |
DarkPrimary text on selected surface #F5F7FF on #29264F | Aa rankwyn | 13.22:1 | Normal passLarge pass |
DarkWhite on primary button #FFFFFF on #635BDB | Aa rankwyn | 5.19:1 | Normal passLarge pass |
DarkText on Midnight Navy hero #F5F7FF on #111827 | Aa rankwyn | 16.58:1 | Normal passLarge pass |
Status uses an icon and a word as well as a colour.
Every interactive element shows a 2px Indigo or Periwinkle focus ring.
Scenes, parallax and reveals hold still when the system asks for less motion.
How Rankwyn sounds
Say what the product does in the words an agency uses. If a sentence needs a second read, rewrite it.
Lead with real units: health scores, citations, pages fixed, minutes saved. Specifics build trust.
Premium, not flashy. We are the steady control tower, not a hype machine.
AI proposes, people approve. Say that plainly whenever we talk about agents acting on a site.
Design tokens
The same values drive this website. Copy them into any product surface.
:root {
--brand-primary: #635BDB;
--brand-hover: #5149C6;
--brand-light: #E9E8FF;
--brand-secondary: #8B83F6;
--brand-dark: #111827;
--bg-app: #F7F8FC;
--bg-card: #FFFFFF;
--text-primary: #111827;
--text-secondary: #667085;
--border: #E6E8EF;
--selected: #E9E8FF;
--success: #16A37A;
--warning: #E9A23B;
--error: #E45C65;
--info: #3985D6;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 18px;
--font-heading: "Manrope", sans-serif;
--font-body: "Inter", sans-serif;
--font-mono: "JetBrains Mono", monospace;
}
[data-theme="dark"] {
--bg-app: #0B1020;
--bg-sidebar: #0E1528;
--bg-card: #151D31;
--bg-elevated: #1B2740;
--text-primary: #F5F7FF;
--text-secondary: #A3AEC3;
--border: #28334A;
--accent: #8B83F6;
--selected: #29264F;
}Logo files
Use these files as they are. If you need another format, ask us through the Book a demo page.
