ContractFocus ring
- Job
- Keyboard location
- Requirement
- must specify
- States / rules
- Width, offset, contrast on light and dark
- Specified means
- A designed object, not browser default left to chance
- Hardest context
- Dark surface, 16px control
Example
2px ring, 2px offset, AA
Counter-example
Focus = hover color
How this lives in Building Blocks
Representation: Shared foundation / token / behavior guidance.
Building Blocks should provide shared guidance, semantic roles, examples, and reusable implementation hooks where appropriate. Each product maps those roles to its own theme and documents any justified exceptions.
Do not specify the easy case only.
The source checklist’s hardest-context test is part of what “specified” means: Dark surface, 16px control.
On-spec signal
2px ring, 2px offset, AA
Failure signal
Focus = hover color
Catalog connection
The product-local Catalog should show this row’s actual state for that product using the Catalog contract. Building Blocks documentation can define the baseline, but it does not make a product’s row Specified, Designed, or In code by itself.