The home page
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.