The quiet work of good design

A useful design system begins with a simple question: what should feel familiar? Before choosing a color or drawing a component, we can decide how an idea should move from a headline to a sentence, and from a sentence to an action.

Consistency makes room for attention. When the small decisions feel settled, the important ones become easier to see. That is the promise of a system built around clarity, rhythm, and restraint.

Start with a shared language

Typography gives that language its voice. A regular-weight heading can introduce a subject without overwhelming it. A comfortable paragraph invites the reader to stay. Our Body scale connects both, beginning with a 16px reading size.

A system should help the work feel considered, even when no one notices the system itself.

That does not mean every page should look the same. It means that each page begins with a few dependable choices:

• Hierarchy: a clear distinction between the main idea and its supporting details.
• Rhythm: enough space to separate ideas without breaking their connection.
• Continuity: familiar styles that carry across a website, an article, or a presentation.

Give each level a purpose

Four heading levels are enough for most editorial work. Use them in order, with the largest reserved for the article title. Their medium weight keeps the hierarchy clear and the voice consistent with the paragraphs that follow.

Let the space do some work

The pause before a heading signals a new thought. The space after it keeps that thought connected to its explanation. Those two distances need not be equal: a heading belongs more closely to the paragraph below it.

Build with a few deliberate choices

A practical process starts small. Establish the defaults, try them with real content, and only add a new rule when it solves a recurring problem.

1. Write the content before adjusting its presentation.
2. Choose the appropriate heading level for each section.
3. Review the result in context:
   • Read it on a narrow screen.
   • Check both light and dark appearances.
   • Make sure links are easy to identify.
4. Keep the choices that make the next piece easier to create.

Make the default easy to use

Wrap an article in k-prose to apply the shared reading styles. Headings, paragraphs, lists, and tables then follow the same foundation without individual formatting.

<article class="k-prose">
  <h1>A clear place to start</h1>
  <p>One idea, thoughtfully expressed.</p>
</article>

Small interface details belong to this language too. A shortcut such as ⌘ + K uses monospace text, while an important phrase can carry a little more weight without needing a new size.

Leave room for the next idea

The best starting point is not the one with the most options. It is the one that makes the next decision easier. Keep the structure dependable, let the content lead, and give yourself permission to leave a little space.

Explore the Subheading and Display scales when a supporting message or campaign needs a different level of emphasis.