Components
The working parts of the site: buttons, fields, cards, tags, media, menus, header and footer.
Every piece here is live. Hover, click and tab through them. They are built only from the tokens, and their styles live in brand/assets/components.css, which the site will import as is. The corners follow the switch in the menu.
- Orange is the one action you most want taken. One per view.
- Outline is the second choice beside it.
- Quiet is for small actions inside cards and lists.
- Labels are a verb and a noun: "Start a project," "See the work."
- Buttons are 44 pixels tall, 36 for the small size.
Body text with a link inside it, which turns lime on hover.
See the case study- The label sits above the field, always visible.
- Errors say what to do, in plain words, under the field.
- Choices are tappable chips. Fewer taps than a dropdown.
Plain tags name a discipline. Blue marks the current filter. Lime is the badge, and there is one per view at most.
The Assembly
Twelve robot basketball teams, twelve identity systems, a rulebook, and a site.
Beckley Auto Repair
A 35-year-old shop with no real web presence, given a site that brings in work.
Brand, site and film
For a business that needs everything at once. One person, start to finish.
How it worksThe work card is the heart of the site. The whole card is one link. On hover the edge turns blue and the surface lifts a step. The picture is always 16 by 10.
- Stills and video sit in the same frame, 16 by 9 unless the piece needs otherwise.
- The play button is orange, because playing the film is the action.
- Video never plays with sound until someone asks for it.
- No device mockups and no tilted screens.
