Nothing in this system was invented. Every colour, angle and proportion below was measured out of the existing mark — then given a job.
A neoclassical façade drawn in negative space, inside a seal. Read literally: an institution. But the interesting part is what happens at the bottom — the circle's arc terminates around 96% of the mark's height, and the three columns keep going, landing on their own flat baseline.
Three columns in the mark. Three pillars in the promise. Three sections on the homepage. The logo, the IA and the value proposition are the same shape.
I withdraw the teal I proposed before I'd seen the mark — a second blue-green would have fought this one. #075B97 clears 7.11:1 on white, which is WCAG AAA for body text. Most corporate blues fail that badly and need a darker override for links and small type. This one doesn't. It can carry text, buttons, links, rules and dark bands unaided. Keep it. Build the whole ramp from it.
Not Tailwind grey. Warm greys — limestone, marble, the stuff the façade in the mark is cut from. It's a two-degree shift that makes the whole site feel expensive instead of default.
#B07A1F
3.72:1 · large text, borders, marks
SCARCE BY RULE. Verification seals, the rate stamp, the service-fee line. Never a button.
#146B45
6.52:1 · body PASS
Eligible · requirement met · visa granted.
#B03A2B
6.02:1 · body PASS
SCARCE. Deadlines under 30 days. Refusal rates. Never decorative.
The mark is neoclassical. The wordmark is modernist geometric. That tension is already in the brand — resolve it deliberately instead of picking a side. All four faces are open-source and self-hostable.
| Display · the hero | Archivo 600 · 40/44 · −0.028em |
| Heading · section titles | Archivo 600 · 19/26 · −0.01em |
| Interface · labels, buttons, nav | Archivo 400/600 · 15/24 |
A grotesque drawn for signage and newsprint — structural, flat-terminalled, built to be read fast and small. It harmonises with the geometric wordmark without impersonating it, so the logo still reads as a mark instead of dissolving into the page. Ships with real tabular figures.
A transitional serif with the authority of a prospectus or a government guidance note. This is the voice that makes a family believe the page. Used for long-form only — never for UI.
This is the single most important typographic rule in the system. Costs, deadlines, exchange rates, visa success rates, IELTS minimums, reference numbers — all mono, all tabular-nums. Monospace figures in a ruled table read as a record, not a claim. It's how the site earns the right to say "we publish the numbers."
Loaded only on /bn pages and on the parent one-pager. Fallback: Hind Siliguri.
font-display:swap.
Non-negotiable
A design system earns its keep when someone can tell it's uniThink with the logo cropped off. These five do that — and every one of them is measured, not invented.
The pediment's slope, reduced to a 5:1 run-to-rise ratio. It is uniThink's owned angle — the way the swoosh is Nike's. It caps the Route Finder, it draws every section eyebrow, and it points every chevron on the site.
A single column, lifted out of the mark and turned on its side into a 4px left border. Cheapest possible device, works everywhere, instantly recognisable. Use it on every pull-quote, key fact and callout.
The circle, doing what circles do: certifying. Brass, never blue — so it never competes with an action. If there is no certificate behind it, there is no seal.
The building in the mark is made of absence — white carved out of solid blue. So the site's most important modules invert: content knocked out of an Ink field. Reserve it for the moments that matter, or it stops meaning anything.
The columns outlive the circle. So exactly one element per page is allowed to overhang its container — the Cost Card's three feet, the hero photo passing the panel's edge. Once per page. Maximum. Spend the boldness in one place or it becomes noise.
Every WhatsApp link carries pre-filled context from the page it was clicked on — wa.me/88…?text=Hi, I'm looking at MBBS in China. I have HSC, GPA 4.8. That one detail transforms the quality of every inbound conversation your counsellors have.
Put the price in the country card. Then put it in the navigation dropdown too. Showing cost before the click is the entire brand in one gesture — and it is the one thing competitors structurally cannot copy, because copying it means publishing prices they'd rather you found out about later.
One component to be known for. It is the mark, rendered as UI — an inverted field with three columns passing through its baseline. It appears on every destination page, every programme page, every comparison, and above the fold on the homepage. Every figure comes from a single ACF field group, so it updates in one place and renders identically everywhere.
Will uniThink actually publish their service fee? If yes, you have a brand nobody in Dhaka can copy. If no, the position softens to "clarity" rather than "radical transparency" — still workable, but weaker. Find out before you design around it, not in week eight.
No slider. No stock photography. No icon grid. A statement, a tool that gives value before it asks for anything, and a price where a hero image used to be.
We publish the full first-year cost of every destination we work with — tuition, living, visa, flight, and our own fee. Before you pay us anything.
WhatsApp gets a permanent slot. In Bangladesh, WhatsApp is the funnel — the website's job is to start one qualified conversation there, not to be admired.
Every value verified against WCAG. Drop into :root in your child theme or WPCode CSS snippet.
/* ── uniThink Design System v1 · Busicus ──────────────────── Brand blue sampled from the mark: #075B97 (7.11:1 on white, AAA) Geometry measured from the mark: 3 × 118px columns, 70px gaps, 11.4° pediment rake, ⌀907 seal. ──────────────────────────────────────────────────────── */ :root{ /* Blue — hue locked to 205°, brand at 600 */ --ut-b50:#F1F7FC; --ut-b100:#DBECF8; --ut-b200:#B7DAF2; --ut-b300:#86C1EB; --ut-b400:#43A3E8; --ut-b500:#107FCE; --ut-b600:#075B97; /* ← THE BRAND */ --ut-b700:#084B7A; --ut-b800:#093A5D; --ut-b900:#0A2C45; --ut-ink:#091E2C; /* 17.02:1 — text, dark bands */ /* Stone — warm neutrals, the building's material */ --ut-paper:#FAF8F5; --ut-s100:#F2EEE9; --ut-s200:#E4DED6; --ut-s300:#CFC7BC; --ut-s400:#A99F93; --ut-s500:#857C71; --ut-s600:#655D53; /* 6.11:1 on paper — secondary text */ /* Brass — the seal. SCARCE. Never a button. */ --ut-brass:#B07A1F; --ut-brass-lt:#E0A94A; --ut-brass-tint:#FBF1DE; --ut-ok:#146B45; --ut-ok-tint:#E4F1EA; --ut-alert:#B03A2B; --ut-alert-tint:#FBEAE7; /* Type */ --ut-sans:'Archivo', system-ui, sans-serif; /* UI + headlines */ --ut-serif:'Source Serif 4', Georgia, serif; /* long-form */ --ut-mono:'IBM Plex Mono', ui-monospace, monospace; /* ALL numbers */ --ut-bn:'Anek Bangla', 'Hind Siliguri', sans-serif; /* Mark-derived geometry */ --ut-rake: 11.4deg; /* pediment · run:rise 5:1 */ --ut-col-w: 22px; /* 118 : 70 = 1.686 : 1 */ --ut-col-gap: 13px; /* Space · 4px base */ --ut-1:4px; --ut-2:8px; --ut-3:12px; --ut-4:16px; --ut-5:24px; --ut-6:32px; --ut-7:48px; --ut-8:64px; --ut-9:96px; --ut-r-sm:4px; --ut-r-md:10px; --ut-r-lg:16px; --ut-container:1200px; --ut-ease: cubic-bezier(.2,.6,.2,1); } /* THE RULE: every number on this site is tabular mono. */ .ut-data, .ut-cost, .ut-deadline, table td, table th{ font-family: var(--ut-mono); font-variant-numeric: tabular-nums; } /* Device 01 · The Rake — the pediment, 5:1 */ .ut-pediment{ clip-path: polygon(0 100%, 50% 0, 100% 100%); } /* Device 02 · The Column Rule */ .ut-colrule{ border-left: 4px solid var(--ut-b600); padding-left: 20px; } /* Device 05 · The Break — the Cost Card stands on three columns */ .ut-cost-card{ position: relative; background: var(--ut-ink); color:#fff; } .ut-cost-card::after{ content:""; position:absolute; left:50%; bottom:-16px; transform:translateX(-50%); height:16px; width: calc(var(--ut-col-w)*3 + var(--ut-col-gap)*2); background: linear-gradient(var(--ut-b600),var(--ut-b600)) 0 0/var(--ut-col-w) 100% no-repeat, linear-gradient(var(--ut-b600),var(--ut-b600)) calc(var(--ut-col-w) + var(--ut-col-gap)) 0/var(--ut-col-w) 100% no-repeat, linear-gradient(var(--ut-b600),var(--ut-b600)) calc((var(--ut-col-w) + var(--ut-col-gap))*2) 0/var(--ut-col-w) 100% no-repeat; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; } }