The visual DNA of the 3cosystem
The hexagon mark, the "3" naming convention, and the surface wordmarks form the connective tissue of R3SET's 10-surface endorsed brand architecture — one visual language across every platform.
The "3" Convention
Every surface name follows the pattern [PREFIX]3[SUFFIX] — the "3" replaces a vowel or acts as the word's structural hinge. It is the visual thread tying the entire ecosystem together.
The "3" is always uppercase in the wordmark
The "3" renders in the surface's --l-primary color — never white, black, or any other color
Surrounding letters are white (dark bg) or #1A1A1A (light bg) — never the brand color
Sub-labels (.me, .events, EASY) use lighter weight, smaller size, muted color
New surface names must use the "3" pattern
All 11 Surface Wordmarks
Correct Rendering
// ✅ Correct — "3" in brand color
<span>
M
<span style={{ color: 'var(--l-primary)' }}>
3
</span>
ET
</span>// ❌ Never — all white kills the "3"
<span style={{ color: 'white' }}>
M3ET
</span>
// ❌ Never — brand color on letters
<span style={{ color: '#B07D10' }}>
M3ET
</span>Hexagon Mark
The hexagon is the universal ecosystem shape. It appears in favicons, loading spinners, the App Switcher grid, and pattern backgrounds. Construction rules are strict — the mark must be identical across all surfaces, varying only in fill color.
Always regular (equilateral hexagon) — flat-top orientation
Never squashed, stretched, or rotated beyond 30° increments
Filled with surface brand color (R3SET #DE0201 for parent contexts)
White "3" inside: Inter 800, centered both axes (x=50%, y≈67%)
No stroke or border on the hexagon — clean fill only
Never use an outline or hollow hexagon for the mark
All Surfaces · Multiple Sizes
SVG Construction Spec
<!-- Hexagon Mark — 40×40 canonical spec -->
<!-- Scale viewBox proportionally for all sizes -->
<svg width="40" height="40" viewBox="0 0 40 40"
aria-label="[Surface] hexagon mark">
<!-- Regular flat-top hexagon, points on 40×40 grid -->
<!-- Center (20,20), circumradius 18px -->
<polygon
points="20,2 36,11 36,29 20,38 4,29 4,11"
fill="var(--l-primary)"
<!-- No stroke. No border. Fill only. -->
/>
<!-- White "3" — Inter 800, centered x=50%, y≈67% -->
<text
x="20" y="27"
text-anchor="middle"
fill="white"
font-size="18"
font-weight="800"
font-family="Inter, sans-serif"
>3</text>
</svg>Wordmark Tiers
Three tiers govern how the wordmark is used based on context and available space. All wordmarks are typeset text (Inter 800, ALL CAPS, tracking 0) — never fixed SVG lockups.
Visual Examples — M3ET
Clear Space
Minimum clear space on all four sides equals the cap-height of the "3" character in the wordmark. Nothing — text, images, or UI elements — may enter this zone.
The cap-height is the vertical height of the uppercase "3" glyph in Inter 800 at the rendered wordmark size — approximately 72% of the em value. At 32px, this equals ~23px of clear space on all sides. Scale proportionally as the wordmark size changes.
Do / Don't
Brand misuse dilutes the identity system. These rules apply across every surface, every use case, and every format.
Always use Inter 800, ALL CAPS, letter-spacing 0
Render the "3" in --l-primary (surface brand color)
Keep surrounding letters white on dark, #1A1A1A on light
Maintain clear space equal to the cap-height of "3" on all sides
Use a regular (equilateral) hexagon for all marks
Fill the hexagon with surface brand color, no stroke or border
Rotate the hexagon beyond 30° increments
Use the "3" in any color other than the surface primary
Make surrounding letters the brand color — only "3" gets color
Squash or stretch the hexagon
Add stroke or border to the hexagon shape
Use a different font for wordmarks (non-Inter, non-800)
Visual Misuse Examples
Favicon Specs
Each surface gets its own set of favicons using its brand color fill. The hexagon mark construction rules apply at all sizes — no additional decoration or variation.
Every surface exports its own favicon set at all 5 sizes, using its unique brand color as the hexagon fill. The white "3" inside remains constant. Browser theme-color meta and og:image should also match the surface primary.
Downloads
Brand assets will be available as SVG, PNG, and Figma source files. Each surface gets its own asset kit.