Choosing fonts and colours for your app: a practical method

Most builders choose fonts and colours by feel: scroll a list, pick something that looks nice today, adjust forever. The result is usually an app where nothing is exactly wrong but nothing feels finished either. There is a better way, and it isn’t talent. It’s a repeatable method: set the mood deliberately, pick fonts on a scale, define a palette with weights and meanings, and space everything on a grid.

This is the method we teach in Module 3 of the bootcamp, and it’s tool-agnostic. Everything here applies whether you’re building in Bubble, in code, or in a slide deck.

The mood of an interface is the feeling it conveys before a single word is read, set by fonts, colours, spacing and imagery working together. Good UI is transparent: it enhances navigation by barely being noticeable. Bad UI stands out, usually by trying too hard.

Set the mood by critiquing real designs

Don’t start from a blank canvas. Start from what already exists:

1. Browse Dribbble and Behance, the portfolio sites where professional designers publish work across web, mobile and product design. Look at what’s current, what you personally like, and crucially what similar products to yours are doing.
2. Capture full pages. Install a browser extension like GoFullPage, which screenshots an entire scrolling page as one image or PDF.
3. Build a critique board. Drop four or five captured designs side by side in FigJam (or any whiteboarding tool). Mark what you like with green dots and what you don’t with red, and write down why.
4. Summarise the mood in a few words. For our own portfolio work the words were techie, clean, bold. Yours might be traditional or earthy and muted; an organic products store should not land on the same words as a cutting-edge dev shop. The point is consistency between what you’re claiming and what the design communicates.

When we ran this exercise across four designer portfolios, clear patterns emerged. What worked: white backgrounds (cleaner, more corporate), simple layouts, some bold colour, short clear hero headings, a familiar nav menu (about, work, contact), prominent case studies, alternating white and grey sections to break up the scroll, photos of the actual person, one strong primary call-to-action button (the kind that still stands out when you squint), and a proper footer that makes the site feel complete.

What didn’t: designs so graphic-design-oriented they buried the message, too much empty space, too much copy in a single weight so nothing tells you where to look, unclear calls to action, gradient overlays, mixing photos with illustrations (pick one; mixing reads as inconsistency), distracting animations, and low contrast between text and background.

One warning deserves its own line: beware of trying to be too cool. Trendy design decreases usability and accessibility, and it dates fastest. What looks sharp this year looks like 2016 soon enough, and then you’re revisiting everything.

Pick fonts on a scale, not on vibes

Fonts carry more of the mood than anything else, because most of a page is copy. Two decisions matter: which fonts, and how you scale them.

Serif or sans serif? Serif fonts have the small strokes hanging off each letterform; sans simply means without. Sans serif tends to read as more techie. There’s no rule about mixing: all-serif, all-sans, or a serif heading over a sans body all work. Pair what suits the mood.

Where to get them: Google Fonts. It’s free, high quality, uses industry-standard sizing and weights, and (if you’re building in Bubble) is natively supported, which spares you the whole buy-a-licence, download-files, wire-up-CSS, upload routine. For pairings, FontJoy generates combinations and shows heading, subheading and paragraph together, while FontPair lets you browse combinations known to work.

Then the scale. Here’s the failure mode: a heading and a body line in different fonts but nearly the same size and weight. Your eye can’t tell which is the title; it all blends into one. The fix is a type scale: a set of categories, each with a defined typeface, weight, size, case and letter spacing. Ours broadly aligns to HTML elements: h1 through h6, then subtitle, body, button, caption and overline. Sizes step down (96, 60, 48, 34, 24 and so on), most categories use sentence case, buttons and overlines go all-caps, and letter spacing varies with size to compensate for it. Once the scale is applied, the same two lines instantly read as title and body, and the content balances.

Tools help here too. Typescale generates a full scale from a base size and a chosen ratio (the “perfect fourth”, for instance), and Google’s Material type scale is a solid reference. Fonts we keep coming back to in project work: Inter, Nunito, Open Sans, Montserrat, Source Sans and Lato.

Typography like this is one component of a design system, the shared set of rules that keeps an interface consistent and tells users what’s important in the hierarchy. That bigger picture is covered in the Module 3 overview.

Define a colour palette with weights and meanings

Colour palettes have come a long way since the hot-dog-stand colour schemes of twenty-five years ago. A modern palette isn’t a handful of colours; it’s a small system.

Start with contrast. Take the same button with white text on a dark background and on a light one: the dark version reads effortlessly, the light one makes you work. That’s contrast ratio, and it decides accessibility. Run any foreground and background pair through a contrast checker: 13.7 is excellent, 3.61 is poor. Check this before you fall in love with a combination.

Define states. Apps aren’t static. Buttons have default, hover and pressed states, and interfaces that respond to interaction feel more finished and easier to understand. These belong in the design system, not improvised per button.

Build the weight scale. From your primary brand colour, generate a gradient of variants weighted from 100 (lightest) to 900 (darkest), with 500 as the primary itself. A tool like Eva Design will generate the lighter and darker variants for you, and Tailwind CSS’s slate, gray, zinc, neutral and stone scales show the same idea. Each weight has a job:

• 100: foreground colours on very dark backgrounds
• 300: borders and highlights (hover underlines, highlighted edges)
• 500: the brand accent itself
• 600–700: component backgrounds that need to stand out, like buttons
• 900: active and focus states

Add a secondary colour and a set of greys; grey is the neutral that pairs with almost anything. In Bubble we deliberately restrict how many weights we define, simply because Bubble caps the number of colour variables. We keep primary 100, 200, 500, 600 and 700 and a matching set of accent weights.

Add semantic colours. Green for success, a teal-blue for information, orange for warning, red for danger — the “are you sure you want to delete your account?” red. People have been reading traffic lights their whole lives; use that. Go greyscale on these and you throw away a prompt users recognise instantly.

Apply it with the 60-30-10 rule: roughly 60 per cent primary, 30 per cent secondary, 10 per cent accent across a design. And check the psychology of your choices. Blues convey calm, responsibility and professional authority; purples creativity, royalty and wealth; greens new beginnings, nature and (often) innovation; red passion and anger; black mystery and elegance. Pick primaries that say what you mean.

Spacing: the box model and the grid

Layout on the web comes down to the CSS box model, and Bubble uses the same words, so it’s worth learning properly. From the inside out: content, then padding (inside the border), then the border, then margin (outside the border). Padding creates space within an object; margin pushes the object away from its parent. The order is the whole concept, and it’s why padding on a parent is usually the cleaner tool.

Spacing, like fonts and colours, wants a scale. IBM’s Carbon design system builds its spacing guideline on a 2-pixel base that steps up progressively; our case study uses a 4-pixel grid, so every gap, padding and radius is a multiple of four. The page grid completes it: content constrained to 1128 pixels wide with 156-pixel gutters on desktop, narrowing to 40 on tablet and 20 on mobile as the design adapts.

To see why this matters, take a cramped pricing card, the kind where everything hugs the edges, the button is enormous, and the font weights are so similar your eye doesn’t know where to land. Fix it step by step, on the grid:

1. Add padding: 16 pixels immediately helps; 32 gives it real breathing room.
2. Tighten what belongs together: pull the feature bullet points closer so they read as one visual group.
3. Separate and re-weight the text: drop the description below the title, reduce its weight, and increase the weight of the plan name.
4. Shrink the button padding so it stops overwhelming the card.
5. Align to one edge: pull the indented items back into a single clean line down the left.
6. Soften the colours: a light neutral grey border, secondary text faded back, a very light primary variant on the button, tick colours reversed.
7. Add a subtle drop shadow for a three-dimensional lift.

Same content, transformed card. And to guide users toward the plan you want them to choose, add a primary-coloured border and a small “most popular” pill: user interface design doing quiet persuasion.

The summary rules: stay consistent with your spacing (multiples of four or five work well), use spacing to make content easier to read, and position related items closer together.

Try it yourself

Build a mood board for your own project this week: five comparable products captured with GoFullPage, green and red dots, findings summarised in three words. Then draft your type scale and your primary-plus-greys palette with weights before you style a single element. An hour of this saves weeks of fiddling.

This skill in the AI era

AI tools will happily generate an interface, but they generate to your brief, and “make it look nice” is not a brief. Mood words, a named font pairing, a weighted palette and a spacing grid are exactly the vocabulary that turns Claude Code into a reliable design collaborator — a large part of what carried over from our Bubble years into AI-assisted building. It’s also precisely what we coach teams on in our Claude Code training in Sydney: the fundamentals don’t change, only who’s holding the keyboard.