How this website is made.
The colours, type, shapes and motion we use, and why. The values on this page are read from the website’s own stylesheet, so they’re always current.
On this page
Four rules every page follows. When a choice is unclear, these decide it.
Say what’s true
Only what we offer today, and only real work. No stock photos, invented reviews or made up numbers.
Use plain words
If a word needs explaining, we use a plainer one. Most of the people we work with run businesses, not computers.
Build it in layers
Our logo is blocks being stacked. Blocks show up in our drawings, in our layouts and in how things move.
Show, don’t decorate
Every picture explains something. If it doesn’t, it comes out.
Four blocks being stacked, caught the moment they land. Two make a solid base, the gold one has just landed, and the top one is still falling.
On dark
White, with the third block always gold.
On light
Charcoal, on white or on light backgrounds.
The blocks alone
For small spaces, profile pictures and the browser tab.
- Keep empty space around it, at least as tall as one block.
- Don’t stretch it, recolour it, add shadows or change the font.
- Don’t straighten the blocks. The tilt is the idea.
- In our drawings, blocks may tilt less so the words on them stay easy to read.
Charcoal, white and one gold accent. Everything else is a quieter step of those, or a real thing we’re showing.
The brand
From our brand guide.
- #1C1F24
Charcoal
Our main colour: text, dark sections and the logo.
- #B8964F
Gold
Our one accent: the third block, and what needs attention. Never for small text on white.
- #FFFFFF
White
The page itself, and blocks on charcoal.
Around charcoal
What sits on dark sections.
- #2A2E34
Charcoal, lifted
Panels that sit on charcoal, and the footer.
- #D8DADD
On charcoal
Body text on dark sections.
- #A4A8AE
Fog
Small notes on dark sections.
- #3A3E45
Rule
Lines on dark sections.
Around white
What sits on light sections.
- #FBFAF8
Paper
A quiet band that sets a section apart.
- #F4F3F0
Mist
Cards and panels on white.
- #E2E0DB
Line
Hairlines and card edges.
- #62666C
Muted
Secondary text on light backgrounds.
- #7A5A1C
Gold, for text
Gold made darker, so small gold words stay easy to read on white.
- #F6F0E2
Gold wash
A warm background for what you do, as against what we do.
Inside our drawings
Used only to show real things, like WhatsApp and Google Maps.
- #0F7A52
WhatsApp green
Only for WhatsApp buttons, darkened so white text passes.
- #0C6543
WhatsApp green, hover
The same button under a pointer.
- #ECE5DD
Chat background
The WhatsApp preview on the Start page.
- #075E54
Chat bar
The top of that preview.
- #DCF8C6
Your message
The bubble you send.
- #E8ECDF
Map
Land in our small map drawings.
Others
- #1A56C4
link
- #34A0D9
tick
Which pairs are safe
Worked out live from the colours above. Normal text needs at least 4.5 to 1.
- Headings and body16.5 to 1. Passes AAA.
- Secondary text5.8 to 1. Passes AA.
- Small gold words6.4 to 1. Passes AA.
- Headings on charcoal16.5 to 1. Passes AAA.
- Body on charcoal11.8 to 1. Passes AAA.
- Notes on charcoal6.9 to 1. Passes AA.
- Gold on charcoal5.9 to 1. Passes AA.
- Words on gold5.9 to 1. Passes AA.
- WhatsApp buttons5.3 to 1. Passes AA.
Two free typefaces, served from this site. Sora is the font in our logo, so it carries the headings. Lexend was designed to be easy to read, so it carries everything else.
Custom websites, built properly.
Page titles. Sora Semibold, 48 to 72 px.
Tell us about your business.
The Start page title. 36 to 60 px.
Add what you need.
Section titles. 30 to 48 px.
Show up on Google Maps.
Smaller section titles. 24 to 36 px.
Yours, always
Panel titles. 24 px.
First 14 days
Card titles. 20 px.
We design and code websites for businesses in Sri Lanka.
Introductions. Lexend, 18 to 20 px.
Tell us what you need, and show us 2 or 3 websites you like.
Body text. 16 px on 1.6 lines.
Each is quoted separately, so you only pay for what you use.
Help text and card text. 14 px.
About 2 weeks
The smallest text we use. 12 px.
Blocks with a small corner for anything that belongs to the idea, softer corners for anything you press or read.
Blocks: 4 px
Icon tiles and the blocks in our drawings. Only the logo itself stays sharp.
Buttons and fields: 12 px
Soft enough to feel friendly when you tap them.
Panels: 16 to 24 px
The bigger the panel, the bigger the corner.
Room to breathe, in steps of four. Every section fills your screen, so you see one idea at a time. The bars are drawn at their real size.
Between cards 16 px
Inside cards 24 px
Under a section title 48 px
Top and bottom of a section 96 px
Pages stop growing at 84 rem wide, about 1344 px, with 24 px of space at the sides on phones and 32 px on bigger screens.
A drawing of our main parts, in the style of an engineering sheet. Every measure has a code, so anyone can rebuild them exactly.
The whole sheet fits your screen. Pinch to zoom in on any part.
Mostly flat. Shadows only appear on things that really do sit above the page.
Floating
Menus and pictures that overlap.
Blocks on charcoal
The blocks in our logo drawing.
The nav bar
Just enough to lift it off the page.
Bars at the screen’s edge
The send bar on phones.
The real parts from this website, not pictures of them.
On light
Charcoal for the main action, an outline for the other. Green only ever means WhatsApp.
On charcoal
White or gold for the main action.
Fields
A label you can always see, never only grey words inside the box. Text is 16 px so phones don’t zoom in.
Choices
Picked choices turn charcoal. Anything you tap is at least 44 px tall.
One curve for everything, so movement starts briskly and settles slowly, like a block landing. Its value is cubic-bezier(0.22, 1, 0.36, 1).
Section titles
Each word lands in turn, tilted a little like the logo, then settles.
Sections
Each holds still while the next slides over it.
Cards
They rise and come into focus, tied to your scroll, so you stay in control.
Service cards
They slide up and stack over each other, like our blocks, on larger screens.
The Process page
A gold line fills as you read down the steps.
The customer journey
Plays step by step like a short film, with a pause button.
The hero sentence
Words spin like slot reels and stop one after another, with a word lit up at random. The space is held, so nothing moves around them. You can pause it.
Reduced motion
If your device asks for less motion, all of this stops. You can also turn it off in our footer.
Sentence case, short lines, no IT talk. No italics, no emojis, and every button says exactly what happens next.
Instead of Responsive design
we say Works well on phones, tablets and computers
Instead of SSL certificate
we say A secure connection
Instead of Meta tags, sitemap
we say Set up so Google can find and show your website
Instead of DNS, domain
we say Web address
Instead of Hosting and deployment
we say We put your website online and keep it running
Instead of Revision rounds, scope
we say Rounds of changes, what’s included
Built to the WCAG 2.2 AA accessibility standard, and checked with automated tests on every page.
- Everything works with a keyboard, and focus is always visible.
- Text and background always pass the contrast check above.
- Motion can be switched off, and respects your device’s setting.
- Works from small phones to wide screens, with nothing cut off.
- Each page has its own title, description and share image.
- Your answers stay in your browser until you choose to send them.
Tell us about your business, and you’ll get one clear quote in plain words.
- No cost to talk
- One clear quote
- 14 days of free fixes