Most themes document customization as a list of variables you may set. That tells you what is editable and nothing about what to edit. This file documents it the other way round: pick the axis you want to move along, and change the two or three tokens that carry the move.
The axes are the four from the creative direction framework, and they are the same four annotated throughout tokens/tokens.css. Where this theme currently sits:
| Axis | Position |
|---|---|
| Tone register | Conversational |
| Aesthetic philosophy | Polished Standard |
| Audience relationship | Peer |
| Sensory ambition | Considered |
Every move below is an edit to tokens/tokens.css only. Nothing else in the repo holds a value.
One rule keeps these moves clean: change tokens on the axis you are moving, and leave the others alone. Reaching for the accent while you are doing a tone move is how a theme ends up at no position at all.
One rule is specific to this register: any move that touches the ground or the surface alphas has to be re-verified.
node verify/contrast.jsEvery ink ratio in this theme is derived from --gl-ground-peak, which is itself derived from the orb colors and --gl-orb-alpha. Move either and the whole table moves with it. The script recomputes the ceiling from the values actually in the file and fails when a comment no longer matches. It is the difference between customizing this theme and breaking it in a way nobody notices until a user complains about a screen you have never seen.
The theme currently reads as depth that was built rather than switched on: one glow, three orbs held low, a blur that softens without dissolving. This move spends more of the budget on atmosphere. It is the move to make when the feeling is part of what you are selling, which for this register usually means a launch page, a product whose subject is ambient or spatial, or anything where the reader is meant to leave with an impression rather than a fact.
Four tokens carry it, and the fourth is the one people forget.
- --gl-blur-1: 12px;
- --gl-blur-2: 20px;
- --gl-blur-3: 32px;
+ --gl-blur-1: 18px;
+ --gl-blur-2: 32px;
+ --gl-blur-3: 56px;Deeper defocus reads as more air between the surface and what is behind it. Keep the ratios roughly as they are: the three tiers only work as distances if the steps between them stay proportional, and a set like 18, 20, 56 reads as two tiers and a mistake.
There is a practical ceiling around 60px. Past it the backdrop is averaged so thoroughly that the ground's structure is gone, and you are back to a flat tint that costs a compositing layer per surface.
- --gl-orb-alpha: 0.24;
- --gl-ground-peak: #3d439b;
+ --gl-orb-alpha: 0.28;
+ --gl-ground-peak: #4349a7;Brighter light sources, and a ground that carries more color into every panel above it.
The second line is not optional and it is not decorative. --gl-ground-peak is the computed ceiling of the ground, and every ratio in the file is measured against it. Raising the orb alpha without recomputing it leaves the theme asserting contrast it no longer has. The value above is what the arithmetic in tokens.css produces at 0.28; verify/contrast.js will confirm it, or tell you that you have gone too far.
At this setting ink lands at 5.27:1 on a tier-2 surface and the muted ink needs to move with it, which is the next token.
- --gl-ink-muted: #d5dbe8; /* 4.71:1 at the old ceiling */
+ --gl-ink-muted: #dde2ed; /* 4.59:1 at the new one */This is the cost, and it is worth being explicit about it. A brighter ground eats the gap between the two inks. There was never much of one, because a translucent surface spends the contrast budget an opaque theme spends on typographic hierarchy, and at Resonant there is less still. Budget a pass over anything that was relying on the muted ink to look secondary, and move that work into weight and size instead.
- --gl-glow: rgba(142, 230, 255, 0.18);
- --gl-shadow-glow: 0 0 48px var(--gl-glow);
+ --gl-glow: rgba(142, 230, 255, 0.3);
+ --gl-shadow-glow: 0 0 96px var(--gl-glow);The glow is the token most likely to be raised first and the one that should be raised last. At Considered it is scoped to one call site, the featured card, and reads as a light source behind a pane. Doubled in radius and raised in alpha it becomes atmosphere the whole page sits in.
Keep the call sites at one. A glow on three surfaces does not read as three light sources; it reads as a filter applied to a screenshot.
The page keeps every mechanic that makes it this register. The tiers still rise in blur and alpha together, the edges are still doing the structural work, the scrim still bounds anything over content. What changes is how much of the reader's attention the depth is asking for. At Considered the surfaces are furniture; at Resonant the light is the subject and the surfaces are what the light is happening to.
They cannot move the copy. "Pane puts the eight numbers your team actually runs on somewhere you can see" is a Considered sentence: informative, level, unhurried. On a Resonant page it will sit oddly, because the sensory axis runs through what the page is claiming as well as through how it looks. Budget a copy pass alongside this move.
They also cannot make the demo's composition right. Orb placement is in depth.css rather than in the tokens, and at higher alpha the three cores need more space between them or the overlaps go muddy. Move them apart as you turn them up.
The destination is the institutional end of the tone axis: measured cadence, precise vocabulary, the brand kept off-stage. It is the move for security software, infrastructure sold to a procurement committee, or anything where warmth reads as inexperience.
The tokens that carry it:
--gl-primary, from#6d7cffto something deeper in the same hue family. The bright periwinkle is the loudest thing on a page of this theme and it reads as approachable. Note that dropping it changes which ink it takes: at the current brightness the button needs dark ink, and a deep primary will want white. Both pairings have to clear 4.5:1, andverify/contrast.jschecks whichever one you declare.--gl-radius,12pxdown to8px. That is a relationship-axis token being borrowed for a tone move, which is usually a mistake; it works here because Professional and Peer sit comfortably together and the softer corner is most of what reads as conversational.--gl-saturate,1.6down to about1.2. The saturation lift behind the blur is what keeps a blurred orb reading as colored light. Turning it down leaves the depth intact and takes the color temperature out of it, which is the tone move rather than the sensory one.
Work out for yourself what happens to --gl-orb-violet. There is a version of this move that retires the warm orb entirely and runs the ground on indigo and teal alone, and a version that keeps it. One of them is a tone move and the other has quietly become a sensory move; deciding which is which will teach you more about the axes than reading about them.
Companion sits beside the reader rather than across from them. It is the right move for consumer software, onboarding, anything where the reader arrives uncertain.
The tokens that carry it:
--gl-radius,12pxup to16px, and--gl-radius-lgup to28px. Radius is the relationship axis's most direct instrument. Keep the proportion between the two: this theme scales radius with surface size on purpose, and flattening them to one value is what makes a large panel look like a large button.--gl-ink-muted, closer to--gl-ink. Companion does not whisper the secondary copy. Contrast improves, so this one is free.--gl-text-leadand--gl-leading-body, both up a step. Companion reads slower on purpose.
The trap in this move is the same one every soft register has. Push --gl-radius-lg past 32px and you have not reached Companion; you have reached a children's product, which is a tone-register failure wearing a relationship-axis costume.
Worth naming because the neobrutalism sibling has exactly this move and it does not exist here.
There, the play layer could be deleted and left a quieter version of the same register behind, which is a real move along the sensory axis from Considered toward Functional. Here, components/depth.css and assets/ are separable in the same mechanical sense, and nothing outside them refers to them, so deleting them breaks no rule and throws no error.
It does not produce a quieter glassmorphism. It produces gray boxes with light borders, because glass is the one material whose entire appearance is a function of what is behind it. Take the ground away and the surfaces are not restrained, they are unfinished.
If you want this register at Functional, the move is not a deletion. It is the prefers-reduced-transparency branch that tokens.css already ships, promoted from a media query to the default: solid surfaces, no blur, no orbs, and the three tiers surviving as three opaque values in the same order. That branch was built for readers who ask the operating system for it, and it works just as well as a deliberate position. Ink improves to 13.35:1 at tier 2 on the way.
If a move needs a value the theme does not have, add it to tokens/tokens.css in the group whose axis it serves, with a comment saying what it is for. Then reference it from theme.css and preset.js so both Tailwind versions see it. Those two files hold no values, only references, and keeping it that way is what makes the next move a three-line diff.
If the new token is a color that text will sit on, add a check for it to verify/contrast.js in the same commit. The script is the only reason the ratios in this file can be trusted, and a token it does not know about is a ratio nobody is checking.