phdi icon indicating copy to clipboard operation
phdi copied to clipboard

Align with design on the right spacing, color, and font tokens to set application-wide in USWDS

Open fzhao99 opened this issue 1 year ago • 0 comments

As it says on the tin. Docs from USWDS for reference and the variables.scss and layouts.scss files for an example of what we're talking about

The following is a start for things worth defining.

  1. Site max / min widths for the different page templates (one for full width and one for partial width like on the search form)
  2. Column spacing
  3. Color tokens - a naive command F exposes the following that we can probably tokenize
    • #565c65 (customize query accordion gray)
    • #005ea2 (focus state blue)
    • #fff // #ddd- background white / grays
    • #2e6276 // #224856 - results accordion
    • #a9aeb1 // #71767a - border outline greys
    • #faf3d1 - search form yellows
  4. Font tokens for h1 - h6

fzhao99 avatar Sep 23 '24 19:09 fzhao99