Scope: Major UI overhaul with fonts
What would change in the production Feathr app (shrike) if the major UI overhaul with fonts is followed as the direction. The prototype is an early exploration, not a standard, so this lists each system-level change and then every shrike component, chart and page as needing a new design.
What this direction touches
- Components redesigned
- 320of 320
- Every component folder that shows something on screen gets a new design, across 1,902 UI source files. That goes well beyond color: each one is redesigned, not only restyled.
- Each component gets newColor paletteTypefaceType scaleFont weightsCorner radiiShadowsSizing and spacingMotionIconsDark mode
- Foundations changed
- 10of 10
- The building blocks every component in the design system is made from.
- ChangesColor paletteTypefaceType scaleFont weightsCorner radiiShadowsSizing and spacingMotionIconsDark mode
- Color palettes to design
- 2palettes
- A new light palette and a new dark palette. Every color token gets a value in both, so each of the 1,790 uses of color tokens, in 419 files, has to look right in both themes.
- LightDark
Shrike at a glance
Measured from shrike’s source (tests, stories and generated files left out). These describe the app itself, so they are the same on every Scope page.
- 1,965
- UI source files
- React components and pages across the app, its libraries and its sub-apps
- 890
- Style files
- CSS files that set colors, type, shape and spacing
- 1,790
- Color token uses
- In 419 files
- 2,993
- Type, shape, shadow and spacing token uses
- Font sizes, radii, shadows and spacing
- 164
- Hard-coded colors
- 112 hex and 52 rgb values, in 49 and 32 files, that skip the tokens
- 559
- Files that import icons
- Font Awesome, in four weights
How the numbers above are counted
- Components are counted by folder. Each folder holds several files, and the three component packages have 1,902 UI source files in total, so a folder is a smaller unit than the files inside it. This count is conservative: it counts folders, not every component in them.
- The states inside each page, such as empty, error, loading and tab states, can’t be counted from the code, so they’re not in any number. That is a reason the work is larger, not a sign that the counts above are wrong.