Brand

Logo

A rounded square holding a W drawn as one trend line. The mark, the wordmark, the lockups, clear space, and what not to do.

#The mark

A rounded square (corner radius 25% of the side) holding a W drawn as a single trend line. It doubles as the sparkline motif used across the product. This is the shipped mark; it matches the app’s Logo.tsx and favicon exactly.

In product

Weekwright

Code

<span class="logo"><svg class="logo-mark" viewBox="0 0 28 28" aria-hidden="true"><rect width="28" height="28" rx="7"/><path d="M6.5 9.5 10 19l4-7 4 7 3.5-9.5"/></svg>Weekwright</span>

<Logo />

#Files

SVG is the source of truth. PNGs are rendered from the SVGs in png/logo/.

MarkDefault. On paper or a white surface, light theme.logo/mark.svg

Mark, darkDark theme.logo/mark-dark.svg

Mark on tealInverted, for a solid teal panel such as the sign-in screen.logo/mark-on-teal.svg

Wordmark, inkInk on paper or a white surface.logo/wordmark-ink.svg

Wordmark, paperPaper on ink or a dark surface.logo/wordmark-paper.svg

LockupMark and wordmark, light theme.logo/lockup-horizontal.svg

Lockup, darkMark and wordmark, dark theme.logo/lockup-horizontal-dark.svg

#Clear space and size

Clear space: at least half the mark’s width on every side. Do not crop it.
Minimum size: mark alone 20px. Wordmark at least 100px wide on screen.
Wordmark: Inter Bold. If the letterforms need to change, rebuild from Inter Bold. Do not restyle into another face.

Clear space

Clear space ≥ ½ mark width (hatched)

Code

<div class="g-clear"><div><img src="logo/mark.svg" alt="Weekwright mark" width="56" height="56" /></div></div>
<span class="muted" style="margin-left:var(--space-4)">Clear space ≥ ½ mark width (hatched)</span>

#Do and don’t

Do

Flat color only: accent (or its dark value) for the square, on-accent for the line
Ink or paper for the wordmark
Use the inverted mark on a solid teal panel

Don’t

Gradients, glows, 3D, sparkles, a brain, a robot, or a chart icon
Recolor outside accent and on-accent, or their inverse
Stretch, rotate, or add effects
Put the teal square behind the word in the nav

#Explorations

These are concepts under consideration. They are not approved and not authoritative. The shipped mark above is the only one to use.

A · Week stripSeven day-bars rising; today pops in violet.

B · Folded packA folded-corner page: the pack, delivered flat.

C · SignalOne clean upward move and one action as a violet dot.