Brand
The Belion Studios brand.
Built with purpose. Quiet confidence, warm materials, and nothing decorative without a reason. This page is the reference for how the brand looks and sounds.
Logo
A bold “belion” beside “studios” in an open frame. Forest on cream and on lime; paper with a lime frame on forest. Give it clear space equal to the frame’s height on every side, and don’t set it smaller than 120px wide on screen.
Please don’t
Stretch or squash the wordmark, recolour it outside forest and paper, add shadows or effects, or place it on busy photography.
Colour
A soft, cream-led palette. Cream and paper carry most of every page, forest gives it weight, lime marks the moments that matter, and full-width tinted bands mark where one section ends and the next begins.
Belion Forest
#18251D RGB 24, 37, 29
Primary: headlines, body text, buttons, footer
Forest Raised
#22332A RGB 34, 51, 42
Cards and shapes on forest
Lime
#B7FF72 RGB 183, 255, 114
The one accent: CTAs on forest, hover and focus, highlights
Lime Tint
#EAF9D9 RGB 234, 249, 217
Soft highlight backgrounds and hover fills
Ink Muted
#4A5A50 RGB 74, 90, 80
Secondary text on light backgrounds
Mist
#E4EAE1 RGB 228, 234, 225
Green-grey tint for title bands
Haze
#EDE9DF RGB 237, 233, 223
Warm callouts, notes and the occasional section band
Cream
#F5F2EA RGB 245, 242, 234
Page background
Paper
#FBFAF6 RGB 251, 250, 246
Cards and section bands on cream
Approximate balance on a page
Cream and paper about 55%, forest and ink about 30% (text plus one dark band), tints about 12%, lime as a small accent.
Give each page one dark forest band, for the section that should stand out most. Lime sits on forest or behind dark text, never as text or line work on cream.
Typography
Fraunces, set soft and light, for headlines. Inter Tight for everything else. Fraunces never appears in body text, buttons or forms.
Aa
Fraunces
Headlines. Soft axis 100, wonk off, optical size automatic, weight around 360.
Aa
Inter Tight
Body, interface and small text. Regular and medium weights only.
Display XL
Fraunces, 44 to 88px, weight 360
Built with purpose
Display L
Fraunces, 36 to 64px, weight 360
Built with purpose
Display M
Fraunces, 28 to 42px, weight 360
Built with purpose
Display S
Fraunces, 22 to 28px, weight 360
Built with purpose
Lead
Inter Tight, 18 to 21px, line height 1.6
Built with purpose
Body
Inter Tight, 17px, line height 1.7
Built with purpose
Small
Inter Tight, 14 to 15px
Built with purpose
On forest
Two weeks of care after launch.
Headlines in paper (#F5F2EA), body in muted sage (#A9B8AD). Lime picks out one or two words at most.
Voice
We write the way we build: clear, specific and unhurried. If a sentence could appear on any agency's website, we rewrite it.
Plain over clever
We say
We build the system your business runs on.
Not
We craft synergistic digital ecosystems.
Specific over impressive
We say
Live in one to two weeks.
Not
Lightning-fast delivery.
Calm over loud
We say
Tell us what you're building.
Not
Let's revolutionise your business today!
In use
The system applied beyond the website.
Gilbert Tallam
Founder
hello@belion.co.ke
Project proposal
Prepared for your business
Your business has outgrown the workaround.
belionstudiosLive in one to two weeks.
belionstudiosInterface
Restrained, editorial corners. Panels use a 10px radius, images 8px, and buttons, inputs and badges 6px. Dashed outlines mark supporting detail, so solid lines stay rare.
Buttons
Input
Accordion
What does a panel look like?
A restrained radius, a tinted background and no hard border where spacing can do the job instead.
Dashed card: what a step delivers, notes and reassurances
What you receive
A fixed-scope proposal.
Numbers, badges and chips
Lime circles number steps in order. The tinted check sits on light backgrounds, the solid one on forest.
- Product design
- Web application
- Laravel
- Next.js
Dark band
One per page, for the section that matters most.
- Paper headlines, sage body text
- Lime for checks, buttons and one or two words
- Doodles at 18% lime, never brighter
Doodles
Ink at 8% on light bands, lime at 18% on forest. They sit in a section’s top and bottom padding, never behind text, and draw themselves in once as the section scrolls into view.
Need our logo files for a partnership or feature? Email hello@belion.co.ke.