Brand and design
Design guide
Everything needed to represent Solution Seeking correctly: the logo and its variants, the colours, the typefaces, and the rules that keep it recognisable. Written to be handed to someone outside the team.
The lockup
How every name is built
Every name in the system is built the same way: Solution in Poppins, SEEKING in Anton, then a qualifier. Only the third line changes, which is what makes a new one obviously ours.
Every one below is set in the brand faces and supplied as vector, with the type converted to outlines, so a downloaded file needs no font installed. Need a qualifier that is not here? Ask, and it gets added to this set rather than rebuilt by hand each time.
Logo files
The mark and its variants
The mark is two S shapes, one behind the other and offset. In the master they are told apart by a gradient; every flat variant below keeps them apart another way, because a single flat colour fuses them into one shape and stops reading as the logo.
Also included
App icons at 16, 32, 48, 180, 192 and 512px, and a 1024px social avatar on a brand tile. All in the download.
Clearspace and size
How much space it needs
½ the mark's height Clearspace
Keep clear space on every side equal to half the mark's height. Nothing enters it: not type, not a page edge, not another logo.
24px
mark, minimum
120px
full logo, minimum
Minimum sizes
Below 24px wide the two S shapes stop separating. Below 120px the wordmark's third line stops being legible, so use the mark alone instead of shrinking the lockup.
Misuse
What not to do
If a variant you need is not in the download, ask rather than making one.
Do not stretch it
Scale both dimensions together, always.
Do not recolour it
The two blues are the identity. Use a supplied variant instead.
Do not add effects
No shadows, outlines, bevels, or glows. The mark already has depth.
Do not rotate it
The S reads as an S at one angle only.
Do not rebuild the wordmark
Poppins is close, not identical. Use the supplied outlines.
Do not crowd it
Keep the clearspace below free of type, edges, and other marks.
Colour
What each colour is for
Read from the same config the site is built from, so these values cannot drift from what is actually shipping.
brand-500
#5271FF Primary. Buttons, links, the front S of the mark.
4.07:1 on white · Large text and UI
sky-500
#3D9BF0 Accent. Reserved for the SEEKING word.
2.94:1 on white · Decorative only
ink-800
#16276B Headings and high-emphasis text.
13.67:1 on white · Body text
brand-300
#A3B2FF The S behind the front one, in flat artwork.
2.03:1 on white · Decorative only
brand-50
#EEF1FF Tinted panels and section backgrounds.
1.13:1 on white · Decorative only
Full brand ramp
50
100
200
300
400
500
600
700
800
900
Gold marks the solution
gold The palette is otherwise all cool blues, so the one warm colour is the one that means arrival: the third step of the protocol, the output of a tool, the moment something has been found. Use it where a person has got somewhere, and nowhere else. Gold everywhere stops meaning anything.
Practically, it is a colour for dark surfaces. On light backgrounds it is a shape and never type: a marker rule, an underline, or a fill behind dark text.
Your solution check
This is the real use, from the Solution Builder: a navy result panel with gold on the one action that matters. 8.66:1 against the panel, which passes body text comfortably.
Copy the checkOn white, as a shape
gold-500 is only 1.58:1 here, so it never carries type.
gold-800 or darker.
The ramp, with real ratios on white
50
1.07:1
100
1.15:1
200
1.29:1
300
1.42:1
400
1.50:1
500
1.58:1
600
2.00:1
700
2.66:1
800
4.68:1
900
6.49:1
Bold ratios clear WCAG AA for body text on white. Every number here is measured from the same config the site is built with, so it cannot drift from the swatch beside it.
Gold is not a status colour
This box is amber, and amber already means a warning, an error, or a lapsed subscription throughout the product. It sits close enough to gold that the two can be mistaken for each other, so keep gold for brand warmth and leave every success, warning, and error state alone.
Typography
The typefaces and where they go
Anton, Poppins and Inter are all open-licensed and available from Google Fonts, so anyone working with us can install them without buying anything. The logo itself is supplied as outlines and never depends on a font being present.
Anton
Displayfont-display The SEEKING word, and impact numbers. One weight, used sparingly.
SEEKING
Poppins
Headingsfont-heading Headings, the wordmark, and the qualifier line.
Solution
Inter
Bodyfont-sans Everything you actually read. The default, so it needs no class.
Understand yourself, understand each other, then seek a solution.
UI kit
The pieces the site is built from
Live components with their class names, defined in
src/styles/global.css.
Buttons
.btn-primary · .btn-secondary · .btn-ghost
Section label
How it works
.eyebrow, small caps at 0.18em tracking. Opens most sections.
Card elevation
Both are tinted navy rather than grey, so shadows sit in the palette.
Page width
.container-page wraps every section on the site.
Icons
Concept icons
Drawn for the parts of the system rather than picked from a set. They inherit the surrounding text colour, so they take a brand colour wherever they sit.
protocol principles tools introspection mutual-understanding solution-spark one-on-one feedback targeted sessions Permissions
What you may do with these
Yes, without asking
- Use the marks, unmodified, to refer or link to us.
- Show them in an article, a deck, or a list of tools you use.
- Build materials for a team already using the system.
Ask first
- Anything that suggests we endorse, partner with, or built your product.
- Use in your own logo, product name, app icon, or domain.
- Modified marks, or a variant that is not in the download.
- Merchandise, or anything sold.
The Solution Seeking System™ and related terms are trademarks of Beanchain Coffee LLC. These assets are provided for identifying and referring to the system, and using them does not transfer any rights in them. When something is not covered here, write to us and ask: the answer is usually yes.