Describe the bug
The CFPB logo in mobile header does not adhere to CFPB's documented logo standards .
The origin of the "padding" guidelines for the web logo stem from the logo clear space which was based on the height of the letter "c" in the CFPB logo. That is where the 25px at desktop and 20px at mobile come from. If we determine that the existing padding is an ok exception to the rule, due to practical considerations related to limited screen real estate at mobile, I still think that increasing the size of the logo at mobile to adhere to the guidelines is a good idea. Increasing the height of the logo to 40px would give us a text size of 10px for the "Consumer Financial Protection Bureau" lockup which would be a lot more legible than the 8px we have now.
| Source |
Dimensions |
Padding |
Lock up text size* |
| Design System Guidelines |
190px x 40px |
20px |
10.4px |
| cf.gov Header |
161px x 34px |
10px |
8.84px |
- Note: I calculated the lock-up text size by resizing the logo in Figma and inspecting the live "Consumer Financial Protection Bureau" text size
To reproduce
Steps to reproduce the behavior:
- Go to '(https://www.consumerfinance.gov/complaint/)'
- Inspect code to see logo dimensions and padding
- Compare to CFPB Design System Logo Guidelines
Expected behavior
The logo should be 40px in height to adhere with established logo guidelines that were defined with the goal of improving legibility for website visitors.
Screenshots
Additional context
The reason I am looking closely at this component is because we are refining the DSR header component to adhere to the CFPB Design System and cf.gov. Because the cf.gov header is not a DS component, the DSR component is currently based on but not a carbon copy of the cf.gov component.
Header component (DSR): https://cfpb.github.io/design-system-react/?path=/docs/components-draft-header--overview
Tagging:
@jenn-franklin @itsmedavep @anselmbradford @caheberer
Describe the bug
The CFPB logo in mobile header does not adhere to CFPB's documented logo standards .
The origin of the "padding" guidelines for the web logo stem from the logo clear space which was based on the height of the letter "c" in the CFPB logo. That is where the 25px at desktop and 20px at mobile come from. If we determine that the existing padding is an ok exception to the rule, due to practical considerations related to limited screen real estate at mobile, I still think that increasing the size of the logo at mobile to adhere to the guidelines is a good idea. Increasing the height of the logo to 40px would give us a text size of 10px for the "Consumer Financial Protection Bureau" lockup which would be a lot more legible than the 8px we have now.
To reproduce
Steps to reproduce the behavior:
Expected behavior
The logo should be 40px in height to adhere with established logo guidelines that were defined with the goal of improving legibility for website visitors.
Screenshots
Additional context
The reason I am looking closely at this component is because we are refining the DSR header component to adhere to the CFPB Design System and cf.gov. Because the cf.gov header is not a DS component, the DSR component is currently based on but not a carbon copy of the cf.gov component.
Header component (DSR): https://cfpb.github.io/design-system-react/?path=/docs/components-draft-header--overview
Tagging:
@jenn-franklin @itsmedavep @anselmbradford @caheberer