SuperLoops
SuperLoops is one operator and one mark. The rules below keep the mark readable across surfaces — light web, social, print — and keep the wordmark honest about what it does. The site is single-theme (true neutral light); the only "dark" surface is the mono ink mark, used for print + low-fidelity contexts. If you're republishing the brand anywhere, these are the constraints that matter.
The mark is the ⌘ command symbol— four corner loops joined by two crossing strokes, set on the brand-blue badge. It reads as “execute,” “control,” “operating system”: the exact positioning the site builds toward (see /about — “the brand is the operating system”). It's a symbol people already recognize, so the wordmark does the recall work and the symbol does the framing.
The ⌘ itself is drawn as one closed path — a single ~9KB Bezier curve where the strokes visibly terminate intothe loops, so the mark reads as one continuous shape, not as four separate circles. The path sits on a 22%-radius squircle (a rounded square whose corner radius is 22% of its side length — so a 24px mark has a 5.3px radius, a 512px mark has a 113px radius, and the proportion holds at any export size). The glyph occupies 62% of the badge and is centered. Don't crop, don't stretch, don't outline it. If the badge scales, the radius scales with it.
The choice wasn't automatic. Two obvious options were rejected early: a sparkle (the default “AI” glyph on every SaaS landing page right now — it says nothing except “we use AI”) and a sunburst/orbit mark (reads as “automation,” but not as anyone's automation). ⌘ already carries meaning for the exact audience SuperLoops sells to — anyone who lives in a terminal or a keyboard shortcut reads “execute,” “control,” “modifier key” without being told. It does the positioning work a tagline would otherwise have to do, and it survives every export size because it's geometry, not illustration.
The four loops aren't decoration. Each one is a workflow; the two crossing strokes are the operator's hand on all four at once. That's the brand promise compressed into one glyph: automate the loop, but a person still closes the gate on the call that matters — “operated, not just built.”
The mark without the wordmark. Use this where the name is already adjacent — favicons, app icons, social avatars, the corner of a slide deck. Never use the symbol alone in cold reach (a tweet, a link in bio, a Slack message to someone who hasn't heard of you): the wordmark is doing the recall work.
Three approved marks, one geometry. Full color (brand-blue badge) is the live default — its glyph stays white in every surface, same as the wordmark. Ink (#1f1e1d badge, fixed white glyph) is for mono and print, or anywhere blue would clash. Reversed (glyph only, no badge, fixed white) goes on ink surfaces, photography, or the blue itself. Never recolor the glyph outside this rule, never tint the badge to a non-brand color, never outline or gradient-fill it.
The brand is intentionally small. White, near-black, and SuperLoops Blue carry every surface. A second, lightened blue (#335cff) handles the dark theme — that's it. Don't introduce new accent colors, don't add gradients, don't pick a secondary highlight. If a UI needs more color than this, the UI is the problem.
The default surface. Off-white, not pure white — gives hairlines something to land on.
Same as background, deliberately — elevation comes from the hairline border, not a background shift.
Near-black with a cool 240° cast. Passes 4.5:1 on background and panel.
SuperLoops Blue — light uses #0033ff, dark uses #335cff (lightened so the blue stays AA-readable on the near-black surface).
Same cool cast as ink. Avoids the warm-black default.
Lifted from dark surface. Used for slabs and accent panels in dark mode.
Two typefaces, intentionally. Fraunces for display — the editorial serif that gives the brand its voice. Instrument Sans for body and UI — the humanist sans that keeps dense content readable. No monospace, no display-sans headlines, no decorative faces. The system is the brand.
The mark is a fixed asset. Don't redraw it, don't retouch it, don't restyle it to fit a layout. Use the approved SVG exports on disk and respect their proportions.
Always axis-aligned. Rotation breaks the geometric precision that gives the mark its presence.
Width and height must scale 1:1. Stretching the squircle or the glyph ruins the silhouette.
Strokes and rings compete with the glyph's own linework. The flat fill is the mark.
Badge is SuperLoops Blue (#0033ff) or ink (#1f1e1d) only; the live glyph is white in both themes — never gray, gradient, or pattern.
No drop shadows, no glow, no bevel, no glassmorphism. Flat on flat.
Don't substitute typefaces, change letter spacing, or mix in caps/small-caps. Fraunces Bold (700), locked.
// terminal motifs. Slash-comments and code-block styling read as the earlier Operator system, which is gone.Approved exports in public/brand/. Use the SVG sources for any scaling work; the PNG variants are for fixed-size contexts (favicon, app icon, OG image, social avatars).
Three SVGs, the full favicon ladder (16 through 1024), the light and dark lockups, the circle-crop QA proof, and this page saved as offline HTML. No email gate, no marketing form — just the assets.
