Colours
White walls, black type, one red. Text uses only Text/Black and Text/White; lighter text lowers the layer’s opacity.
Text/White
#FCFCFC
Text/Black
#080808
Black/Black
#080808
Black/Black 60%
rgba(8, 8, 8, 0.6)
Black/Black 30%
rgba(8, 8, 8, 0.3)
Black/Black 12%
rgba(8, 8, 8, 0.12)
Black/Black 6%
rgba(8, 8, 8, 0.06)
Grey/Charcoal
#171617
Grey/Mist
#E7E6E2
Grey/Stone
#E2DED6
White/White
#FCFCFC
White/Linen
#F3EFEF
White/Chalk
#EEEDE9
White/White 85%
rgba(252, 252, 252, .85)
White/White 70%
rgba(252, 252, 252, .7)
White/White 30%
rgba(252, 252, 252, .3)
White/White 20%
rgba(252, 252, 252, .2)
White/White 12%
rgba(252, 252, 252, .12)
White/White 5%
rgba(252, 252, 252, .05)
Brand/Red
#FE1E34
Type
One typeface, Inter Display SemiBold, in five styles and sentence case. Secondary text keeps its style and lowers the layer’s opacity. Heading 2 and Paragraph style a story’s text; Paragraph is Text/Black there, for the linen sheet.
Heading 1, 70 / 70 / 50
Identity, campaigns
Heading 3, 20 / 20 / 18
Quay Rooms
Text, 14 / 14 / 14
We design names, identities, packaging and websites, and we stay on after launch.
Heading 2, 24 / 24 / 24, a story’s headings and the journal’s titles
The brief
Paragraph, 12 / 14 / 14, a story’s text
Story text in a work’s Story field: headings, paragraphs, quotes and images.
Site parts
On every page. The footer below this page, with Lit Name, is part of the Main layout template; the home page’s room is the Gallery Room code component, under Work parts.
Button
Label and Link. A point of light runs round the outline and lights the letters it passes; on hover a white gate opens from the middle. On Light is the variant for linen.
Enter the gallery
Light Slot
The intro’s enter button: a slot of light in the line under the doors.
Enter the gallery
Light Slot, Open
Widened while the doors stand ajar.
Nav Link
A label with a line drawn under it on hover. Label, Link. Default is for black surfaces.
Nav Link, On Light
For white and linen: the footer’s page and social links, the menu’s socials and email, in Text/Black.
Menu Button
Two ceiling-light strips that glow on hover and cross when the menu is open. Closed and Open.
Navigation
The bar with the wordmark and the Menu Button, which lowers a linen menu of Menu Words, Nav Links and a Button. Shown Open; phones use Phone and Phone Open.
WRONG DOOR.
WRONG DOOR.
Error 404. Nothing is behind this one. The page may have moved, or the link is old.
Wrong Door
The 404 page: the entrance doors with the light behind them dying. Hovering the button turns it back on and the doors give a little. Change Headline, Text, Label and Link on the instance.
Work parts
The work index and the work pages. Parts drawn on linen are for the light sheet.
Work Categories
Code component: the categories of the works on the page with their counts, in /work’s header. A click shows only that category’s works and glides them into place (?category= in the address). withWorkItem on the grid’s Work Item frame lights the chosen category in each card’s line.
Gallery Room
Code component: the home page, a gallery walk round three walls of one white room: the works hung out from the left, back and right walls, a niche lit from inside its opening in each corner you turn, two doorways at the end. Give the intro’s layers its Room overrides; Works From CMS reads the Room Work items in its section.
Work Card
A work in the /work grid: picture, title and services; its Thumbnail Video plays on hover. Its variant follows the work’s Poster shape.
Identity, packaging, website
for
Maison Arden
in
2026
For thirty years Maison Arden sold its perfumes from one shop in the Marais, wrapped in plain paper with the name typed on a sticker. The family wanted a look that could travel to a second shop without losing the calm of the first. A name mark drawn from the shop’s old enamel sign, labels on uncoated paper that keeps a thumbprint, and a site with the shop’s pace: one scent per page, described the way the staff describe it at the counter.
“The second shop still smells like the first.”
Claire Arden, owner
Work page
A work page’s linen sheet: the credits as Chips, an Action Link, the Story Fold with a Pull Quote, Next Work on its wire, and the Work Rack with the film and the gallery.
About parts
The About page. Code components keep their lists, fonts and colours in their controls.
MiniMaze
Hung Word
A word on a wire for the About hero. Word, and Wire for its length in px; it sways with the mouse.
Social Link
A platform name with a line drawn under it on hover. Label, Link.
Team Print, Dark
A person’s print at rest. Photo, Name, Role and up to five links; empty links hide.
Principle
The habit it replaces, struck in red as it comes into view, then the principle and its reason. Stacked on tablet and phone.
Award Line
One prize per row; pointing opens a picture of the work. Top Prize adds the red dot.
Award Line, Phone
The name over the result and year, without the picture.
Question Row, Open
The question on the left, its answer on the right; a tap closes it. Question, Answer. Phones use Stacked Open.
Question Row, Closed
A short line keeps the answer’s place; a tap fades the answer in. Phones use Stacked Closed.
Expertise Drum
Code component: the capabilities on a drum that turns as its section scrolls. Edit them in its Capabilities list.
Brand Rail
Code component: testimonials with a rail of brands; click a brand, drag the rail or use the arrows. Edit them in its Clients list.
Brand Shelf
Code component: brands as book spines; pointing slides one out and opens its cover. Edit them in its Brands list.
Timeline Dial
Code component: a history on a ruler of years under a red needle. Start At First, for a studio’s history.
Timeline Dial, Start At Last
The same component as a career that leads to now.
Journal and contact parts
The journal, its story pages and the contact page. Parts on linen sit on a story’s sheet.
Journal Topics
Code component: All and each topic with its count; a click filters the list without a reload. Down, or Across on tablet and phone.
Story Contents
Code component: the story’s section headings; marks the one being read.
Journal Row
A story in the journal list: date, title, topic and read time; hover lowers its picture beside the list. Stacked on phones.
Share
Share, Across
The same parts Across, after the story on tablet and phone.
Send Button
The submit button of the contact and newsletter forms, with Sending, Sent and Error states.
Copy Email
A mailto link; a click copies the address and shows Copied.
Local Time
Code component: the studio’s time and whether it is open now.
Form Chip, Checkbox
A choice in a form question that takes several answers; each chip has its own Field Name.
Form Chip, Radio
A choice in a one-answer question; the group shares one Field Name.