Skip to content
v1.0
Components

Logo

The GRIDD mark — a surveyed lot cut into three parcels by two roads — with an optional wordmark and product suffix, for a navbar, an auth page or a footer.

The mark

Code 
<GdLogo :size="88" />
<GdLogo :size="42" wordmark />
<GdLogo :size="24" wordmark product="Design" />
<GdLogo :size="24" wordmark to="/" />

Variants

PrimaryTwo indigo steps, one lot emptied
LightOn an accent wash or a tinted card
ReversedOn ink, and in dark mode
Small sizes32 / 20 / 16px — the emptied lot still reads
<GdLogo :size="52" /> → primary <GdLogo :size="52" light /> → on an accent wash <GdLogo :size="52" reversed /> → on ink, and in dark mode

API

Props

PropTypeDefault
sizenumber26

The mark's height in px. It scales proportionally — the lot has surveyed proportions and is never stretched.

reversedbooleanfalse

The on-ink and dark-mode trio. A different DRAWING of the same mark, not the same drawing recoloured.

lightbooleanfalse

The pale trio, for an accent wash or a tinted card.

wordmarkbooleanfalse

Show the GRIDD wordmark beside the mark. Inter 600 at `.035em` tracking.

productstring—

A sub-brand word after the wordmark — "Code", "Console", "Design". Set at regular weight in muted ink.

tostring—

Route the whole mark home, named "GRIDD — home". Omit it and the mark renders as a span with no link at all — opt-IN, and the asymmetry is the decision.

Usage Guidelines

  • Use the default trio on a white or subtle surface — a navbar, a card, a light page.
  • Use light on an accent wash or a tinted card, where the primary trio's darkest plane closes up against the ground.
  • Use reversed on ink and in dark mode. It is a different drawing, not a filter, so do not reach for CSS to invert the primary one.
  • Use wordmark wherever the brand still has to be named — a marketing header, an auth page. Drop it where the product already names itself.
  • Use product for the sub-brand word ("Design", "Code"), never a second wordmark beside the first.
  • Pass to only where there is somewhere to go. A brand that links home from an auth page is a door drawn on a wall.
  • Never a status hue. A lot filled with danger red reads as a message about the property.
  • Never stretched, never rotated. Scale proportionally; the lot is already off-square, and rotating it just looks like a mistake.
  • No effects. No shadow, gradient or glow — the planes already carry their own edge.
  • Clear space on all four sides equals half the mark's height. Nothing enters it.

Behavior & Anatomy

A surveyed lot, not a square

Two roads meet in a T and cut the lot into three parcels, one left empty. The roads are real GAPS between three separate planes rather than painted lines, which is what lets the mark sit on any background. The emptiness is the point: everything around your lot is known, and GRIDD is what fills the gap.

Why the hexes are constants, not tokens

The three planes are hard-coded in the component rather than tokenised, and that is deliberate: a logo is not themed. reversed swaps to the on-dark trio the design specifies, which is a different drawing of the same mark rather than the same drawing recoloured.

The wordmark's tracking

The wordmark is Inter 600 at .035em tracking — looser than UI type, because five capitals set tight read as one blocky shape rather than five letters.

Why linking is opt-in

A brand that links home from an auth page is a door drawn on a wall — the person reading it cannot go anywhere yet — so the default stays inert furniture and a page that genuinely has somewhere to send you asks for the link. Linked, the ANCHOR carries the accessible name and the drawing inside it is decorative: a named image nested in a named link is announced as "GRIDD, GRIDD — home", which reads as two things to visit. Unlinked, the SVG is the only thing there, so it keeps the name itself.

Navigate

Esc