heyz.
Sign in
Heyz / Portal / System 01

A little warmth.
A clear way forward.

A shared language for a home of useful ideas. Quiet surfaces, considered details, and one open door.

Get the brand kit Start with a page
A living reference. Designed in code. Versioned in Git.
An open invitation.
heyz.Ideas Alive.
01

One mark. Every surface.

Portal combines an open doorway with a point of connection. Its geometry and color stay the same across browsers and devices.

heyz.
Primary lockupOrange / charcoal
1 dot diameter

Give it room.

Leave at least one connection-dot diameter around the visible mark. Keep its natural 116:132 proportion.

Orange Portal on charcoalDefault
Ivory Portal on charcoalMonochrome / dark
Charcoal Portal on ivoryMonochrome / light
24px minimumStandalone display height. Favicons are the 16px exception.
02

Warmth, with restraint.

Charcoal creates focus. Ivory brings air. Orange marks the moments that deserve attention.

orange
#ED7650Identity & action
charcoal
#181816Canvas & structure
ivory
#F4F0E7Text & paper
15.6:1Ivory on charcoal · body text
6.2:1Orange on charcoal · accent text
Use dark ink.Orange and ivory are not a body-text pair.

Use semantic tokens in components. On ivory, use paper-ink or paper-accent; status colors belong to status, not new feature identities.

03

A clear voice, in two families.

Inter does the speaking. JetBrains Mono adds precision to code, identifiers and small technical labels.

Inter / 400 · 500 · 600Locally bundled
Ideas
Alive.

Give every idea a readable shape. Use short headings, generous line height, and enough space for the next thought.

Aa Bb Cc 0123456789JetBrains Mono / 400const idea = "worth sharing";
16 / 1.6Body text14 / 1.5Supporting UI40 → 80Display scale60–75Characters per line
04

Useful, down to the details.

Real components, real behavior. Clear labels, a visible focus ring and helpful recovery are part of the visual system.

A real interaction

Name a small idea.

This specimen keeps its state in this tab. Nothing is published or sent.

Keep it clear and descriptive. Up to 80 characters.
The last button demonstrates a disabled state.
Your title preview appears here.
Make the state explicit

Color supports the message.

These are interface examples, not the status of your account or documents.

ReadyThe preview is available.
Needs attentionCheck the sharing audience.
Could not saveYour text is still here. Try again.
Private draftOnly authorized people can see it.

Use Tab to inspect focus. Submit an empty title to inspect validation.

05

A repeatable place to begin.

A page starts with one job. Context comes first; the primary action follows; the content has room to breathe.

Heyz / Field notes01
A reusable starting point

Make room
for the idea.

A short introduction gives people the context they need. One clear action points to what comes next.

Download page template

Meaningful content

Use real titles, useful descriptions and an obvious reading order.

Considered structure

Group related ideas. Let independent sections stand on their own.

Clear purpose. One action. A little space.
  1. A recognizable frameShared navigation, compact identity, familiar footer.
  2. A human introductionSentence-case heading and a short explanation of the task.
  3. One clear next stepA primary action with a real destination or handler.
  4. A flexible content area720px for reading, 1248px for broader layouts. Stack at small widths.
  5. All the statesDesign empty, loading, error and success alongside the happy path.
06

The kit, ready to use.

Fixed-color assets and practical starting points, generated from the same master SVG and CSS tokens as the application.

Portal · orangeTransparent SVG
Portal · ivoryTransparent SVG
Portal · charcoalTransparent SVG
Community avatar512 × 512 PNG
Apple home-screen icon180 × 180 PNG
Avatar sourceFixed-color SVG
Design tokensCSS variables
Token dataJSON
Page templateMarkdown + code
Brand manualMarkdown reference

Use the 512px community avatar as a square image. Discord applies its own circle mask. Downloading or regenerating an asset does not change the live community.

07

Keep it coherent.

The system works when the small choices agree. Use the existing parts, then make the content your own.

Keep

  • The Portal geometry and fixed palette.
  • A 4px spacing rhythm and quiet corners.
  • Sentence case, literal labels and useful context.
  • Visible focus and text alongside status colors.
  • Short transitions; respect reduced motion.

Avoid

  • Unicode or emoji replacements for the mark.
  • New gradients, glows or colors per feature.
  • Multiple competing primary actions.
  • Placeholder controls without a working action.
  • Hand-editing generated icons or copied tokens.
Source → generate → inspectnpm run brand:generatenpm run brand:check

Commit the design source and its exports together. This page and the Markdown manual form the shared reference.

See the system in use