From the 2026-07 visual audit. One scroll down settings currently shows the same "secondary text" role at six different tints and its section headings at three different weights:
The opacity ladder — all for the same muted-description role:
| where |
value |
settings/FocusSchedule.module.scss:21 |
0.8 |
settings/SessionGraceSettings.module.scss:19 |
0.7 |
settings/SoundSettings.module.scss:22 |
0.7 |
pages/options/Options.module.scss:28,58 |
0.72 |
android/.../SettingsAndroid.module.scss:53,70 |
0.75 |
plus SessionGraceSettings:31 0.8, FocusSchedule:86 0.6 |
|
--h4-c already exists for exactly this role (used by .dashboardHeading). Direction: converge on it.
Three .h3 weights: global 700 (allTypo.scss:51), web options re-declares 500 (Options.module.scss:43-45), Android re-declares 600 (SettingsAndroidRoute.module.scss:9-11). Same shared components, three heading treatments — pick one.
Invisible input surfaces: TextInput.module.scss:3-8 and TimeInput.module.scss:3-8 are byte-identical in their first four declarations and both set background: transparent, throwing away the frosted --form-inputs-bg that formInput() just applied — fields with no surface at all in a translucent-white system. The shared delta belongs in a formInputSmall() mixin.
Also on the same screens: two different divider treatments (Options.module.scss:40 borrows the button outline token for a hairline; SettingsAndroidRoute uses a faded <hr>); the entrance keyframes are defined twice identically (Options:62-69, SettingsAndroidRoute:23-30) at a raw 320ms; Toggle vs Checkbox sit in the same rows with different label gaps (12px vs 8px) and hand-derived magic geometry (translateX(22px), the 5×10 tick).
Related: #184 (duplicated section headings), #169 (delete-button column), #165 (framing copy).
From the 2026-07 visual audit. One scroll down settings currently shows the same "secondary text" role at six different tints and its section headings at three different weights:
The opacity ladder — all for the same muted-description role:
settings/FocusSchedule.module.scss:21settings/SessionGraceSettings.module.scss:19settings/SoundSettings.module.scss:22pages/options/Options.module.scss:28,58android/.../SettingsAndroid.module.scss:53,70SessionGraceSettings:310.8,FocusSchedule:860.6--h4-calready exists for exactly this role (used by.dashboardHeading). Direction: converge on it.Three
.h3weights: global 700 (allTypo.scss:51), web options re-declares 500 (Options.module.scss:43-45), Android re-declares 600 (SettingsAndroidRoute.module.scss:9-11). Same shared components, three heading treatments — pick one.Invisible input surfaces:
TextInput.module.scss:3-8andTimeInput.module.scss:3-8are byte-identical in their first four declarations and both setbackground: transparent, throwing away the frosted--form-inputs-bgthatformInput()just applied — fields with no surface at all in a translucent-white system. The shared delta belongs in aformInputSmall()mixin.Also on the same screens: two different divider treatments (
Options.module.scss:40borrows the button outline token for a hairline;SettingsAndroidRouteuses a faded<hr>); the entrance keyframes are defined twice identically (Options:62-69,SettingsAndroidRoute:23-30) at a raw 320ms;TogglevsCheckboxsit in the same rows with different label gaps (12px vs 8px) and hand-derived magic geometry (translateX(22px), the 5×10 tick).Related: #184 (duplicated section headings), #169 (delete-button column), #165 (framing copy).