Blog tile
Stacked media and body with hover elevation.
Sample Page
This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this: Hi there! I’m a bike messenger … Continued
Type
Heading hierarchy, body copy, links and marks consume Tokens only. Samples below use type tokens, not extra heading ranks.
Home hero
Page hero
Frame CTA heading
Heading one
Heading two
Heading three
Heading four
Heading five
Heading six
Body copy with a plain link and a highlight.
Buttons
Size, colour, outline, and pill variants.
Alerts
Status and empty-state notices.
Default alert on muted surface.
Success — saved or confirmed.
Warning — check this before continuing.
Error — empty state or failure.
Forms
Labelled fields, rows, actions, inline search, and a visually hidden honeypot field.
Inline search
Tiles
Card Primitive — blog, testimonial, and tone variants in a tile grid.
A short quote that shows the testimonial card Primitive.
Standalone italic pull quote for case-study heroes.
Dark tone
- Nested contrasting tile on a surface band
- List and note styles
Optional note line
CTA tone (wide)
Wide grid item using the CTA colour tone — leadership.
CTA secondary tone (wide)
Wide grid item using the secondary accent — improvement delivery.
CTA title tone
Dark tile; leadership colour on the title only.
CTA wash tone
Tinted dark tile; leadership colour on the title.
CTA secondary wash tone
Tinted dark tile; improvement-delivery colour on the title.
CTA secondary title tone
Dark tile; improvement-delivery colour on the title only.
Icon cards
Icon above heading and body, with an optional 01-style number.
Numbered list and steps
Vertical connected list and horizontal arrowed step row.
01
Delayed launches
Circular timeline index for Home problems.
01
Delayed launches
Projects absorb budget without reaching a dependable release.
01
Clarify the real goal first
Compact display index for How we’re different.
Framed icon
Case-study challenge icon box.
01
A product launch had gone off the rails
Giant washed index on a default tile for case-study situation cards.
Reporting infrastructure
01
Critical workflows sit across disconnected tools
Three-column numbered-lg row for Expertise challenges.
02
Constant firefighting
Senior people restore service instead of improving the business.
01
Assess
02
Prioritise
03
Lead
Options and metrics
Monospace bracket labels, a highlighted recommendation, and a before/after pair.
[DO_NOTHING]
Risk compounds until a crisis migration is forced.
[SUPERVILLAINS]
Incremental modernisation. Zero downtime.
75% → 10%
Technical time spent firefighting
Before/after metric on the Tile primitive.
Icons
Named SVG component. Decorative by default; pass label for an accessible name.
Logo strip
Caption plus a row of client marks. Placeholders keep intrinsic size before artwork exists.
Trusted by
Stat strip
Figure-and-label pairs in one band.
0
Downtime during migration
20+
Years of tech debt untangled
< 2 mo
Average rescue delivery
100%
Client continuity maintained
Industry
Healthcare
Product
Assessment platform
Engagement
Rescue & rebuild
Relationship
Multi-year
Accordion
Native disclosure. Works without JavaScript; expanded state is platform-owned.
Can we modernise this without taking the business offline?
Plain question panel. Keyboard users tab to the summary; Enter or Space toggles it.
How long will it actually take and what will it cost?
A second closed panel.
01 Audit
Numbered step panel: map every dependency, risk, and hidden landmine.
02 Triage
Separate what must change immediately from what can wait.
Comparison table
Row and column headers. Inclusion is announced in text, not colour alone.
| Capability | Fractional CTO | R&D Partner | Combined |
|---|---|---|---|
| Technical leadership | Included | Not included | Included |
| Automation projects | Not included | Included | Included |
Container — thin + gutters-small
Width props: regular, wide, thin, full. Gutters sit on a child of the container, not the container itself.
Section — inner rhythm
Solutions, Expertise and case-study Page Sections use section-block--inner so vertical padding matches Prototype py-20, not Home-scale section-y.
Section — muted band
Mid-page bands use bg-surface, bg-surface-alt, or bg-surface-muted with section-block for vertical rhythm. The page is dark by default.
Entry content type
Body copy inside .e-content picks up list and type primitives used by the editor and the_content().
- Unordered list item
- Another item
- Ordered list item
- Second step
A heading can include a highlight mark.