Design
system
The pieces this website is built with. Few of them, each with one job, reused on every page.
01 · colour
Five accents. One is picked at random on every visit and colours the curtain, the footer and the buttons. Each accent has its own text colour to keep contrast.
02 · typography
Rethink Sans 300 · 400 · 500
One family. Hierarchy comes from size and grey, not from bold.
- Banesto
- Banesto is back.
- Keep what people recognise and open it up to what comes next.
- Idea first, form second. Every visual decision has a reason.
- Deliverables
03 · components
Chips
Rule: a chip is something you press (navigation, links, contact) or a state (in progress). Client projects carry an asterisk in the visit colour and a "* client" note in the spec line. Never information: that is what the spec line is for. They sit edge to edge, like a single strip.
Spec line
Information is written, not boxed: small capitals separated by slashes. On the home page and in each case study hero, right of the title and justified, in a narrow column so it runs to at least two lines; on mobile, full width. On the About page, inline.
Floating buttons
Just the arrow at rest. On hover they expand with the accent. On mobile, always expanded.
Insight · Tension · Idea
Insight
A drink never needs an explanation.
Tension
A "no" almost always does.
Idea
The bottle covers the "no".
Mandatory on campaigns: three columns with a top rule.
View all
Closes the home selection and opens the index. White text and a white circle with a black arrow; on hover the band fills with the accent and the arrow takes it.
Index row
Name, piece, disciplines and year. On hover it fills with the accent and the project mockups cycle, uncropped, in a thumbnail that follows the cursor.
04 · icons
Phosphor, regular weight. Every icon on the site comes from the same family.
05 · motion
Soft out cubic-bezier(.16, 1, .3, 1) · .45–.7 s
Chips, buttons, arrows and content entrances.
Curtain cubic-bezier(.7, 0, .2, 1) · .9 s
Page transitions and preloader.
Hover over the tracks to see them. With reduced motion on, everything is simplified.
06 · grid
- Columns12 · gap 1.5rem
- Side marginclamp(1rem, 4vw, 4rem)
- Header margin1rem
- Radius1rem · chips 4rem
- Breakpoints1100 · 991 · 767 · 600 px