A title that makes a claim worth clicking
One or two sentences that earn the click.
Read the piece →Page header
Eyebrow, headline, lede and actions over the colour mesh. One gradient word, at most.
GC kit 0.1
Component demo
Everything on this page comes from one stylesheet and one small script. Open the code under any component to copy it into your own page.
Buttons
Pill for the one action that matters, ghost for the rest, glass back link to go up a level.
Breadcrumb trail
Where this page sits, one tap per level, in the glass pill. Only on pages two levels down. The current page is plain text and shortens with an ellipsis if the trail runs out of room.
Liquid glass
Frosted panels with a soft sheen, for anything that floats over colour or imagery.
Glass panel
Glass chip
Blur, saturation and a light inner edge
Segmented control
A glass filter with a sliding lens. Pair it with a status line that says what's showing.
Showing all 12 projects
Tags and chips
Accent tags for topics, grey tags for skills, chips for sources, badges for status.
Customer interviewsStore visit notes
SpotlightComing soon
Stat grid
The number first, then what moved and for whom. The figures here are placeholders.
- 3x
- Lead with the number, then what moved
- $1M+
- Keep each claim to one checkable line
- 80%
- Swap these placeholders for your evidence
Work card
The project's pictogram fills the right of the art, the client's name sits top left, and industry and year sit bottom left as plain text. The colour field follows the accent unless you give the card its own.
BrandProject title in a few words
The outcome in one line, number first
Two lines of context: the scope, the team and what changed for customers.
Request the case study →BrandSame card, fixed art
Set --art to any of the five art tokens
Art tokens keep their colours whatever the accent, like the industry cards on the Work page. The pictogram here is a sample.
Request the case study →Accordion card
The headline outcome up front, the detail behind the plus. No script needed.
Client name What the engagement was The outcome, in one line
The detail sits here: scope, approach and what happened next.
Open by default Useful for the first or latest item The accent border shows it's open
Tap the cross to close it again.
Link card
The whole card is the link, with a short label on top so people know where it goes.
List card
Grouped items with a name, a source and a date on the right.
Group heading
- Item nameWhere it's from2026
- Another itemSource2024 – 25
Post list
Date, then title, summary and topics, then the post's artwork as a thumbnail. On phones the thumbnail moves to the top.
A title that makes a claim
One or two sentences that earn the click.
Featured post
The newest post, with its artwork filling one side. Keep the bottom-left corner of the artwork clear for the Featured label.
Post banner
The same artwork, full width under the post's title. It is also the image people see when the post is shared.
Avatars
Initials on the brand gradient, with an optional photo on top.
GC
GC
GC
GC
GC
Pull quote
One sentence worth remembering per piece, never more.
Outputs in motion are not the same as outcomes that matter.
Stat strip and callout
Solid blocks for the evidence: a row of figures, or one figure with its story.
- 400+
- example claims
- 108
- example facts
- 17
- example themes
Flow and roles
Steps that end in the outcome, and three cards for three audiences.
For the CFOWhat it saves and when it pays back.
For the CMOHow fast it moves and what it unlocks.
For CX leadersWhat customers notice first.
Dark surface
Put data-surface="dark" on any block, or on the whole page, and everything inside follows.