Solutions · Brand Identity
Muzi Studio brand identity
We’d spent ten years building brands for other people, and the last one we did was our own. The 2016 version was true red on yellow, back when we only did graphic design. Later we added websites and technical architecture, and the identity grew a gradient to match. The 2026 round marks our tenth year.
This project sits in our Brand Identity line. What would the same method look like on your project?
TypeBrand identity · Design systemYears2016–2026 (three generations)RoleStrategy · Naming · Identity · Design system · WebsiteScope3 generations · 4 extensions · 9 gradient stops · 33 token blocksStatusIn use
The cover is a v10 light field, and this one only appears here.
01
/09
ORIGIN
Where it started
In 2016 the studio was called MuziCreative, Muzi Creative Office in Chinese, and it only did graphic design. That identity was true red on yellow, and the mark was a hexagon sitting where the dot of the i would be.
By 2020 the business had grown into websites and technical architecture, and the identity got another pass. The background went white, the dot split into four colors, and for the first time there was a gradient, violet to turquoise. The same round added four offshoots: Creative, Library, Insight and Shop.
From left: in 2016, when we only did print, the mark was a single block of solid color. The 2020 gradient band is cropped from the original files: two stops, with the renderer filling in the middle. Four offshoots, four colors, each one simply drawn on its own.
The name came before any design decision
The parents’ names happened to contain the characters for forest and grove, so naming their child Muzi, written with the character for tree, came naturally. Put the three side by side and you’re counting trees.
ForestThree treesGroveTwo treesTreeOne tree
The angle of the tree
The horizontal and the two diagonal strokes of the tree character fall on one set of 60° axes, and 60° is the angle of a hexagon.
That’s why the mark is a hexagon. It can repeat forever without gaps. And the shape was already in the name before 2016.
In the 2016 version the hexagon was already sitting on the i, replacing its dot.
02
/09
THE TURN
The turning point
The first two generations were about color. This one is about light.
Two changes, each with its own trigger
Both times, the business changed first and the identity followed.
2016MuziCreative (Muzi Creative Office)Graphic design studio2020MuziCreativeAdded web services and technical architecture2026Muzi StudioMore technology and AI; the parent brand needs room to extend
By 2026 this was no longer just a design studio. Technology was a bigger share of the work every year, and AI was opening up a lot of new possibilities. Muzi needed a parent brand that could keep extending outward.
Looking for the new, but deciding first what stays
The colors kept changing because what we delivered kept changing: paper, then screens, then light.
iWhere the dot sits60°The hexagon’s angle#6400DEViolet, the same value as in 2020 (unchanged)
Three things stayed: where the dot sits, the 60° angle, and the violet. The 2026 #6400DE is identical to the 2020 one, down to the last bit.
03
/09
DERIVATION
Construction
This round is the first time in ten years we changed the typeface.
Built up one step at a time
Every proportion comes from a token. This is the construction redrawn from the current geometry, not a sketch from the original process.
The wordmark uses a dotless i. The dot is the only part of the word you can swap out and still read it, so that’s where the mark goes.
ItemValueHexagon flat width1.20 × stem widthDistance from the x-height0.50 × stem widthWordmark tracking+1.5%Descriptor0.70 × x-height · 0.1em · 500Optical spacing490.6 units
The most economical of the three
Only three regular polygons can tile a plane with no gaps. For the same area, the hexagon uses the least edge. For that to hold, the corners can’t be rounded. In our tests a 6% corner radius left a white pinhole at every vertex, and 12% gave obvious starbursts.
Everything is measured in stem widths
The dot is 1.2 times the stem width and sits half a stem above the x-height line. Change the weight and it changes with it.
Clear space is one x-height and is already built into the file. The lockup’s minimum size is 140px on screen and 24mm in print. Smaller than that, use the wordmark alone.
On paper the mark is violet, on a dark interface it’s bright violet, and on light it’s white. Three backgrounds, one rule: top-left corner only, and no wider than 6% of the frame.
More refined, and you can measure it
The same gradient went from two stops to nine. When we changed the endpoints, the stretch where white text could safely sit got shorter. Adjusting the lightness curve later didn’t just win it back. It ended up longer than in the previous generation.
ParameterValueInterpolation spaceoklchLightness curvet^1.5Midrange chroma+0.03Hue pathshort_arcStops9
PositionColor0.0%#6400DE12.5%#5324E525.0%#3E3CE937.5%#1A51EB50.0%#0064E862.5%#0076E275.0%#0087D987.5%#0095CF100.0%#00A1C5
Ten years, three generations, and the dot never moved
The colors, typefaces and media changed. In ten years, the hexagon’s position and shape didn’t move once.
04
/09
THE SYSTEM
The system
What we delivered this round is a rule. When the next business line comes along, nothing has to be redone.
What we deliver is a rule
Whatever name comes after it, you can work out a valid lockup. Seven constants, one variable and four don’ts, all computed by a generator.
Try a name that doesn’t exist yet. We can’t say yet what new businesses AI will lead to, so the rule has to be ready first.
Constant7The wordmark outline (muzı as a path)— never redrawnHexagon shape, orientation (pointy-top) and sharp cornersHexagon size relative to the stem (1.20× / 0.50×)Wordmark tracking +1.5%Four descriptor settings (0.70× / 0.10em / shared baseline / 500)Optical spacing 490.6 unitsViolet appears only in the hexagon, the single color event on the whole siteVariable1The slot word itself (studio / labs / …)— any length; the optical spacing absorbs itNever4Set the slot word in lowercaseGive the slot word its own color (use color twice and the hexagon is no longer the only mark)Change the wordmark, hexagon or proportions for an offshootAdd a second brand color for an offshoot
Chinese never appears on its own
The wordmark leads in English. Chinese and Japanese go on a smaller second line, with a gap between the two lines.
The studio’s Chinese name, which literally reads “Muzi Studio,” is tracked out to the same width as “muzi.” The Japanese name is Muzi Kobo, “Muzi workshop,” and the parent brand is simply Muzi.
Parent brand and studio
Muzi is the company, and muzi studio is one business line under it. The parent brand uses only paper and ink, with violet only on the dot and a nine-stop gradient bar along the top edge. The studio doesn’t draw that bar. Its color is in the light.
One color, two states. Left: the parent brand’s gradient bar, as thick as the wordmark’s stem and kept inside the text margins. Right: the back of a studio business card, with a white mark on the light in the top-left corner.
Color only comes from light
Surfaces get one neutral scale, seven steps from paper to ink. Every other color is sampled from the light: three points, violet, blue and cyan. Text on light comes in just three grays. The color order for data visualization comes from the same gradient.
paper#FAFAFD16.7:1mist#DFDFE313.1:1steel#4D4D508.1:1ink#1A1A1D16.7:1field#0E0E11Light-field shadowgradient9 stopsoklchviolet#6400DE0%blue#0064E850%cyan#00A1C5100%text#FFFFFF · 19.27:1text-muted#9D9D9F · 7.12:1text-subtle#7A7A7D · 4.5:1
Type, components and icons
Eight type sizes and not one more. Outfit is only for the wordmark. Body text and headings are always IBM Plex. The icons all follow one construction method instead of being drawn one by one.
display-1 · 76/1.02muzi studiodisplay-2 · 40/1.14Light falls in from one sidetitle · 24/1.32The hexagon sits on the i as its dotlead · 21/1.58The first two generations were about color. This one is about light.body · 17/1.75Each light field is used once, and its number goes in the caption.small · 15/1.65The start point hasn’t moved a single bit. The end point is derived.caption · 13/1.6SEED 4471 · Light from top right · Hue 231°label · 11.5/1.9PAPER · FIELD · 1/1
Start a projectStart a projectStart a projectStart a projectStart a projectdefaulthoverfocus-visibleactivedisabledCompany nameMuzi StudioEmailmuzi@Incomplete addressBrand IdentityWebsiteSEED 4471231°Median hueFIELD · 1/189.8%Dark-area share
arrow-rightarrow-leftarrow-uparrow-downchevron-rightchevron-downcloseaddminuscheckcopydownloadexternallinkmenusearchmailplaypausealertinfo
05
/09
ALIVE
A living identity
In this round, every light field is used only once, and its number is written in the caption. The rules stay put, and every image they produce comes out different.
One subject, nothing else
The danger with anything that grows is that people stop recognizing it. So half of it is fixed on purpose: the dot, the type, the palette, the icons, the component states. The other half we leave to the light.
Light fields go on screens, spaces, covers and merch. Paper texture goes on anything meant to be read start to finish. Every piece belongs to one side only.
Light, a dark field, grain, a gradient washing over the whole frame, 60°.
What we said no to
Eight candidate directions we turned down. Top row: two with a centered hexagon, a business card with a cut corner, light filling the letters. Bottom row: big type on black, giant chapter numbers, vertical text, a fraction as the hero.
The mark is an accent, so every direction that put the hexagon dead center was out.
Large type doesn’t get baked into images, because text has to stay selectable and translatable. That’s why light inside the letters, big type on black and the fraction as hero were all cut.
The cut-corner card belonged to the tactile-object direction. Vertical text and giant chapter numbers belonged to the editorial direction. We didn’t go with either one.
Each one appears only once
A single sheet of gradient light washes in from outside the frame. The dark areas are empty and the grain is almost tactile. There’s no shape in it, so it can be cropped anywhere without breaking.
Six images grown from the same rules. Each piece of collateral claims one, the ledger records it, and that image is never handed out again.
How the light is made
A seed decides which edge the light comes in from, how much it covers, whether it leans violet or cyan and how fast it fades. The same seed always grows the same image. A different seed gives you a different one.
01SeedEach image has its own number, and the same seed always rebuilds the same image02SampleWhich edge the light enters from, how much it covers, how it fades, how coarse the grain is
03ModelA fixed style passage plus this run’s variation04ContractMeasured on 12 axes, and anything clearly out of bounds is stopped
05Human eyeIs the shape right? Nothing goes on the allowlist until someone has looked06LedgerEvery claimed image gets an entry and is never reused
Measure it before anything else
Hue and the share of dark area are the brand’s signature, so their bounds are tight. Where the light sits and how big it is get loose bounds. Anything out of bounds is simply drawn again.
Median hue202 – 252SignatureDark-area share0.668 – 0.933SignatureHue span46 – 66SignatureMedian chroma0.414 – 0.762FreeGrain energy0.0003 – 0.0006FreeBright-area spread0.312 – 0.767FreeEdge energy0.0011 – 0.0028FreePeak lightness0.160 – 0.426FreeBright centroid x0.320 – 0.849FreeBright-area count1.000 – 2.000FreeAverage lightness0.033 – 0.095FreeBright centroid y0.163 – 0.818Free
Then a person looks again
The contract can’t measure “this looks like an object.” Beams, orbs, text appearing inside the image: each was caught by a person looking. Only images someone has reviewed go on the allowlist, and there are 45 on it now.
26 imagesSamples used to set the contract0.111Composition distance of the closest pair1.387Median pairwise distance
Beams
Orbs
Auroras and waves
Text in the image
One light
Wherever the light is, the type goes on the other side, and body text gets darker the farther it is from the light. Every piece is numbered in a corner: seed, where the light comes from, hue, 1/1.
One light, two versions
The left one is for collateral. The right one is for the website: the whole image is darkened, the light sits buried in the dark, and the bright parts actually come out more saturated. Every background on muzi.tw uses the right-hand version.
Three lanes running at the same time
The subject is what separates them. One lane shoots materials, one shoots structures, one shoots only light. All three follow the same rules and handle different things.
06
/09
IN USE
Out in different places
One set of rules, eight settings. Every piece has its own light behind it, used once.
The flat artwork was laid out by code, every pixel coming from the vector source files. The scenes are blank photos generated by a model. The model never drew the mark, not once.
That’s the muzi.tw homepage on the screen.
Left: three pages on a phone, Services, Work and About. Right: a presentation title slide on a meeting-room screen.
Every poster and lightbox claims a light of its own.
What an event needs
The booth backdrop and the roll-up banner each get a light that’s used nowhere else. The booth is a proposal render. Muzi doesn’t have a physical location right now.
Merch
Merch doesn’t need to carry information, so it always uses light fields. Each item claims its own light that’s used only once, and what’s printed on it is that light’s 1/1.
Tote bag, notebook and stickers. Silk scarf. Acrylic light block.
Desk mat. Set of three coasters. Set of three postcards.
Metal bookmark. Framed giclée print, an edition of one.
07
/09
MOTION
In motion
In motion, only the light moves. The mark and the type stay put.
The intro. From black, light rises from the edge and washes across the frame. The mark appears in the top left, then the wordmark. This is the only time the dot moves. It doesn’t spin, loop or blink.
Left: the light field drifting slowly. It’s sped up to a seven-second loop here. The rule is 18 to 30 seconds, with no visible seam. Right: between sections the screen drops back to ink, then the next light comes up.
Four transition speeds
StepDurationUsed forInstant0msState changes: checking, focusFast120msButtons, tagsStandard240msPanels, drawersSlow400msPage changes, the dot settlingNever> 600msPeople start waiting for it
08
/09
AFTER HANDOFF
After handoff
Along with the guidelines, we handed over checks that run every day on their own.
Three checks that can stop you
01Identityverify_muzi_identity.py41 assets9 constantsNo font dependenciesPassed02Layoutverify_muzi_case.pyEight type sizesOne left edgeOne style of section head9 acts, 30 sectionsPassed03Renderverify_case_render.pyImages actually loadNothing squashedNo sideways overflowNo blank bands in the columnEnough contrastCaptions stay with their imagesPassed
The second one has run on this very page. What it caught was the page inventing a ninth type size, the kind of mistake that just looks like “this line seems a bit big.”
Thirty-three blocks, one contract
Wordmark, geometry, color, light, type sizes, spacing, states, layout, motion and craft all live in one JSON file. The pages read it, and so does the generator.
muzi-tokens.json33 blockstypeface / metricsType family, stem width, x-height, cap heightwordmark / mark / lockupDotless i, hexagon proportions, optical spacingcolor / gradient / neutralsThe one color event, nine stops, seven neutralslight / web_gradeColors sampled from the light, the muted website gradebilingual / parentChinese and Japanese second line, the parent brand’s gradient barmotionFour speeds; only the light movestype / space / layoutEight type sizes, nine spacing steps, text columnextensionSeven constants, one variable, four don’tscraftSix craft details you can see
Left: the brand guidelines, 81 pages, with the HTML and PDF built from one source. Right: a section of the tokens.
"mark": {
"shape": "hexagon", "orientation": "pointy-top",
"corner_radius_ratio": 0.0,
"tittle": { "flat_width_over_stem": 1.2,
"gap_above_x_height_over_stem": 0.5 }
},
"gradient": { "from": "#6400DE", "to": "#00A1C5", "stops": 9 }09
/09
THE OUTCOME
Deliverables and results
What we delivered
Wordmark and mark41 assets: horizontal, small-size, reversed, single-color, Chinese/Japanese bilingual, and the muzi parent brandDesign tokens33 blocks in one JSON file. The pages read it, and so does the generatorExtension rules and generatorSeven constants, one variable, four don’ts. Give it any suffix and it works out a valid lockupNine-stop gradient and surface paletteOne seven-step neutral scale, with every other color sampled from the light. The safe zone for white text computes to 61%Icon construction methodStroke width, terminals, corners and grid are all set as rules. Today’s 11 icons are the first batch, and any number of new ones can be drawn the same wayThe entire muzi.tw siteEvery page runs on the same tokens, and the wordmark and icons are generated
ResultsThe rules are running now. Every page on muzi.tw uses the same tokens, and the wordmark, palette and icons are all generated, not pulled as old files from a folder.Still working on itVenture and Institute are still just names. The rules can handle them, but we don’t yet know what those two lines will charge for or who they’ll serve.
We’re a brand design studio, and figuring out how to build our own brand turned out to be the hard part.
Credits
Design & BuildMuzi StudioClientOur own projectYears2016–2026SolutionBrand Identity: strategy, identity, design systemDeliverablesWordmark and mark · design tokens · extension rules and generator · gradient and palette · service icons