Engineer ID card

A trust section for an electrician, a gas engineer or any trade that sends someone into a home: before a stranger rings the bell, the customer can see the card they will show and the number to check. It sits in the team section beside team-profile-cards (a face beside a biography) and among the logo sections beside accreditations-ledger (six bodies, each closing on a number) and logo-spotlight (one featured partner).

A registration card drawn as an object: a scheme strip, a headshot beside the name and expiry, the licence number at display size, then a ruled grid of work categories, each marked Yes or Not covered. The negative space of what is not covered is part of the card, because that is what a customer checking a register needs. A smaller second card laps the first card's foot, the lapping card the second child of a flow group so it paints on top (a vertical flex stack sized the first card from a narrower intrinsic layout and left an empty band that swallowed the lap). On a phone the prose comes first and the cards stack with a smaller lap.

1. The scheme names and numbers. Type your own registration; the numbers here are invented. Keep the scheme as text, never its logo.
2. The work categories and which are covered.
3. The portraits. Generated and nobody real; use your engineers' own.
4. The check link. It points at #; paste the scheme's public register page.

• Typeface. The base states no font family.
• Palette. Your page ground and text. The cards take the plate role, falling to base, with contrast text; each scheme strip is an inverted band in your contrast colour with base text.
• Tags. Yes is a filled tag in your contrast colour; Not covered is a dashed outline, and both say so in words.
• Buttons. Book is your theme's own button with 0.875rem padding; the check link is an underlined text link in the link role.

• The number. About 36px on a phone, 64px from 1280 up: sized so an eleven-character licence number fits the card on one line.
• The grid. Work categories on 7.5rem minimum columns: three across in the card on a wide screen, two on a phone.
• The lap. The second card sits clamp(2rem, 5vw, 4rem) up over the first card's foot, which keeps a matching margin free.

Part of the Spur Pattern Set, an electrician and plumber in Beeston, Nottingham: switch white ground #f2f3ef, a fuse grey band #e2e7ec, card white #ffffff and a cable black slab #14181c; cable black ink, slate #4a535b for secondary copy, live blue #1747c9 labels and primary buttons, conduit hairlines #c5ccd2, and signal yellow #ffd21a kept for emergencies. Headings and figures are Arial Black at 900; body, labels and buttons Arial. Cards and buttons have 4px corners, tags 2px. Here the cards sit on the fuse grey band under cable black scheme strips, Yes in a live blue tag and Not covered in a dashed slate outline. Every text pair is measured on the ground it is painted on. Take the base for your theme's colours, or the look's Use my theme chip.

• Core blocks only: group, heading, paragraph, image, columns, column, buttons, button. No plugin, nothing to keep updated.