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 | Provocative |
| Aesthetic philosophy | Expressive Maximalist |
| Audience relationship | Peer |
| Sensory ambition | Functional |
Every move below is an edit to tokens/tokens.css only. Nothing else in the repo changes, because 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 type scale while you are doing a relationship move is how a theme ends up at no position at all.
This is the move from raw toward composed, and it is the one worth working through in full, because it is the move people arrive here wanting. The structure stays exactly where it is. Every rule the page draws, it keeps drawing. What changes is how hard each of them lands.
Four tokens carry it, each softened by two steps on its own scale.
- --bw-radius: 0;
+ --bw-radius: 8px;Zero to four is one step and reads as a rendering artifact rather than a decision. Zero to eight is two, and it is the single edit that moves the theme furthest. Corners are the first thing a reader reads as an attitude toward them, which is why the token sits on the relationship axis in tokens.css and still does most of the work here.
- --bw-rule: 2px;
- --bw-rule-heavy: 6px;
+ --bw-rule: 1px;
+ --bw-rule-heavy: 2px;Six pixels is a structural claim. Two is a border. Dropping the working weight to one takes the rules out of the foreground entirely and leaves them doing the job most design systems ask of a border, which is to be found when looked for. The card that used to claim the screen with a heavy frame now needs another way to claim it, and there is not one in this theme. That is a real consequence and section four covers it.
- --bw-text-mega: clamp(3rem, 13vw, 7.5rem);
- --bw-text-display: clamp(2.25rem, 7vw, 4.5rem);
+ --bw-text-mega: clamp(2.5rem, 7vw, 4rem);
+ --bw-text-display: clamp(2rem, 4.5vw, 3rem);A 120px headline is architecture. A 64px headline is a headline. Both the ceiling and the growth rate come down, because lowering the ceiling alone leaves the type still lunging toward it on a mid-sized screen.
- --bw-measure: 78ch;
+ --bw-measure: 66ch;The long measure is a refusal to make reading comfortable. Sixty-six characters is the comfortable value, and taking it means the page has stopped making that particular argument.
The page keeps its bones. Rules still divide the bands, the table still draws every cell edge, the grid is still drawn rather than implied, the ticker still runs. What goes is the sense that the page is refusing you something. Read the hero after the change and it sounds like a status page from a company that is sorry, rather than one that is telling you.
They cannot move the copy. "Two things are broken" is a Provocative sentence and it will sit oddly on a composed page no matter what the tokens say. Neither can they supply what a composed register needs and this one never had: an elevation model. Once the heavy rule is gone there is no mechanism left for saying one block outranks another, because this theme ships no shadow token to reach for. You will be adding one, which is the point at which you have left the register rather than tuned it. See "Adding a token" below.
It is not the road to the neobrutalism sibling, and it is worth being exact about why, because the two look adjacent from here. Softening these four tokens gets you a composed page. It does not get you the sibling, whose register is built from offset shadows with zero blur, saturated flat fills, tilt, stickers and a press gesture that travels by the shadow offset. None of that is in this file to soften. That vocabulary belongs to that repo, and arriving at it means adopting its tokens rather than retiring these.
The destination is the register that sets the floor and lets the reader stand on it, without picking the fight this theme picks in its first sentence.
The tokens that carry it:
--bw-alarm, from#d10000to something nearer#8c1a1a. The current red is the loudest thing on the page by a distance, and volume is most of what reads as provocative. Check the ratio after you move it: white text on the current fill is 5.66:1, and a darker red raises it rather than lowering it, so this move costs nothing in contrast.--bw-font-display, from the grotesque to the same stack the text runs in. The huge Helvetica over Times pairing is the fashion end of this register, and collapsing to one family is what takes the performance out.--bw-tracking-tight, from-0.03emtoward-0.01em. Tight tracking on large type reads as a poster. Loosening it reads as a document.
The trap is stopping at the color. A Professional page set in 120px Helvetica is still shouting; it has just stopped shouting in red.
Authority is the position where the brand has done the work and the page is the proof. It is the right move for reference documentation, technical reports, and anything where the reader is calibrating you against the field.
The tokens that carry it:
--bw-linkand--bw-link-visited, retired from the browser defaults tovar(--bw-ink)with the underline kept. Keeping the machine's blue is a Peer move: it hands the reader the convention they already have. An Authority page sets its own, and can afford to, because the reader has come to be told rather than to browse.--bw-measure, longer rather than shorter. Authority tolerates a dense column in a way Companion never would.--bw-text-body, from1.0625remdown to1rem. The seventeen-pixel body exists because Times runs small and this theme did not want to make the reader work. Authority is comfortable making them work slightly harder.
Work out for yourself what happens to .bw-link:hover, which inverts the word into a solid blue block. Once the link is ink, that hover is a black rectangle appearing mid-sentence. There is a right answer and finding it will teach you more about the register than reading about it.
This one is a single token, which is why it is worth naming. The theme refuses transitions: --bw-duration is zero, and every hover state arrives instantly.
- --bw-duration: 0s;
+ --bw-duration: 120ms;Then find the two rules in components/components.css that say transition: none and give them the token instead:
- transition: none;
+ transition: background-color var(--bw-duration), color var(--bw-duration);That is the whole edit. Nothing else in the theme animates.
The buttons stop snapping. A hover becomes something the interface does rather than something that has simply happened, and the page starts to feel like it is responding to you rather than reporting to you. That is the sensory axis moving, in one value.
It is also the move most likely to be made by accident, by someone adding a transition to one component because it felt abrupt. Abrupt is the position. If you want it softened, soften it in the token so the whole theme moves together, rather than in the one place that bothered you.
The reverse holds if you are going the other way from a theme that has transitions: setting a duration token to zero is a real position, not a performance optimization, and it is worth saying so in your own comments.
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.
Two cautions specific to this theme, both of which come up on the way out of it.
If the value you are adding is a shadow, you are adding the elevation model this register declines to have. That is a legitimate thing to do and it is the aesthetic axis moving, so add --bw-shadow to tokens.css, add a --shadow-bw entry to theme.css and a boxShadow entry to preset.js, and update the anti-polish rules in components/structure.css so the file stops claiming a refusal the theme no longer makes. Leaving that comment in place is how a token file starts lying about itself.
If the value you are adding is a color, check it against every ground it can land on before you commit it, including the inverted band. One token in this theme exists for no other reason: --bw-ink-muted-inverse, because the muted ink is 2.37:1 on black. Two more are reassigned inside .bw-invert on the same grounds, the rule color and the focus color, and the second of those was caught by measuring rather than by looking, since a focus ring at 2.23:1 is visible enough in a screenshot to pass a glance.