This is the page title, 46px on desktop
Hero lead line: Poppins 400, 18px (16px on phones), pale blue on the navy banner. The page title is Poppins 600: 46px on desktop, 38px on tablets, 30px on phones. It is the only header in the hero (no label above it) and ends with its orange italic part, which starts its own line on phones.
Section label: 13px caps
Section heading: 42px bold
Section lead: 18px (16px on phones). The section heading is Poppins 700: 42px desktop, 38px tablet, 30px phone.
Homepage hero title. Poppins 700, 64px desktop, 40px tablet, 34px phone, line height 1.08. Only the homepage uses it. tm_ui_hero( ..., true )
Page hero. Navy banner, one page title (orange part last), lead, buttons. No page label: pass an empty first argument. tm_ui_hero( '', title_html, lead, buttons )
Section head. Label, H2 with one orange italic phrase, one lead line. Centered (or left). tm_ui_head( label, h2_html, lead )
Subhead: 28px semibold orange
Card title: 18px bold navy
Body copy: Poppins 400, 16px (or 18px for leads), line height 1.65, ink #3F4150.
Small print: 13px mute #6B7090.
Buttons
One orange action per screen
House button. 54px tall, 8px corners, Poppins 700 16px, 2px pale blue border, solid arrow. Orange for the main action, navy beside it. Hover darkens and the border turns white. Full width on phones. tm_ui_btn( label, href, 'orange' | 'navy' )
Card buttons. 44px tall, Poppins 600 14px, inside cards. tm_ui_btn( label, href, 'card' | 'card-navy' )
Text link. Navy, 15px semibold, arrow; burnt orange on hover. Always on its own line. tm_ui_link( label, href )
Cards
Cards on light sections
White card
The default. 1px line border, 12px corners, soft navy shadow. Best on mist sections.
Card linkAccent card
A 4px orange bar on top. Use for problems, features and anything you want to stand out on white.
Featured card
A 2px orange border for the one card that matters most in a row.
Cards. Pass the variant: white, accent, featured. A card with an href becomes a link and lifts on hover. tm_ui_card( inner, 'white' | 'accent' | 'featured', href )
Callout. One readable sentence set apart below a section, with a link. Use it for anything that matters; small print is only for notes.
Example linkCallout. 16px ink text in a white card, 56px below the section content (40px on phones). Glass version on dark sections. tm_ui_callout( bold_lead, text, link_label, href )
Dark sections
Glass cards on navy
Glass card
See-through white on navy and deep sections, like the homepage service tiles.
Card linkNavy section
Headings turn white, text pale blue, checks orange.
- Checklist item
- Another item
Deep section
Use deep navy for the closing call to action and for demo showcases.
Section tones: white, mist, navy, deep. Alternate them so long pages have rhythm and color. tm_ui_section( inner, tone )
Split
Text on one side, a panel on the other
Stacks on tablets and phones.
Bundle or offer card
- What is inside, one
- What is inside, two
- What is inside, three
Split, checklist, price, savings. Savings notes are green. Prices are navy, 38px. Checklists use navy checks (orange on dark sections). tm_ui_split(), tm_ui_checks( items, panel ), tm_ui_price( price, note ), tm_ui_badge( text, save )
Steps
How it works
Pick
Numbered steps sit in navy circles.
Plan
Two lines of text at most.
Build
Four across, two on tablets, one on phones.
Launch
Use for any process.
Steps. Navy 52px circles, card title and text. tm_ui_steps( array( array( title, text ) ) )
Accordion
Common questions
This is the site accordion. What does it look like?
Does it add FAQ schema?
Accordion. Question 18px semibold navy (16px on phones); answer 16px. tm_ui_accordion( items, schema )
Closing call to action
Deep navy band at the end of a page: H2, one line, the main button and one navy button.