Design system 0.6.0

HeyGoal design system · 0.6.0

Start here

This is everything HeyGoal is made of — colors, type, components, logo, words — in one place. HeyGoal is a work dashboard for one person's practice: the person, not the work; operations, not money; a studio you like being in, not a cockpit.

Pick your path

Everyone · 10 min

New to HeyGoal?

Read the brand book: the product, the voice, how color, type, space and motion work.

Brand book → Designers

Designing a screen

Tokens for values, Components for the parts, Patterns for how a page is laid out.

Components → Developers

Building in code

Two CSS files, one script, five steps. Copy the markup from any preview.

Use in code → Writers

Writing copy

The voice rules and the exact wording of every button, empty state and error.

Microcopy → Marketing · partners

Need the logo

Every version, which ground it goes on, clear space and the don'ts.

Logo → Files

Just the files

Logos, 52 icons, fonts and token files, ready to download.

Downloads →

The suggested reading order

  1. Brand bookThe rules behind everything else.
  2. TokensEvery allowed color, size, radius, shadow and timing, in both themes.
  3. Foundation sheetsThe color, type, space and motion sheets, live.
  4. Components25 components in 8 families, with guidelines and props.
  5. Patterns12 rules for putting a page together.
  6. Microcopy and AccessibilityHow it talks and who it works for.

Six rules to remember

Dark first, warm lightDark is the default theme; light is a true warm light, not an inversion. Toggle it in the top bar of this site.
Tokens onlyNo hex, no hard-coded size, radius or duration. If it has no token, it gets one.
One accent, the user'sLime by default, any of 18 swatches. Brand blue is for the logo and the top bar, never a button.
Color is never aloneStatus always has a word. Project colors identify; they never mean "late" or "done".
Act, then offer UndoDestructive actions happen at once and the toast carries Undo. Dialogs are for choices.
Flat, calm, quickCards are flat. Only floating things cast shadows. Motion uses one curve, and every entrance has an exit.

What's in this folder

heygoal-design-system/ ├── index.html ← you are here ├── START-HERE.txt how to open this offline ├── pages/ one page per topic: brand book, tokens, components… ├── previews/ each component and sheet as its own page (add ?theme=light) ├── assets/ │ ├── css/ heygoal.css (the system) · fonts.css · site.css (this site only) │ ├── js/ heygoal-icons.js · site.js (this site only) │ ├── fonts/ Bricolage Grotesque · Inter │ ├── logo/versions/ 12 SVG versions of the mark │ ├── logo/source/ the original logo files │ └── icons/ 52 SVG icons └── tokens/ tokens.w3c.json (source of truth) · tokens.json · generated CSS and JS
NextBrand book
HeyGoal design system 0.6.0 · generated from tokens.json and the component CSS in design-system\HeyGoal design system · works offline, open any page in a browser.