us-typology-com
Clinical apothecary meets disciplined Swiss minimalism. Pale off-white surfaces and stark uppercase typography evoke laboratory precision, while macro photography of amber glass and fluid textures adds tactile warmth.
Visit siteColour
Background#fbf9f7
Text#000000
Accent#141414
Surface#ffffff
Muted#4f4f4f
Typefaces
- Display
- Post Grotesk
- Body
- Post Grotesk
- Mono
- —
- Source
- self_hosted
- Scale
- 10 · 13 · 14 · 15 · 16 · 20
Layout
- Grid
- —
- Container
- —
- Spacing base
- 4px
- Radius
- 0px
Capture
- Category
- other
- Sections
- 11
- Captured
- 2026-08-30
- Rhythm
- off-white x2 → pale grey → white → off-white → pale grey → white x5
Type rules
- display headings and taxonomy labels always set in uppercase grotesque sans-serif
- body copy and scientific descriptions maintain a comfortable measure around 84 characters
Colour rules
- ui elements remain strictly monochromatic across light neutrals and deep black
- chromatic color is reserved entirely for product packaging and cosmetic texture photography
Voice rules
- list precise active ingredient percentages and formulation codes directly in product titles
- keep category and section headlines strictly uppercase and under four words
Holds it together
- render all primary headers, navigation links, and product labels in uppercase sans-serif
- isolate cosmetic packaging on clean, desaturated studio backdrops with zero background clutter
- use sharp-cornered black rectangular containers for primary calls to action
Contrast
text on background20.0:1 AAA
muted text on background7.8:1 AAA
text on surface21.0:1 AAA
accent on background17.5:1 AAA
background on accent17.5:1 AAA
Type, measured
- Body
- 15px / 1.6
- Measure
- 84 characters
- Display
- 80px / 1
- Tracking
- 0em display
- Scale ratio
- 1.52
Voice
- Tone
- clinical, concise, informative
- Sentences
- short
- Person
- second
- Vocabulary
- technical
- Calls to action
- take, view, see, shop
Built with
- Builder
- —
- Framework
- nuxt
- Motion
- swiper
- WebGL
- —
- Nav
- top_bar, 38 items
- Length
- 8.4 screens
Sections in page order
11- 00
hero
Austere, clinical skincare hero balancing sterile laboratory glassware macro photography with disciplined, minimalist Swiss typography.
- Mood
- clinical + quiet
- Layout
- 1 col · split · airy
- 01
statement
Sparse and stark typographic section header featuring oversized bold sans-serif text anchored against expansive off-white space.
- Mood
- quiet + bold
- Layout
- 2 col · stacked · airy
- 02
showcase
Pristine apothecary-inspired product grid pairing clinical cosmetic bottles with stark typography and a bold sans-serif headline.
- Mood
- clinical + quiet
- Layout
- 3 col · stacked · balanced
- 03
showcase
A quiet, clinical product carousel displaying minimalist skincare sets against soft neutral studio backdrops.
- Mood
- quiet + clinical
- Layout
- 5 col · grid · airy
- 04
showcase
An austere, airy transition section dominated by expansive empty space before anchoring into a bold uppercase heading.
- Mood
- quiet + clinical
- Layout
- 12 col · stacked · airy
- 05
showcase
Clinical, minimal product showcase featuring four clean cosmetic product shots above an authoritative uppercase title.
- Mood
- clinical + quiet
- Layout
- 4 col · grid · balanced
- 06
showcase
Clean, gallery-like product category slider showcasing skincare textures and packaging with quiet, high-end photographic precision.
- Mood
- quiet + luxurious
- Layout
- 1 col · grid · balanced
- 07
testimonial
Ultra-minimal, clinical review section dominated by expansive whitespace, stark typography, and precise rating metrics.
- Mood
- clinical + quiet
- Layout
- 8 col · asymmetric · airy
- 08
statement
A quiet, airy philosophy statement defined by generous white space, clean grotesque typography, and subtle ethical certification marks.
- Mood
- quiet
- Layout
- 4 col · asymmetric · airy
- 09
feature grid
A clean four-column photographic grid highlighting brand values with crisp, scientific studio imagery and understated uppercase captions.
- Mood
- clinical + quiet
- Layout
- 4 col · grid · airy
- 10
footer
An airy, minimalist monochrome footer organized into sparse uppercase link columns and a country selector.
- Mood
- quiet + clinical
- Layout
- 3 col · grid · airy
