Brand System

The living identity of Interface.

Why This Looks The Way It Does

There's an old idea - older than branding, older than design - that identity isn't a thing you have. It's a thing that happens. The Greeks called it metamorphosis. Not change as an event, but change as a state of being. The caterpillar doesn't become the butterfly. The becoming is the organism.

We kept coming back to that when we were trying to figure out what Interface should look like. The easy answer was a logo, a color, a typeface. But that felt dishonest. Interface isn't a static thing. At its core it is a space for human exchange - a place where ideas find each other, where culture gets made through the act of gathering. The radio, the cafe, the gallery, the label - these are surfaces. The thing underneath all of them is the same: people, in proximity, changing each other. To give something like that a fixed face felt like pinning a river to a wall.

What we needed wasn't an identity. It was a system capable of producing identity - endlessly, recognizably, without repeating itself.

That led us to cellular automata. In the 1980s, Stephen Wolfram spent years studying systems where a row of cells - each one either on or off - evolves according to a single rule. Each cell looks at itself and its two neighbors, and the rule determines what happens next. From that absurdly simple premise, structure emerges. Complexity emerges. Some rules produce chaos. Some produce order. The most interesting ones produce both - patterns that are structured enough to feel intentional but unpredictable enough to feel alive.

That resonated with us on a level we didn't expect. Because that's exactly what happens when you put people in a room with music. Each person is a cell. The music is the rule. And what emerges - the conversation, the energy, the community - is something no one designed. It's an emergent property of simple interactions operating within a shared structure.

There is a second resonance here that we did not expect but could not ignore. We are living through a moment when artificial intelligence is fundamentally changing how culture is made, how ideas travel, and how creative work gets produced. Interface was built by people who are close to that shift - who understand it technically and believe in it philosophically. The system you are looking at right now is not just a generative background. It is a position: that technology, at its best, is not something that happens to culture. It is how culture happens.

The pattern is the culture. The rule is the space. Interface is where they meet.

So we built the entire visual identity on that principle. The background you see on this site is a cellular automaton - generated fresh every time you load the page from a random seed and a set of rules that shift as the pattern evolves. The logo isn't one logo. The separator between i and f cycles through dozens of typographic characters - each one a different punctuation mark, a different way of expressing the connection between two letters, between two ideas, between the individual and the collective.

There's a layer of meaning in the separator itself. The base form is i/f - a forward slash, the simplest possible division between two things. It reads like a path, a choice, a ratio. But as the separator cycles, the relationship between i and f shifts with it.

i+f is additive. The individual and the collective, combined. i=f is equivalence. You are the platform, the platform is you. i:f is a ratio, a proportion, a dialogue. i|f is a boundary, clean and defined. i~f is approximation, something fluid and not quite settled. i*f is multiplication, amplification, one thing making the other bigger. i&f is conjunction, two things that belong together. i?f is a question, an invitation, an open door.

Each separator is a different philosophy of connection. The logo doesn't just change aesthetically. It changes semantically. And none of them are wrong, because the relationship between the individual and the platform is all of those things at different moments.

This isn't generative design as an aesthetic choice. It's generative design as a philosophical position. We believe that the most honest representation of a living community is a living identity - one that follows rules but isn't determined by them. One that's consistent enough to be recognized but fluid enough to surprise you.

There's a deeper point here about what brands are in the first place. A traditional brand is a promise of sameness - you see the mark, you know what you're getting. But Interface isn't promising sameness. It's promising a kind of structured openness. The same underlying logic, rendered differently every time. The same commitment to sound, culture, and community - expressed through whatever medium, surface, or moment you encounter it in.

A fixed logo would always feel incomplete. A generative system feels like the thing itself.

When this system appears on a vinyl sleeve, it will be one pattern - frozen in time, unique to that release. On a tote bag, another. On a neon sign above the cafe, the static monogram i/f anchors the space while the digital surfaces around it breathe and shift. The system is designed to stretch across every medium without breaking, because it was never rigid to begin with.

What follows below is the technical anatomy of that system - the logo, the color logic, the typography, the generative engine. But we wanted to start here, with the why. Because the tools only make sense if you understand what they're in service of: the idea that identity, like music, like community, like culture itself, is not a fixed point. It's a process. And the most beautiful things happen at the interface.

Interactive Controls

This site is a living design tool. Everything you see can be changed in real time using keyboard shortcuts. Here's what you can do:

Keys What it does Options
z Cycle brand color Vermillion, Amber, Teal, Periwinkle, Jade, Rust, Deep Teal
19 Switch logo font JetBrains Mono, Space Mono, IBM Plex, Fira Code, Source Code Pro, Roboto Mono, Ubuntu Mono, Inconsolata, Overpass Mono
q w e r t y u i o Switch tagline font Inter, DM Sans, Work Sans, Libre Baskerville, Playfair Display, Cormorant Garamond, Sora, Space Grotesk, JetBrains Mono
a s d f g Switch streak animation Snake, Multi-snake, Rain, Lightning, Row sweep
j Turn off animation -
v Cycle logo transition style Fade, Slide Up, Slide Down, Scale Pop, Spin, Blur, Flip X, Flip Y, Glitch, Instant
c Cycle CA render mode Squares, One Glyph, All Glyphs
b Cycle CA background treatment Default, pulse, flash, contrast, bold, bands, whisper, quiet center, letterbox, scanlines, side rails, soft focus
- + Animation speed 50%, 75%, 100%, 110%, 125%
[ ] CA background opacity 2% – 60% in steps of 4%
, . Streak animation opacity 0% – 100% in steps of 10%
p Cycle hero title style Accent, Plain, Slash split, Prefix, Weight contrast, Wide caps, Dot, Underline face, Brackets, Mark
x Toggle live HUD Shows current settings overlay

On the home page, you can also click individual letters of the hero title to trigger specific animations. Hovering over them swaps each letter for a random separator character.

Logo Geometry

Construction grid, proportions, and clear space rules for the static monogram.

012345678
012345678
i/f
1.2x
cap height
cap
base
8x
8x
1x clear
ElementProportion
Grid8 x 8 units
Clear space1x unit on all sides
Separator box width1.2x cap height
Separator box height= cap height + 4% overshoot
Separator padding0.08em horizontal
Letter spacing i-sep0.12em
Letter spacing sep-f0.08em
Box corner radius0 (sharp)

Color System

Typography

Generative System