Brand

The Awaitful brand

Two characters from a developer's own keyboard: the slash and the caret. Everything on this page is the reasoning behind them, the rules that keep them intact, and the files to use them properly. If you are writing about Awaitful, this is your kit.

Download the kitSVG and PNG, every cut, plus these guidelines.

Anatomy and symbolism

The slash is the first character of every path and every command. The caret is the insertion point, the place where the agent is working. Set side by side they draw an A with the crossbar left out, and the missing stroke is the point: the letter is not finished yet. Neither is the agent. You are paid for exactly that gap.

One angle. All three strokes share the same 25.6 degree slope, mirrored.
One weight. The stroke is 60/512 of the frame, with round caps and joins.
Two elements. The entire mark is one line and one polyline.

One drawing, four cuts

The glyphs never change between cuts; only their placement does. Pick by where the file will land, not by taste.

The mark

awaitful-mark

Favicons, app icons, square contexts. Fills the square; its feet breach a circle by design.

SVG 1024 512 256 192 128 64 32

The avatar cut

awaitful-mark-avatar

Circular profile crops (GitHub, X, Docker Hub). The exact mark, raised so every terminal clears the circle.

SVG 1024 512 256

The logo

awaitful-logo

Mark over wordmark, circle-safe. Anywhere the name must be legible; below about 96px use the mark instead.

SVG 1024 512 256

The maskable icon

awaitful-maskable-512

The web manifest's maskable entry only. Its safe-zone padding looks timid everywhere else.

512

Do and don't

Use the provided cuts: mark for squares, avatar cut for circular crops, logo where the name must read.
Keep clear space around the mark of at least one stroke width (60/512 of the frame).
Put the mark on Ground, or on any calm surface with clear contrast.
Round corners at the usage site if a square context wants them. The assets ship full bleed.

Do not redraw, rotate, stretch, or shear the glyphs. The characters are the logo.
Do not recolor the mark or set the wordmark in another typeface.
Do not add shadows, gradients, outlines, or effects.
Do not circle-crop the square mark; that is what the avatar cut is for.

Color

The logo pair is fixed. The product palette is graphite with one signal green, defined in OKLCH so both themes share a hue; green marks the one thing that matters on a screen and is never decoration.

Ground#163300The deep green the mark stands on. Logo assets only.

Signal#9FE870The mark and wordmark green. Logo assets only.

Accent, light mode#00801Aoklch(52% 0.170 145). Product UI: actions, links, earned money.

Accent, dark mode#74DA5Coklch(80% 0.190 140). Same hue, dark-mode physics.

Graphite, dark#1B1E1Boklch(23% 0.006 145). The dark UI sits on graphite, never black.

Graphite, deep#111511oklch(19%). The darkest step the product ever uses.

Typeface and type system

Geist

Everything the user reads, weights 400 to 700. The wordmark is Geist 700, outlined to paths in the logo assets so it renders identically everywhere. Headings at 28px and above tighten to -0.02em; body stays at 0.

Geist Mono

Anything numeric or code-shaped: money, metrics, commands. Always with tabular figures, so digits never jitter as they change.

The logo is code

This is the complete mark, verbatim from the shipped SVG: one line, one polyline, one colour on one ground. There is no source file more original than this.

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <rect width="512" height="512" fill="#163300"/>
  <g transform="translate(256 256) scale(1.4) translate(-257.5 -220)"
     fill="none" stroke="#9FE870" stroke-width="60"
     stroke-linecap="round" stroke-linejoin="round">
    <line x1="140" y1="335" x2="250" y2="105"/>
    <polyline points="255,335 315,210 375,335"/>
  </g>
</svg>