Refrakt Brand Logo — Prism Redesign

Constraints

• Equilateral triangle, pointing down
• Monochrome — white strokes/fills only, no gradients or shadows
• Single SVG, no rasters
• Must read clearly from 16px (favicon) to 200px+ (hero)
• Background is lumina dark navy (#152238)

Geometry

Both variants share the same outer triangle so they're visually comparable. ViewBox is 0 0 100 100; vertices are (10, 16), (90, 16), (50, 86) — side length 80, height 70, near-equilateral (true equilateral height for side 80 is 69.28, so we're 0.7 units off — visually indistinguishable, mathematically convenient).

The three cuts are evenly spaced along the top edge and positioned so the smaller apex triangle — the region beyond Cut 3 — has side length 80/φ ≈ 49.44 (golden ratio of the outer side). Cuts land at top-x 20.19, 30.37, 40.56. Cut endpoints fall out from the parallel-to-left-edge constraint and land exactly on the right edge.

Variant 1 — Parallel Cuts

Three lines run parallel to the left edge of the triangle, close to that edge and tightly spaced. They cut the triangle into four parts: three thin slices on the left, and one larger triangle in the top right (negative space, no fill).

Reads as ordered, structural — input on the left being progressively organised toward the right.

Construction

Cuts spaced 10.19 units apart along the top edge, positioned so the apex triangle's side is 80/φ ≈ 49.44. All four strokes share the same weight (3 in viewBox units, ≈3% of width).

Notes

• Negative-space triangle in the top-right is intentional — no fill, the prism shape carries it
• At 32px the cuts may visually merge into a thicker single stroke. Inspect the favicon-sized SVG above
• Cut count is fixed at 3 — fewer reads as a "Z" shape; more loses the "thin slices" character

Variant 2 — Filled Apex

Identical construction to Variant 1, but the top-right region — the triangle beyond the third cut — is filled solid instead of left as negative space. The three thin slices remain on the left; the right side becomes a saturated apex.

Reads as light entering through the cuts and accumulating into a brighter region on the right — same prism, with weight redistributed.

Construction

The fill triangle's vertices are exactly Cut 3's top endpoint, the outer triangle's top-right vertex, and Cut 3's bottom endpoint. The strokes bounding the filled region (top edge, right edge, Cut 3) are visually absorbed into the fill since both are white — no special handling needed.

Notes

• The thin-slice rhythm on the left is preserved, so the mark still reads as "ordered cuts" not just "triangle with corner filled"
• Mass shifts to the right, giving the mark more visual weight than V1 at the same size — useful when the logo sits next to a heavy wordmark
• At favicon scale, the fill survives even if the cuts merge; V1 risks reading as a single triangle, while V2 still has an unambiguous bright/dark asymmetry

Icon-scale preview

V2 at the sizes the mark will actually appear in operating system chrome — 16px (favicon), 24px (toolbar), 32px (app icon @1x), 48px and 64px (app icon @2x and Retina favicon). Same SVG at every size, no per-size variant. Watch for two things:

1. Cut legibility — at 16/24px, the three cut strokes render sub-pixel (3% × 16px ≈ 0.5px). Browsers anti-alias them but they go from "three lines" to "three soft edges of brightness." The mark's asymmetry survives via the fill; the linework recedes.
2. Edge crispness — the right edge of the apex fill and the outer triangle outline stay sharp at every size because they're solid boundaries, not thin strokes.

And the same icon set on the lumina light background (--rf-color-bg = #faf5eb, mark in --rf-color-text = #1d3557). Same SVG, just colors flipped — useful for sanity-checking that the mark holds up in both themes before we commit to a light-mode treatment.

A forward look at how the mark would read against the slight-warm neutral palette being considered as lumina's new default (the subject of a follow-up spec, SPEC-051). Light surface #f6f4ef, mark #1c1a17; same SVG, just the colors flipped from "branded warm" to "calm warm neutral." Inverted in the dark example below.

And the inverse — warm near-black surface #1c1a17, mark #f6f4ef. Reads as "calm office" rather than "branded dark mode," which is closer to what neutral-default dark should feel like.

If the 16px result reads as "blob with a brighter corner" rather than as a structured prism, we have two options: ship a favicon-specific variant with thicker strokes (e.g. stroke-width: 5 and dropped cuts entirely, just outline + fill), or accept that 16px is a brand impression, not a brand readout. Worth deciding once the rendered preview is in front of us.

Decision Criteria

Both variants share the same construction — V2 just adds a fill in the top-right region. Pick on visual weight:

1. Recognizability at 16–32px. V2 holds together better at the favicon end because the fill remains unambiguous even when the cut strokes merge.
2. Visual weight. V1 is all linework — lighter, more delicate, reads as a diagram. V2 has a solid mass — heavier, more present, reads as a mark. Pick to match the rest of the v1.0 visual system.
3. Wordmark pairing. V1's lighter weight balances better next to a regular-weight wordmark; V2's heavier weight pairs better with a bold or display wordmark.

Open Questions

• Stroke weight. Currently 3 in a 100-unit viewBox. Try 2.5 for finer linework and 3.5 for bolder. Especially relevant at small sizes.
• Line caps and joins. Currently round. Sharp miter joins with butt caps would emphasise the optical/geometric reading at the cost of a slightly harder feel. Worth a side-by-side.
• Wordmark. Does the v1.0 brand pair the mark with a "refrakt" wordmark? If so, does the wordmark sit beside or below the mark, and what typeface?
• Light-mode rendering. This spec covers white-on-navy only. Light-mode treatment (navy on white? navy on light grey?) is a follow-up.

Out of Scope

• Animated or interactive variants
• Wordmark typography selection
• Favicon .ico packaging, social card variants, app icon padding
• Light-mode colour treatment (deferred until dark-mode mark is locked)