The Lookbook / Wellness

About this kit

Wrenfield is a fictional functional-medicine practice in Vale, Oregon, made as a mockup from a wellness practitioner’s home page: a meadow photo filling the top of the page, a small spaced-uppercase nav, a tagline and a button in the sky, the practice’s name in a warm serif spanning the full width along the bottom edge of the photo, and a square photo carrying a dashed six-stage cycle. It grew into seven pages: home, how the method works with its six stages on a ring, the practitioner, a library of articles with filters, reviews, pricing with two programs, and a contact page with the hours as rows and a drawn map of Orchard Lane. The hero dissolves into the page as you scroll, the photos drift, and the headings rise line by line.

The kit is a pale cream with a deeper cream for the cards, a near-black ink, a sage for the bands and the buttons, a near-white for the type on the photos, and a sage-green for the numerals. Gilda Display sets the wordmark, the page names, the numerals, the prices, and the quotes; Josefin Sans sets the headings at one weight and the labels and buttons at a heavier one; Jost sets the text. The practice, the people, the programs, and the prices are invented, and the photos are placeholders.

The kit as CSS

:root {
  --wrenfield-ground: #F2F3EC;
  --wrenfield-cards: #E4E7DB;
  --wrenfield-ink: #171A15;
  --wrenfield-sage: #C9D6A8;
  --wrenfield-photo-type: #F3F5EA;
  --wrenfield-numerals: #9DB36E;
  --wrenfield-display: "Gilda Display", Georgia, serif;
  --wrenfield-headings: "Josefin Sans", system-ui, sans-serif;
  --wrenfield-labels: "Josefin Sans", system-ui, sans-serif;
  --wrenfield-text: "Jost", system-ui, sans-serif;
}

The fonts are Google Fonts under the SIL Open Font License, and the colors are yours to take. The mockup is Tide's: Wrenfield is invented for design demonstration, and the pictures in it are placeholders.