The idea
Modern Friendly is a warm, calm and confident workspace made for people who live inside the system all day. It keeps the seriousness of an operations tool, but softens the edges so the first impression is welcoming rather than technical. Colour is used with intent, surfaces are quiet, and the content is always the loudest thing on the page.
Colour
The palette is mostly neutral. Brand colours appear as small accents and soft tints so that when something is coloured, it means something.
The background of every screen. A soft off-white that feels calmer than pure white over a long shift.
Clean white panels that lift content off the canvas without needing shadows.
The main action colour. Buttons, links and the selected item in the menu — one clear place to click.
A cool highlight for supporting information and quiet status marks.
Gentle attention. Used for things worth noticing, never for errors.
Needs action. Reserved for a small number of items so it keeps its meaning.
Category and label colour, mostly seen as a soft tint behind small tags.
A fresh accent used sparingly for positive and completed states.
Soft tints
Backgrounds for tags, highlights and status blocksBalance
Roughly three quarters neutralKeep this proportion on every new screen. If a page starts to feel busy, it is almost always because the accent share has grown.
Typography
One friendly, geometric typeface across the whole product. Hierarchy comes from weight and colour rather than lots of different sizes, and every figure lines up neatly in columns.
Plus Jakarta Sans
Each style is named by its job, not its sizeShape & surface
Rounded corners everywhere: generous on cards, fully rounded on buttons and tags. Depth comes from thin warm outlines and gentle tints instead of drop shadows, which keeps long tables crisp and easy to read.
Card
White panel, soft corner, single hairline outline. The default container for everything.
Tinted block
Used to group or highlight without adding another border or a shadow.
Pill
Fully rounded shape shared by buttons, filters, search and tags.
The building blocks
A small kit of parts covers the whole application. Everything below is taken directly from the working screens.
Buttons
Only one blue button per screen area, so the next step is never in doubt.
Filters
Filters read as words, not icons — selected state is a soft blue tint.
Status tags
Tinted background, darker text of the same family — readable and never shouty.
Switches & inputs
Changes apply immediately in place — no confirmation pop-ups for routine edits.
Numbers at a glance
Enrolment
18 / 24
A big figure, a small label, one thin progress bar.
Attendance marks
Small coloured squares make a ten-week grid scannable in one look.
Do & don't
Do
- Give colour a job — action, status or category. Never decoration.
- One clear primary button per screen; everything else stays quiet.
- Keep tables calm: plain rows, colour only where it carries meaning.
- Change things in place — small inline controls instead of pop-ups.
- Let the page breathe; whitespace is part of the brand.
Don't
- Don't mix several bright colours in the same block.
- Don't add drop shadows or gradients to make things stand out.
- Don't fill a screen with competing buttons of equal weight.
- Don't use red-and-orange alarms for routine, everyday states.
- Don't shrink type below the reading sizes shown here.
Where it shows up
See the style working on the real screens.