Iris › Style guide
Style guide
How maac is put together: what to change first, the colours and type, every component and what each collection feeds.
Start here
Five things to do before you share it.
1
Make it yours
Change the name in the Menu bar component and in the footer of the Main layout template. Then replace Iris Calder’s details on the About and Contact pages.
2
Add your work
Each project is an item in the Work collection: title, summary, client, role, stack, year, a files list, a 16:10 cover and close-up (3200 × 2000 works well), three screens with a title and a note each, and the story.
3
Set the colours
Every colour is a colour style with a light and a dark value. Change Accent first. The site opens in light, and the switch in the menu bar remembers a visitor’s choice.
4
Decide where messages go
Select the New message form on the Contact page and choose a destination: email, a webhook or Google Sheets. Send one real test.
5
Before you publish
In Site settings add the site title, description, favicon and social image. On the 404 page, turn off search indexing.
Colours
Each style has a light and a dark value. Use the styles, never raw colours, so the dark theme keeps working.
Page
Light #FFFFFF · Dark #0F0F0E
The page
Panel
Light #EEEEEE · Dark #1A1A19
Windows and cards
Raised
Light #FFFFFF · Dark #242423
Sheets on a window
Line
Light #DCDCD8 · Dark #2C2C2A
Dividers and edges
Edge
Light #C9C9C4 · Dark #3A3A38
Large ruler ticks
Ink
Light #121212 · Dark #F1EFEA
Text and buttons
Muted
Light #77776F · Dark #8F8D87
Secondary text
Faint
Light #A5A59F · Dark #5F5D59
Placeholders, numbers
Accent
Light #FF5B1F · Dark #FF6A2E
Selection, marquees
On accent
Light #FFFFFF · Dark #FFFFFF
Text on Accent
Selection
Light #DDDDD9 · Dark #2A2A28
Quiet selection
Glass
Light 82% white · Dark 80% black
Menu bar
Gutter
Light #FAFAF9 · Dark #131312
Spare tint
Gutter line
Light #EDEDEB · Dark #1E1E1D
Spare line
Other accents to try
Cobalt
Accent #2E5BFF, dark #5076FF
Moss
Accent #2F7D5B, dark #45A077
Graphite
Accent #121212, dark #F1EFEA. On accent #FFFFFF, dark #121212
Type
Golos Text sets everything, at regular weight. Use the text styles rather than setting sizes by hand.
Display · h1 · 56 / 1.04
Design engineer in Copenhagen.
Heading · h2 · 40 / 1.08
Selected work
Title · h3 · 22 / 1.25
Ledgerbird, savings goals for Hollin Bank
Lead · 17 / 1.5
I design product interfaces and build them in React.
Body · 17 / 1.5
Hollin Bank’s savings goals were set up and then forgotten. I redesigned them and built them in the bank’s React Native app.
UI · 15 / 1.4
Open case study
Small · 13 / 1.4
Iris › Work › Ledgerbird
Article · 18 / 1.65
Rings look finished at a glance. That is the problem when the money is not there yet.
Article heading · h2 · 24 / 1.3
What changed
Components
What each piece does and where to change it.
Pathbar
The hero: a Finder window in column view. Scrolling walks the selection through every folder and file, with a preview of each project.
Home › Hero. Reads Work, Components, Journal and About files.
Offstage
Stage Manager for selected work. One project sits centre stage, the rest wait on the shelf and swap in as you scroll.
Home › Selected work, Case study › More projects. Reads Work.
Crosshair
Details: a marquee crops a full screen down to one component and shows its size.
Home › Details. Reads Components with Featured on.
Capture
Case-study screens. A marquee drags across each screen with a size readout, then the caption fades in, once.
Case study › Screens. Reads Screen 1 to 3.
Listview
Experience as a Finder list view, sorted by date.
Home and About › Experience. Reads Experience.
Settings
Services as a settings window: pick a service on the left, read it on the right.
Home and Services › Services. Reads Services.
Banners
Kind words as notification banners.
Home and About › Kind words. Reads Kind words.
Dropzone
The closing drop zone: a brief is dragged in, then the call to action.
Home › Closing, and Contact.
Gutters
The margins: rulers on the column edges that restart under every Seam and drift slowly as the page scrolls. A section with a smaller max width gets a narrower column that glides in while it is read.
Main layout › Margins. The Column control sets the widest column.
Seam
The divider between sections: a ruler with a path bar naming the next section.
Between sections. Edit its Path.
Stops
The ruler along the foot of the menu bar, with a tab stop under each link. The current page’s stop is marked.
Menu bar. Its Menu height tells pinned scenes where to stick.
Theme
The light and dark switch in the menu bar: a sun and a moon in one track. Light is the default.
Menu bar.
Missing
The 404 page: a Finder window at the missing address, with a sheet that drops in.
404.
Send button
The contact form’s button, with Hover, Loading, Success and Error variants.
Contact › New message.
Menu bar, Work card, Note row
Canvas components. Menu bar has Desktop, Tablet, Phone and Phone open; Work card and Note row have a Phone variant and a hover fade.
Every page.
Feed, Track, Picture
Helpers. Feed hands CMS items to the windows from the hidden Data frames, Track measures scroll for the pinned scenes, Picture loads each image at the size it is shown.
Keep the Data frames and the Track layers.
Collections
What each CMS collection feeds. Keep the field names; the windows read them.
Work
Hero folder Selected work, Selected work on Home, the Work page and every case study.
Title, Summary, Intro, Result, Client, Role, Stack, Year, Files, Cover, Close-up, Body, Screen 1 to 3 with a title and note
Components
Hero folder Components, and Details on Home for items with Featured on.
Title, Note, Pixels, Size, Built with, Year, Screen, Close-up, Project, Featured
Journal
Hero folder Writing, Journal on Home, the Journal page and every note.
Title, Date, Reading time, Topic, Excerpt, Thumbnail, Body
About files
Hero folder About.
Title, Note, Based in, Experience, Tools, Email, Image, Link
Experience
Experience on Home and About.
Name, Role, Dates, Kind
Services
Services on Home and on the Services page.
Title, Summary, Usual length, Starts from, What you get
Kind words
Kind words on Home and About.
Name, Role, Time, Quote
Agent skills
Saved instructions for Framer’s Agent, so changes stay inside this system.
default
Always on. The design-system rules: colours, type, layout, motion and what must not break.
maac-add-project
Adds a project to Work with its cover, close-up and three screens.
maac-add-page
Adds a page from existing sections, with its Seams and breakpoints.
maac-rebrand
Changes the name, accent, font and demo details across the site.