Colours
Black wall, bone type, one red. Text uses only Text/White and Text/Black; 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 12%
rgba(8, 8, 8, 0.12)
Black/Black 6%
rgba(8, 8, 8, 0.06)
Grey/Charcoal
#171617
White/White
#FCFCFC
White/Linen
#F3EFEF
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 gallery wall is the Gallery Wall code component.
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 for black: the footer’s page and social links.
Nav Link, On Light
For the linen menu: its 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.
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.
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.