feelreef
Brand mark feelreef

One coral, out of a whole reef

Six round-capped strokes, one circle. This page is the whole of it — the shape, the rules, and the sentence you would need to draw it again without any of our files.

How it is built

One stem, a two-lobed crown, an arm reaching down-left, a branch reaching right with a small spur above it. Every stroke shares one width — even weight is the mark's character, so no part is ever thickened or thinned on its own.

  • Stem · 1
  • Crown · 2 lobes
  • Arm · 1
  • Branch + spur · 2
  • viewBox 100×100
  • r = 46
  • stroke = 11
  • pathLength = 100
  • ½ branch · ⅔ arm

Origin · how it evolved

This coral is not only a coral. Four steps, from a whole reef face to a single mark that breathes — and the finished form hides feelreef's own initials.

  1. Figure-ground reversal · REEF hidden inside
    ①
    Figure-ground reversal · REEF hidden inside A letter game: the four letters of REEF hide in the negative space of a whole reef face.
  2. Take the largest polyp · the 「r」
    ②
    Take the largest polyp · the 「r」 The biggest, most upright polyp is the leading r. Too full — it blurs at small sizes, so it converges toward the essentials.
  3. Hand-drawn study
    ③
    Hand-drawn study This is where the six strokes get their posture: the short fat U, the shoulder of the 「r」, the little spur reaching right.
  4. ④
    Vector master · f ＋ r fused f = the upright stem · r = the right branch and its spur — scalable without limit, and able to move.
From a figure-ground REEF (taking the largest polyp as the 「r」) to today's fused f＋r — the letters are always hiding in the shape, and none of them jumps out shouting 「I am a letter」. Spotting it is an easter egg; missing it just leaves you a good-looking coral.

One silhouette, several fills

The silhouette does not move a millimetre — only the fill layer changes. The top row is the four official dresses for everyday digital; the bottom row is for paper and special surfaces.

Everyday digital — the four official dresses

primary
Ocean · the everyday badge Use this by default: nav bars, favicons, avatars, small sizes.
lead
Growth gradient · deep sea at the base, coral at the tips Deep sea at the base of the stem, coral at the tips — new growth happens at the ends.
motion
Growth gradient · in motion Nourishment travels up the stem to the tips, breathing slowly.
Coral sunset · for dark surfaces A deep-sea gradient disc carrying a warm coral. For dark surfaces.

Paper and special surfaces

Mono · positive The original direction · stamps, laser engraving, one-colour print.
On dark stock · positive Dark paper · a white disc with an ink coral.
Glyph · takes the surrounding text colour currentColor · inline, loading states, watermarks.

Container and breathing room

The coral sits centred in its frame with even room to breathe on all sides. The true circle is the primary container; the squircle stands in for it wherever an app icon is called for.

primary
Centred circle · with margin Centre of mass in the middle, even on every side.
Squircle · fits an app icon
Squircle · deep sea Sunset coral on a deep ground.

The wordmark

Always lowercase, always Young Serif, always beside the badge with a gap of about a third of the badge's diameter. Three published dresses: the growth gradient leads, the coral sunset is for dark grounds, and the knocked-out one rides a gradient band.

feelreef
Growth-gradient wordmark · lead
feelreef
Coral-sunset wordmark
feelreef
Gradient ground · knocked-out wordmark

REEF with X · the module naming system

Every module belongs to the 「REEF with X」 family — the same coral, the same REEF, the same joining word. Only the capability name at the end and its own colour change.

RiseEmergeEvolveFlourish — where REEF comes from, and where this series got its name.

REEF with Members
REEF with Card
REEF with Site
REEF with Editor
REEF with Blog
REEF with Lingo
REEF with Members
REEF with Checkout
REEF with Domain
REEF with GAIDO
REEF with KAITO
REEF with Century
REEF with Ejecta
REEF with MCP
REEF with Page
REEF with PWA
REEF with Email

Each lockup is ONE colour — the coral badge, REEF, and the capability name all share the module's own colour, and only `with` stays grey. The free entry point Card is green, the core Site is ocean, the money pair Checkout / Members are green and coral, and the AI pair GAIDO / KAITO are both purple. The badge and REEF are always the same colour, which is why a lockup reads as one object.

A recipe, not a file

Marks that last are carried as instructions, not as assets — a family crest survives six centuries of hand-carving because carvers were told what it is, not sent a copy. So the coral has its own escape hatch: one sentence rebuilds the whole plant, with no file, no vendor, and no us.

A coral in a circle: one stem stands upright, splitting at the top into two short round lobes. Halfway up, a branch reaches right with a small spur pointing skyward; two-thirds up, an arm hangs down to the left, curved like a hook. The three lobes all come from one arc. Six strokes in all, even width, round ends.
  • ½ branch
  • ⅔ arm
  • ⅐ crown
  • ×3 one mother arc ×3

Not one of the marks that survived a thousand years did it by being archived — they did it by being a sentence anyone could rebuild the whole thing from. This is not a fifth shape: the shape is the one above. What changes is the medium it travels in.

Rebuilt with compasses ½ and ⅔ marks plus one mother arc — drawable with ruler and compass.
Seal · knocked out It survives in the negative space — carvable, pressable, brandable.
Hand-copied · tolerance band Every stroke may wander half a cell to a whole one and it is still the same coral. Its identity is in the topology, not in coordinates.
Said plainly: nobody can design a shape guaranteed to last a thousand years — what can be designed is how it travels. Shell's logo was redrawn eight times in a century without dying; family crests were hand-cut by countless craftsmen for six hundred years without losing themselves. Both relied on the same thing: an invariant, plus permission to redraw. Here the invariant is the topology (how six strokes relate), the fractional ratios, and one mother arc; everything else each generation is allowed to reinterpret. And it refuses to drop the arm or the spur to be 「more timeless」 — that would make it an anonymous tree. The marks that lasted a thousand years are all distinctive AND rebuildable, not minimal. Which is, conveniently, feelreef's own genetics: the logo carries its own escape hatch — it needs no file and it does not need us to be alive; one sentence takes it with you.

Using it

Clear space
Clear space on every side of at least one stroke width — about 12% of the badge diameter. Nothing sits inside it: no text, no other shapes, no frame.
Minimum size
The badge goes down to 20px (small enough for a favicon); the wordmark alone stops at 14px. In print, 6mm.
Gradients
One gradient at a time, and gradients only on colour versions. Mono has exactly two: black and white. All of it is SVG gradients: the silhouette and the stroke paths never change, only which gradient the stroke references — the moving version animates the gradient, never the shape. One gradient at a time; gradients only on colour versions. The positive (white disc, deep coral, the original direction) belongs on paper; everyday digital is always the ocean badge. Mono has exactly two: black and white.
Wordmark
The wordmark's gradient uses background-clip:text, running the same direction as the badge's (deep sea on the left → coral on the right). Clear space, letterforms and badge proportion all stay exactly as locked — a gradient wordmark is for colour occasions only; formal documents, body text and small sizes always return to the one-colour wordmark.
Motion
General rule: one kind of motion at a time; motion only ever touches transform and dashoffset and never alters a silhouette path; per-branch movement is always anchored at the joint and staggered in growth order (stem → left arm → right branch → crown and spur); prefers-reduced-motion always settles on the complete static form.
Container
The coral is centred in its container and scaled to 82%, leaving the margin; the silhouette itself never changes. The true circle is for social avatars and any round context; the squircle (rx ≈ 34) is for iOS and physical app icons.
  • No shadows, no added gradients
  • Never squash or stretch it
  • No low-contrast colour pairings
  • Do not rotate it (the sway excepted)
20px
32px
48px
76px

It moves three ways

Growth · entrance Grows from the base of the stem to the branch tips. Runs once, the first time it appears. entrance · once · 1.8s · ease-out · in growth order
Branch sway · idle The stem does not move. Every branch is anchored at its own joint with its own amplitude and phase — like water passing through coral. idle · loop · 3.2–4.4s · ease-in-out
Growth loop · loading Grows to full, rests a moment, then draws back down to the root and grows again — the same growth, on a loop. loading / AI thinking · loop · 3.6s · ease-in-out

The files

Four SVGs, and you are welcome to them: the ocean badge, a mono version for stamps and single-colour printing, the glyph alone which takes the colour of the text around it, and a squircle for app icons.

Vector

Bitmap

For anywhere that will not take an SVG — a GitHub or Slack avatar, an npm package, an app listing. The square one is full-bleed on purpose: those services crop and round it themselves, so a transparent PNG with a circle in it ends up as a circle inside a circle.