One shared pattern.
Use a concise heading, one useful description, and a short capability label.
REUSABLE CARDTHE SYSTEM BEHIND THE PAGE
Small pieces.
A consistent whole.
Live, reusable components from the Fieldwork landing page. The same stylesheet and JavaScript modules power both pages. No framework, package install, or build step.
01 / DESIGN TOKENS
A shared visual language.
Change the variables at the top of assets/styles.css to adapt the palette, spacing, and type. System fonts keep the sample self-contained.
Paper · #F5F3EC--paper
Ink · #242820--ink
Orange · #DF4E29--orange
Lime · #DCE581--lime
Olive · #3E503C--olive
03 / BUTTONS + LINKS
One action, clearly expressed.
Use links for navigation and buttons for actions. Visible focus styles support keyboard use. Touch targets use generous padding, and motion respects the device preference.
04 / ACCESSIBLE POPUP
A focused next step.
A native modal dialog keeps keyboard focus inside while open, makes the background inert, supports Escape, and restores focus to its trigger. It also closes with the close button or a backdrop click.
<button class="button button-dark" data-open-dialog="example-dialog" hidden>Open popup</button> <dialog class="brief-dialog" id="example-dialog" data-dialog aria-labelledby="example-title"> <h2 id="example-title">A focused next step.</h2> <button data-close-dialog>Close</button> </dialog>
05 / FAQ ACCORDION
Useful detail, on demand.
Native details and summary work with keyboard, pointer, and without JavaScript. Answers can remain open together. The small JavaScript enhancement changes the decorative plus sign.
Can I copy this into another page?
Yes. Copy the details markup, include the shared stylesheet, and initialize the optional accordion enhancement.
Does this require a JavaScript framework?
No. Its built-in browser behavior works independently; the module only updates the decorative icon.
06 / BRIEF FORM
A form with an honest outcome.
Required fields, constrained input lengths, and a named status region support a clear flow. The preview uses text content, never HTML. Editing any field clears a previous preview so it cannot be mistaken for the latest draft.
Production integration is a separate task: agree on delivery, add server-side validation and spam protection, establish privacy and retention rules, and test real delivery. This demo has no backend, email, analytics, cookies, or local storage.
07 / SERVICE CARD
Content with a repeatable structure.
A three-column grid becomes a stacked layout below 900px. Cards are informational, with semantic headings and decorative SVG icons.
Adapt the content.
Keep the structure and spacing while changing copy and the decorative icon.
CONSISTENT SPACINGMaintain it once.
Shared styles keep each instance aligned across the landing page and library.
RESPONSIVE GRID