Hand-carved gold signet
£640
Sample maker, Edinburgh
“Architectural, heavy in the hand, and it can be engraved.”
One system for the page and the conversation
Today the site runs two colour vocabularies side by side (bone, void and bolt for the site; gold, ink and paper for Juno), and one token, --juno-gold, resolves to blue in one scope and rose-gold in another. This page merges them into one set of primitives and roles. The homepage and the chat now draw from the same source.
Colour
Paper
Grounds and surfaces. Paper is the page, vellum is anything that sits on it.
- Aa
--paper
#faf6ee
- Aa
--paper-2
#f1ebde
- Aa
--paper-3
#e6decc
- Aa
--vellum
#fffdf8
Ink
Olive-black, never pure black. Ink-3 is the lightest ink allowed for text.
- Aa
--ink-deep
#22251e
- Aa
--ink
#2e3129
- Aa
--ink-2
#494d40
- Aa
--ink-3
#62665a
- Aa
--ink-4
#adaf9e
Rose
The Juno voice. Rose-deep for text and actions; rose only for graphics and large type.
- Aa
--rose-deep
#a84a75
- Aa
--rose
#c9628f
- Aa
--rose-pale
#ebb9cd
- Aa
--rose-wash
#f7e4ec
Rose-gold and leaf
Sterling's grades. Leaf for A+ and A, gold-deep for B, ink-3 for C.
- Aa
--gold-deep
#8a5c1c
- Aa
--gold
#dca353
- Aa
--leaf-deep
#3d4c36
- Aa
--leaf
#5c7150
- Aa
--leaf-wash
#e8ebdd
Components never use primitives directly. They use roles (--bg, --surface, --fg, --fg-muted, --accent, --line), which is how the same card renders on paper, on the dark cover and on the rose hallmark field.
Type
--t-display
Fraunces, SOFT 100. Mastheads only.
Find your incredible.
--t-h2
Fraunces. Section headings; italic for the turn of phrase.
Every piece, graded in the open
--t-h3
Fraunces. Piece names, step titles.
Hand-carved gold signet
--t-body-lg
Newsreader. Juno's voice and lead paragraphs.
Tell me about them the way you would tell a friend.
--t-ui
Barlow. Controls, prices, metadata.
Shop with Juno · Sterling A+ · £640
Space and shape
- --s-14px
- --s-28px
- --s-312px
- --s-416px
- --s-524px
- --s-632px
- --s-748px
- --s-864px
- --s-996px
- --s-10144px
--r-1
--r-2
--r-3
--r-4
Motion
- --dur-1140msPress, toggle, hover colour
- --dur-2260msState change, chips, button arrows
- --dur-3480msMessages arriving, panels opening
- --dur-4780msThe one authored moment per page
- --ease-calmcubic-bezier(.16,1,.3,1)Every arrival. Decelerates like a considered answer.
- --ease-exitcubic-bezier(.7,0,.84,0)Exits, always faster than entrances
Components
Piece card
Chat states
Thinking
Juno is listening
Searching
- Reading what you told me
- Looking through independent makers
- Checking each retailer's Sterling grade
Juno and you
Does she wear gold, silver, or a bit of both?
Gold, mostly
Error
I lost the thread for a moment. Nothing you told me is lost.
Every state is live on the chat page; use the design review switcher under the composer.
Photography
The current homepage mixes black-and-white portraits, warm studio shots, saturated lifestyle images and cut-outs on white. PhotoFrame gives them one crop, one mat and one tonal grade, so they read as a set without reshooting anything.
As supplied
Through PhotoFrame
Usage guide, on one page
- 1
One accent per view.
Rose-deep carries the primary action. If two things are rose, one of them is wrong.
- 2
The grade is never hidden.
Every piece shows its Sterling hallmark. Tapping opens the criteria in place, not in a tooltip.
- 3
Every photo goes through PhotoFrame.
4:5 crop, paper mat, one tonal grade. Cut-outs get the same mat and a cast shadow.
- 4
Juno speaks in Newsreader, the interface in Barlow.
If a line is something Juno would say aloud, it is set in the body serif.
- 5
Motion explains, it never decorates.
Thinking shimmers, searching ticks, answers stream, the hallmark strikes. Nothing else moves on its own.
- 6
Reduced motion keeps meaning.
Streaming becomes instant, reveals become fades, the marquee stops. States stay visible.