Brand
Brand Guidelines
How Soluease looks, moves and sounds: the logo, colour, type, components, illustration and motion behind soluease.com. Use this page as the reference for anything that carries our name, from a slide deck to a new app screen.
Last updated: October 25, 2026
Logo Colour Type Components Illustration Motion Voice Accessibility01
Logo & wordmark
The logo is a cyan app-icon tile with a white "S". The wordmark sets "Solu" in ink and "ease" in cyan, so the name always reads as a promise: software made easy.
Soluease
Soluease
Soluease
Soluease
Do
- ✓ Keep clear space of at least half the tile's height around the logo.
- ✓ Use the tile at 24px or larger, and the wordmark at 80px wide or larger.
- ✓ Place the logo on paper, white or light cyan; on cyan, use the white large-format wordmark.
Don't
- ✗ Recolour, stretch, outline or add effects to the logo.
- ✗ Rotate it in static layouts. The tilt and spin are reserved for motion, like the site intro.
- ✗ Set "Soluease" in another typeface, or swap the ink and cyan halves.
02
Colour
One accent, used with confidence. Cyan carries the brand on big moments (headlines, bands, panels, the footer) while ink does the talking and paper gives everything room. Tints of cyan fill in the rest; we don't add other hues.
Token names are the Tailwind colours configured on the site (for example bg-brand, text-ink). Click a code to copy it.
Brand cyan
brand
The accent: big headlines, bands, panels, arrow dots.
Ink
ink
Text, dark pill buttons, stickers, illustration outlines.
Paper
paper
The page background behind every section.
Mist
brand-100
Hero background, answer bubbles, image placeholders.
Soft cyan
brand-300
Light brush strokes, path tracks, words not yet revealed.
Deep cyan
brand-700
Small cyan text: labels, links, categories, focus rings.
Cyan 600
brand-600
Hover and pressed states, hatched textures.
Cyan 50
brand-50
The faintest tint, for large quiet areas.
White
white
Cards, form fields, sign boards in illustrations.
Pairings that pass
WCAG contrast ratios. Normal text needs 4.5:1; large text (24px+, or 19px+ bold) needs 3:1.
Ink on paper
16.7:1 · any size
Ink on cyan
5.3:1 · any size
Deep cyan on paper
5.4:1 · any size
White on ink
17.9:1 · any size
White on cyan
3.4:1 · large text only
Cyan on paper
3.1:1 · large text only
Cyan on ink
5.3:1 · any size
Ink on mist
15.2:1 · any size
Avoid cyan text on mist (2.9:1), and never use white or cyan for small text on cyan. Small text on cyan backgrounds is always ink.
03
Typography
Two Google Fonts. A chunky, condensed display face shouts the big ideas in capitals; a calm grotesque handles everything you read.
Display · Bricolage Grotesque
Google Fonts ↗Software that works.
ExtraBold (800) for headlines, Bold (700) for statements. Width condensed to 78% (font-stretch: 78%), tracking −0.02em, line height 0.82–0.9.
Body · Instrument Sans
Google Fonts ↗Great software and great games share the same DNA: clear goals, instant feedback and zero friction.
Regular (400) for reading, Medium (500) and SemiBold (600) for labels and buttons. Line height 1.6.
Type scale
clamp(3.25rem, 9.2vw, 9rem)clamp(3.25rem, 9vw, 8rem)clamp(2rem, 4.8vw, 4.5rem)1.5rem – 3rem1.125rem – 1.25rem1rem0.75rem0.875rem – 1remHeadlines can split into two tones (a cyan line, then an ink line) or highlight a few key words in cyan. Never more than two colours in one headline.
04
Components
Soft, rounded and a little bit tilted. Pills for anything you click, stickers for quick asides, generous cards for content.
Pill buttons
Ink for the main action, white for the second. The cyan arrow dot always sits on the right and turns on hover.
Stickers
Two or three words, tilted between −8° and 6°, stuck onto big type. Ink, cyan (with ink text) or white.
Cards
Game development
White, 2rem corners, a long soft shadow and a slight tilt that straightens on hover.
Chat bubbles
Clear milestones, regular demos and honest communication.
Questions as pills, answers as mist bubbles from the logo avatar.
Corner radius
Pills · full
Images · 1rem
Cards · 1.75–2rem
Panels · 2.5rem
Logo tile · 28%
Shadows & layout
- Cards:
0 24px 48px -24px rgba(15,23,42,.35) - Stickers:
0 10px 24px -10px rgba(15,23,42,.5) - Sections sit on paper and are separated by space (96–160px), or by a 2px ink rule on content pages.
- Width: content up to 1280px (80rem); portfolio grid and nav up to 1440px.
05
Illustration & graphics
Friendly line art with a game-studio wink. Characters carry our words on signs; arcade sprites and gamepads tag along.
Line & fill
3px ink outlines with round caps and joins. Flat cyan and white fills, with halftone dots, diagonal hatching or stripes for texture.
Cast
The walking duo with the SOLU and EASE signs, the pixel critter and the gamepad. New characters follow the same build: round heads, thick outlined limbs, props that carry our words.
Looping lines
One continuous hand-drawn line with loops of different sizes. Cyan on light backgrounds, white at 20% on cyan. Draw it in; never tile it as wallpaper.
Marquee band
Software that works Games that engage
A cyan band tilted −3°, white display caps separated by ink dots, scrolling slowly.
06
Motion
Playful, never in the way. Small things spring and overshoot; big things glide in with a smooth ease-out. Things animate as they scroll into view, and everything rests in its final state for people who prefer reduced motion.
Intro
Logo tile spins up from −40° (0.95s spring), its "S" pops in 0.3s later, the name slides out at 1.05s, then two brush strokes sweep off (0.65s). Homepage, fresh visits only.
Line reveal
Headline lines slide up out of a mask from 115%, 1.1s spring, 0.12s apart.
Pop in
Stickers and buttons scale from 0.4 and rise 20px, 0.7s spring.
Fade up
Blocks rise 32px while fading in, 0.9s ease-out.
Card reveal
Portfolio cards open from a small rounded window (inset 42.5%, 36px corners) while untilting from 3D (scale 1.45, 25° and ±16°), 1.25s ease-out.
Brush hover
Two brush strokes paint across a project image (0.95s, then 1.05s), then "View project" fades in. The arrow kicks to −45° and springs back.
Drawn lines
Squiggles and paths draw themselves in as they enter, thickening as they go; the services path follows the scroll.
Walk cycle
Illustrated characters walk in place (about 1s per stride) with a slight hand-drawn line wobble, paused when off screen.
07
Voice & tone
Clear, confident and human, with a playful streak. We're a software house and a game studio, and it shows in how we write.
We are
- ✓ Plain-spoken: benefits first, no jargon.
- ✓ Short and punchy in headlines; friendly and specific in body copy.
- ✓ Playful with game language, used lightly: levels, press start, achievements.
- ✓ Honest: real projects, real numbers, or none at all.
We avoid
- ✗ Buzzwords and empty superlatives.
- ✗ Claims or metrics we can't back up.
- ✗ Long headlines; if it needs a comma, it's body copy.
- ✗ Jokes that get in the way of the message.
Lines from the site
Software that works. Games that engage.
That was only level one.
Before you press start
You've reached the final level.
08
Accessibility
Playful for everyone. We aim for WCAG 2.1 AA everywhere.
Contrast
Follow the pairings in Colour: ink for all small text on cyan, deep cyan for small cyan text, white and cyan only as large display type.
Reduced motion
With reduced motion turned on, the intro is skipped and every animation shows its final state straight away.
Focus & keyboard
Everything clickable works with a keyboard and shows a visible focus state; card hover effects also play on focus.
Images & graphics
Meaningful images get alt text; decorative lines, patterns and stickers that repeat nearby text are hidden from screen readers.
Questions about the brand?
For logo files, brand asset requests or anything this page doesn't cover, get in touch.
[email protected]