heyz.
Publishing world
Heyz / Portal / System 02

The public publishing world

Your agents make it.
Heyz brings it to people.

Create with agents. Publish for people.

Give your agent the brief, shape the work together, then share the exact result with the people you choose.

See the publishing journey Use the page template
Human intent → agent work → authorized publication → readers
Earlier illustration study / BriefAn illustrated miniature workspace where Elena briefs her agent beside a cream incident report.
A person starts the work
01

A world for publishing.

The artifact stays at the center, with room for people, agents and their conversation. Warm chalk, forest, terracotta and light paper carry the softer D direction across the site and product.

Version 02 / artifact collaboration

Work starts with a person.
It reaches the right readers.

A request becomes agent work and a proposed revision. A human reviews the exact result and chooses its readers. The earlier illustrations below remain composition studies; final media waits for a recording of the real product journey.

See the publishing journey
An illustrated miniature workroom where Elena reviews the cream incident report and its revisions.
02 / Elena reviews the revision
Elena chooses a report revision at the terracotta publishing threshold in the illustrated world.
03 / A deliberate thresholdElena chooses the exact revision and its readers.
An illustrated team room where colleagues discuss the same cream incident report at a shared table.
04 / Named readersThe Response Team continues the report conversation.
Canvas#F1EEE5
Forest#23483C
Sage#E8EDE2
Terracotta#BF765A
Paper#FFFCF5
Ink#1E3430

11.4:1 ink on canvas; 5.6:1 secondary ink; 5.4:1 terracotta text.

Terracotta material is decorative on canvas. Use the darker terracotta text token for words and meaningful small icons. Reuse these pairings across the v2 experience.

02

One Portal. Useful variants.

Portal combines an open doorway with a point of connection. Its geometry stays exact across the terracotta site mark and the original fixed-color exports.

heyz.
Site-wide v2 lockupTerracotta / forest
1 dot diameter

Give it room.

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

Terracotta Portal on paperSite-wide v2
Orange Portal on charcoalLegacy orange
Ivory Portal on charcoalMonochrome / dark
Charcoal Portal on ivoryMonochrome / light
24px minimumStandalone display height. Favicons are the 16px exception.
03

The original interface palette.

Orange, charcoal and ivory document the original interface and remain available as fixed-color exports.

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.

Product screens use semantic v2 tokens. On historical ivory examples, use paper-ink or paper-accent; status colors belong to status, not new feature identities.

04

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
Useful ideas.
Real readers.

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
05

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.

06

Show the publishing decision.

Lead with a person, the work they shape with an agent, and the exact result they choose to publish. Show where that result goes.

heyz.Publishing page / 01
Incident report / Human-led

From a brief to
the Response Team.

Elena gives her agent the brief, checks a clearer revision, then chooses that exact version and its readers.

See the publishing journey

An exact revision

Show the artifact Elena reviewed and the change she chose.

Named readers

The Response Team reads, discusses and shapes the next revision with the agent.

Elena → agent → exact report revision → Response Team
  1. Begin with human intentShow the person's brief before the agent's work.
  2. Give the artifact a shapeShow the report title, useful revision and readable next step.
  3. Name the publishing authorityMake the human decision and exact audience legible.
  4. Show what readers receiveCarry the selected revision and provenance through the Portal.
  5. Keep separate work separateThe later IT morning brief has its own explicit agent request, draft review and human publishing decision.
07

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 · terracottaTransparent SVG
Portal · legacy orangeTransparent SVG
Portal · ivoryTransparent SVG
Portal · charcoalTransparent SVG
Brief · illustrated worldIllustrated WebP
Review · illustrated worldIllustrated WebP
Threshold · illustrated worldIllustrated WebP
Readers · illustrated worldIllustrated WebP
Early composition studyHistorical SVG
Apple icon · v2180 × 180 PNG
Community avatar512 × 512 PNG
Apple icon · legacy180 × 180 PNG
Avatar sourceFixed-color SVG
Design tokensCSS variables
Token dataJSON
Page templateMarkdown + code
Brand manualMarkdown reference

The terracotta Portal and Apple icon are the v2 site assets. The orange community kit remains available for existing integrations. Downloading or regenerating an asset does not change a provider account or live community.

08

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 registered palettes.
  • 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