02Made here
The first piece is the one you are wearing.
This site is the atelier’s first piece. Scroll to see how it was cut, from the first mark to the final fit.
- 00Blank cloth
- 01The mark
- 02The cloth
- 03The thread
- 04The pattern
- 05The cut
- 06The fit
Every site starts the same way: an empty page and an address.
Craie is French for chalk: the line a tailor draws before the cut. The name became the first mark.
Eight tones from chalk to umber, chosen like fabric. Each one is checked for contrast, so every line stays readable.
One typeface, Geist, in two weights. No decoration where clarity does the work.
A 12-column grid and an 8-pixel rhythm. Every section is cut to the same pattern, so the page holds together.
Every animation on this site comes from one line, drawn with the same curve. If a movement has no reason, it is not there.
Tested on wide screens, tablets and phones, then measured. These are the results.
ateliercraie.com
Geist 400Geist 500
One typeface, everywhere.
- --fs-heroclamp(52px, 11vw, 176px)
- --fs-lclamp(38px, 6vw, 96px)
- --fs-mclamp(28px, 3.4vw, 48px)
- --fs-ledeclamp(18px, 1.6vw, 22px)
- --fs-body17px
- --fs-label12px
- Hero
- Principles
- Offer
- Made here
- Process
- Studio
- Questions
- Contact
- Footer
12 columns · 8 px
cubic-bezier(0.16, 1, 0.3, 1)
- Languages
- 2
ateliercraie.com
00 Blank cloth
Every site starts the same way: an empty page and an address.
01 The mark
Craie is French for chalk: the line a tailor draws before the cut. The name became the first mark.
02 The cloth
Eight tones from chalk to umber, chosen like fabric. Each one is checked for contrast, so every line stays readable.
Geist 400Geist 500
One typeface, everywhere.
- --fs-heroclamp(52px, 11vw, 176px)
- --fs-lclamp(38px, 6vw, 96px)
- --fs-mclamp(28px, 3.4vw, 48px)
- --fs-ledeclamp(18px, 1.6vw, 22px)
- --fs-body17px
- --fs-label12px
03 The thread
One typeface, Geist, in two weights. No decoration where clarity does the work.
- Hero
- Principles
- Offer
- Made here
- Process
- Studio
- Questions
- Contact
- Footer
12 columns · 8 px
04 The pattern
A 12-column grid and an 8-pixel rhythm. Every section is cut to the same pattern, so the page holds together.
cubic-bezier(0.16, 1, 0.3, 1)
05 The cut
Every animation on this site comes from one line, drawn with the same curve. If a movement has no reason, it is not there.
- Languages
- 2
06 The fit
Tested on wide screens, tablets and phones, then measured. These are the results.