UI Design Guide: Typography, Buttons, and Design Tokens Explained

Original carousel by @uiux.build on Instagram.

---

Good UI design is not about making things look pretty. It is about making decisions that scale. Three areas separate designers who ship production-ready work from those who stay stuck in mockup land: typography systems, button design, and design tokens. Get these right and everything else becomes easier. Get them wrong and you will spend hours fixing inconsistencies that should not exist.

Typography: The Foundation Nobody Skips Without Paying For

Typography is the first thing users experience, even before they read a single word. Font choice, size hierarchy, spacing, and line height all signal whether a product feels professional or amateur. A strong typography system starts with a clear scale rather than random font sizes picked by eye.

The best approach is to define a modular scale. Start with a base font size (16px is still the web standard) and derive sizes mathematically. A 1.25 ratio gives you: 16, 20, 25, 31, 39, 49. Round to clean numbers and you have a scale that works across every screen.

Line height matters as much as size. Body text typically needs 1.5 to 1.6 line height for readability. Headlines can go tighter at 1.1 to 1.2 because larger text needs less vertical space between lines. Letter spacing on headlines should be slightly negative (around -0.02em) while body text stays at the default.

Font pairing trips up many designers. A safe formula: pair one personality font (your display or headline font) with one workhorse font (your body text). If your headlines use a geometric sans like Poppins, pair it with a humanist sans like Inter for body. The contrast creates hierarchy without chaos. Never use two decorative fonts in the same interface.

Buttons: The Most Designed and Most Mishandled Element

Buttons are where design meets function. Every button communicates two things: what action it triggers and how important that action is relative to everything else on screen. Most interfaces need three button types: primary, secondary, and tertiary (or text) buttons.

Primary buttons carry the main action. One per screen, at most one per container. They use your brand color, solid fill, and clear label. A primary button should never compete with another primary button. If you have two primary buttons on the same view, you have a hierarchy problem, not a styling problem.

Secondary buttons support the primary action or offer an alternative. Outlined or lower-opacity styling works here. They are visible but deliberately less prominent. Common patterns include "Cancel" next to a "Save" button, or "Filter" next to "Apply."

Tertiary or text buttons handle low-priority actions. Think "Skip," "Learn more," or "Dismiss." They have no border or fill, just text. They should be used sparingly because they can blend into the background and become hard to discover.

Button Sizing and Accessibility

Mobile buttons need a minimum touch target of 44 by 44 points. That is not a design preference, it is an accessibility requirement. Anything smaller and users with motor impairments will struggle. On desktop, 36 to 40 pixels of height works for most cases. Padding inside the button should be at least 12px vertical and 24px horizontal for comfortable clicking.

Rounded corners are a style choice, but consistency is not. Pick one radius for buttons and use it everywhere. Mixing 4px, 8px, and 16px radii across different buttons in the same interface creates visual noise that users feel even if they cannot articulate why.

Design Tokens: The Bridge Between Design and Code

Design tokens are named variables that store your design decisions. Instead of hardcoding #0066CC into a button component, you create a token called color.primary.base and reference it everywhere. Change the token, and every component using it updates instantly.

Tokens work in layers. Core tokens define raw values: color.blue.500, spacing.4, radius.small. Semantic tokens add meaning: color.primary, spacing.button-padding, radius.control. Component tokens are specific to a component: button.background, card.border-radius.

This three-layer system is what makes design systems scalable. A junior designer does not need to know the hex value of your primary color. They just use color.primary and move on. A developer does not need to ask the design team what padding to use. They check the token.

Setting Up Tokens in Figma

Figma supports tokens through variables and styles. Create color styles first, then spacing styles, then typography styles. Once those exist, components can reference them. When you update a style, every instance updates. This is the single biggest productivity gain available to a design team that has not yet adopted tokens.

The Figma community offers free token libraries you can use as starting points. The Tokens Studio plugin (formerly Figma Tokens) lets you sync tokens between Figma and code repositories. For teams already using a design system, this closes the gap between design and engineering.

Connecting the Three Pillars

Typography, buttons, and tokens are not three separate topics. They form a chain. Your typography scale defines the text sizes on your buttons. Your button component uses semantic color tokens. Your tokens reference the same spacing system that governs your type.

When all three are aligned, consistency stops being something you have to think about and becomes something that happens automatically. Every new screen looks like it belongs. Every new component fits the system. Design reviews get shorter because there is less to argue about.

Why This Matters Now

In 2026, design tools can generate layouts, suggest color palettes, and even write component code. But they cannot make judgment calls about your token architecture or decide which button variant to use where. That is still a human decision, and it is the kind of decision that separates a designer from someone who knows how to use Figma.

If you want to build design systems and ship functional products without wrestling with infrastructure, Base44 lets you spin up apps with backend, database, and auth handled for you. You focus on the design decisions, not the plumbing.

---

Original Instagram carousel by @uiux.build. View the original post.