Also for WordPress: MGD Fertility Signature, the same layout as an installable block theme.
Fertility clinic website template — mobile, brutalist style
Fertility clinic website home page website template for a mobile website, designed for Moonfern Fertility, a fictional fertility business. Shows a very calm fertility clinic home page for individuals and couples: navigation with a private question button, a dusk hero with a pale moon and line-drawn fern and a note that nothing has to be decided today, a list of the ways people arrive, the care pathway on a moon phase line from first conversation through tests, a plan together and a treatment cycle to what comes next including stopping or taking a break, a plain statement that the clinic does not promise outcomes, treatments in neutral plain words, a transparent cost guide table with sample prices beside an honest what is not included list, emotional support and counseling, the team with a marked credentials slot, a private first question form, and a footer. Brutalist style: high contrast, Space Grotesk, uppercase headings, thick black borders and hard offset shadows. A complete, responsive one-page HTML template (every section, light and dark) with a DESIGN.md of light and dark colour tokens.
- Pattern
- Fertility clinic website
- Device
- Mobile
- Style
- Brutalist
- Product (fictional)
- Moonfern Fertility
- Category
- Fertility
Spec
- Colours (light)
- background
#f8f8f9· surface#ffffff· text#202129· muted#60636d· primary#7c6700· accent#6572ee - Colours (dark)
- background
#0d0d11· surface#1a1b21· text#f2f2f3· muted#afb1b9· primary#caa900· accent#a5b4ff - Fonts
- Space Grotesk (headings and body), JetBrains Mono (code) · Google Fonts, under their own licences
- Sections
- hero, arrive, your care, honest, treatments, costs, support, our team, ask a private question, footer
- Light and dark
- Both included; follows the system setting
- Responsive
- One HTML file, layout changes at 1180px, 1024px, 960px and 760px; no horizontal scroll at 320px
- Best for
- An outpatient fertility clinic that wants a bold, high-contrast look with hard edges.
- Not ideal for
- A clinic that wants a soft, gentle look.
Build this with your AI
Add the Made Good Designs library to your assistant once. Then ask for UI references, brand palettes, font pairings and design tokens in any chat.
https://madegooddesigns.com/inspiration/mcp?ref=ui-fertility-website-templateSettings → Connectors → Add custom connector → paste the URL.
Settings → Apps & Connectors → Advanced → Developer mode → Create → paste the URL.
One click, then confirm in Cursor.
One click, then confirm in VS Code (Copilot agent mode).
claude mcp add --transport http made-good-designs https://madegooddesigns.com/inspiration/mcp?ref=ui-fertility-website-template
gemini mcp add --transport http made-good-designs https://madegooddesigns.com/inspiration/mcp?ref=ui-fertility-website-template
Add this to the app's MCP config (Windsurf: mcp_config.json).
Fonts: Space Grotesk (Google Fonts)
Prompt copied: paste it into the chat that just opened.
Writing about this template?
More fertility clinic website templates
search_ui_screens (e.g. “billing settings, editorial style”), get_ui_flow for a whole journey, and get_ui_screen_code to pull the HTML and DESIGN.md straight into your project.