← Back to UI screens

Also for WordPress: MGD Dental Bento, the same layout as an installable block theme.

Dental website (bento) template — mobile, playful style
Theme

Dental website (bento) template — mobile, playful style

Dental website, Bento layout website template for a mobile website, designed for Fennick Dental, a fictional dental business. Shows a full home page for a family and cosmetic dental practice: tile mosaic for the hero and services, floating pill navigation, rounded and friendly. Playful style: vivid purple, Fredoka headings with Nunito, pill buttons, rounded cards and soft shadows. A complete, responsive one-page HTML template (every section, light and dark) with a DESIGN.md of light and dark colour tokens.

Open live HTML ↗ Download DESIGN.md
Pattern
Dental website
Device
Mobile
Style
Playful
Product (fictional)
Fennick Dental
Category
Dental

Spec

Colours (light)
background #faf8ff · surface #ffffff · text #1e172a · muted #675e78 · primary #8244cf · accent #b25600
Colours (dark)
background #130d1d · surface #20192c · text #f0ecf9 · muted #b4acc5 · primary #be98ff · accent #ff8f3f
Fonts
Fredoka (headings), Nunito (body), JetBrains Mono (code) · Google Fonts, under their own licences
Sections
services, process, team, FAQ, visit, footer
Light and dark
Both included; follows the system setting
Responsive
One HTML file, layout changes at 1024px, 960px and 760px; no horizontal scroll at 320px
Best for
A family or cosmetic dental practice that wants a friendly, bright look.
Not ideal for
A practice that wants a formal, reserved tone.
dental-websitemobiledentalwebsite-templatelanding-pageresponsivefaqnavigation-headerfooter
AI

Build this with your AI

Fonts: Fredoka + Nunito (Google Fonts)

Writing about this template?

More dental website templates

Dental practice website home page — web, playful (Fennick Dental)
web · playful
Dental website, Bento layout — web, playful (Fennick Dental)
web · Bento · playful
Dental practice website home page — mobile, minimal (Fennick Dental)
mobile · minimal
Dental website, Ledger layout — mobile, minimal (Fennick Dental)
mobile · Ledger · minimal
Dental practice website home page — mobile, editorial (Fennick Dental)
mobile · editorial
Dental website, Folio layout — mobile, editorial (Fennick Dental)
mobile · Folio · editorial
Dental practice website home page — mobile, brutalist (Fennick Dental)
mobile · brutalist
Dental practice website home page — mobile, luxury (Fennick Dental)
mobile · luxury
Dental practice website home page — mobile, playful (Fennick Dental)
mobile · playful
Dental practice website home page — mobile, corporate (Fennick Dental)
mobile · corporate
Dental website, Atlas layout — mobile, corporate (Fennick Dental)
mobile · Atlas · corporate
Dental practice website home page — mobile, retro (Fennick Dental)
mobile · retro
Building with an AI coding agent? Every screen here is also in the free Made Good Designs MCP server: ask Claude, Cursor or ChatGPT to 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.

Save to board