HEDDLE.
Enter HEDDLE

Brand · Field Manual

Names, not noise.

Wordmark, color, typography, voice, and social assets. The vocabulary Heddle uses to recognize itself.

02

Profile images

Social avatars.

HEDDLE.

Square: 400 × 400

GitHub, LinkedIn. The wordmark alone, sized for legibility at avatar scale.

Round: 400 × 400

X / Twitter, Discord. Just the mark. Minimal at small sizes.

03

Banners

Social headers.

X / Twitter: 1500 × 500

HEDDLE.Version control for agent work.What one agent learns, the next one remembers.heddle.sh

LinkedIn: 1584 × 396

HEDDLE.Version control for agent work.What one agent learns, the next one remembers.heddle.sh

GitHub: 1280 × 640

HEDDLE.Version controlfor agent work.What one agent learns, the next one remembers.heddle.sh
04

Color

Palette.

Warm paper above, char below, ember as the bridge. Switch the theme, and ember stays exactly the same in both modes.

Paper --paper Default light surface
Vellum --vellum Subtle panel
Ink --ink Primary text
Graphite --graphite Borders, secondary
Mist --mist Captions, footnotes
Ember --ember Accent: large text only
Ember deep --ember-deep Hover, AA-safe
Char --char Dark-mode background

Accessibility rules

Ember on text
Permitted on large text only: ≥18px non-bold or ≥14px bold (WCAG large-text rule).
Hover states
Use --ember-deep on paper (passes 4.5:1) and the lighter --ember-deep in dark mode.
Hyperlinks
Ink with a 1px underline at 0.15em offset. Never ember.
Body text
Always --ink on light, --paper on dark. Never the accent.
05

Typography

Type system.

Display, reading and interface: Cal Sans

Version control for agent work.

One variable face for every role but code. Its optical size follows the font size, so headlines get the display cut and small labels the text cut. Headlines at weight 700, tracking -0.01em.

Reading: Cal Sans

The same face carries release notes, security pages, footnotes and captions. Readers can choose its letter shapes, from humanist to geometric, under Settings → Appearance.

17px / 1.6 line height. Use var(--font-body).

Italic accent: Cal Sans Italic

scales, clarity, signing

For the emotionally loaded word in a headline. Sparingly. Color: --accent (ember).

Code, IDs, paths: Paper Mono

heddle/objects/attribution.rs

Weight 500. Semantic use only. Never decorative.

06

Components

Buttons, fields, chips.

Every interactive element on Heddle inherits the same field-manual register: mono labels, rectangular geometry on a 3 / 6 / 10 / 14 radius scale, ember accents that only mark state. Never decoration.

Buttons

Mono labels at 0.84rem / weight 700, letter-spacing −0.01em. Padding 0.85rem × 1.35rem. Radius 10px. Ink-on-paper for primary; ghost outline for secondary. Never serif.

Get in. Open app Get access
Family
var(--font-mono)
Size
0.84rem · button-sm 0.78rem
Weight
700
Tracking
-0.01em
Radius
10px · button-sm 6px
Padding
0.85rem 1.35rem

Form fields

Vellum surface, 1px stroke, subtle inset top edge so the field reads as carved into the page. Mono input text. Focus state swaps to ember border with a 3px ember-tint ring.

Family
var(--font-mono) · 0.92rem
Surface
var(--vellum)
Stroke
1px var(--stroke)
Radius
6px
Padding
11px 13px
Focus ring
3px var(--accent-tint)

Chips & tags

Small mono labels with 3px radius. Used for state markers (MERGE, SHIPPED, INVARIANT) and inline badges (HUMAN, model chips). Always uppercase or lowercase mono. Never title case.

MERGE HUMAN INVARIANT anan
Family
var(--font-mono)
Size
0.62rem – 0.74rem
Tracking
0.14em uppercase
Radius
3px

Radius scale

Four steps. Off-scale values fragment the system; stay on the scale.

3
6
10
14
3px
Chips, tags, micro-badges
6px
Inputs, small buttons, the theme toggle
10px
Standard buttons, code panels, list rows
14px
Cards, large surfaces, code-panel pre
07

Voice

How we write.

  1. 01

    Direct

    Technical, second-person. Write to a staff engineer. Never explain what they already know.

  2. 02

    Outcome-first

    Lead with what the reader gets, not how it works. Identity before mechanism.

  3. 03

    Declarative

    State facts. No exclamation marks. No "excited to announce." Periods, not questions.

  4. 04

    Precise

    Numbers, specifics, named concepts. Avoid "seamlessly," "easily," "powerful."

  5. 05

    Calm

    Heddle doesn't shout. It states. The reader recognizes quality without being told.

  6. 06

    Never platform

    Heddle is a tool, a system, a substrate, an engine. Never a platform, the laziest word in dev-tool marketing.

  7. 07

    Speak in the weave

    Heddle is named after the loom part that lifts warps. When describing how things stay attached, prefer the weave: woven, carried, threaded, bound. Avoid travels, lives, sits, lands. Motion words miss the point. Reasoning isn't journeying alongside the code; it's woven into it.

Taglines

Primary
Version control for agent work.
Pillar
The unit is the task.
Manifesto
Names, not noise.
Relationship
Repo layer, not tool layer.
Aspirational
The record is always yours.
Technical
Immutable history. Stable change IDs. Explicit agent attribution.
Short
Version control for agent work. Nothing disappears.
Closer
Made carefully.