DENTORA — BRAND & UI LIBRARY
Dentora Design System
Dentora
Brand & interface guidelines
A practical visual reference for building consistent, responsive dental-care experiences across the Dentora website.
/design-system
HOW TO USE THIS GUIDE
Use this page as the single source of truth when creating or updating Dentora pages. Reuse the approved color tokens, Sora typography, components, and layout patterns to keep every experience consistent.
01. Color
Dentora uses a structured neutral palette with a blue brand accent. Reuse the existing color styles and keep token references attached to all design elements.
Neutral 00
rgb(255, 255, 255)
Neutral 01
rgb(243, 243, 243)
Neutral 02
rgb(244, 244, 244)
Neutral 03
rgb(238, 238, 238)
Neutral 04
rgb(230, 230, 230)
Neutral 05
rgb(218, 218, 218)
Neutral 06
rgb(204, 204, 204)
Neutral 07
rgb(189, 189, 189)
Neutral 08
rgb(174, 174, 174)
Neutral 09
rgb(153, 153, 153)
Neutral 10
rgb(96, 95, 95)
Neutral 11
rgb(26, 26, 26)
Neutral 12
rgb(0, 0, 0)
White 12
rgba(255,255,255,.12)
White 60
rgba(255,255,255,.6)
Brand color
rgb(52, 91, 214)
02. Typography
Sora is the primary typeface for Dentora. Use the existing responsive text presets to create a clear hierarchy across headings, body copy, labels, navigation, and buttons.
H1 L
Heading 1 — primary display
The quick brown fox jumps over the lazy dog.
H1 S
Heading 1 — compact display
The quick brown fox jumps over the lazy dog.
H2 L
Heading 2 — large section
The quick brown fox jumps over the lazy dog.
H2 S
Heading 2 — standard section
The quick brown fox jumps over the lazy dog.
H3
Heading 3 — subsection
The quick brown fox jumps over the lazy dog.
H4
Heading 4 — card heading
The quick brown fox jumps over the lazy dog.
H5
Heading 5 — small heading
The quick brown fox jumps over the lazy dog.
H6
Heading 6 — utility heading
The quick brown fox jumps over the lazy dog.
Body L (Medium)
Supporting lead paragraph
The quick brown fox jumps over the lazy dog.
Body M
Default body copy
The quick brown fox jumps over the lazy dog.
Body M (Medium)
Emphasized body copy
The quick brown fox jumps over the lazy dog.
Body S
Small supporting text
The quick brown fox jumps over the lazy dog.
Button
Button labels
The quick brown fox jumps over the lazy dog.
Label L
Large labels
The quick brown fox jumps over the lazy dog.
Label S
Small labels
The quick brown fox jumps over the lazy dog.
Nav S
Navigation labels
The quick brown fox jumps over the lazy dog.
Nav L
Large navigation labels
The quick brown fox jumps over the lazy dog.
CMS H1
CMS article heading
The quick brown fox jumps over the lazy dog.
CMS H2
CMS subheading
The quick brown fox jumps over the lazy dog.
CMS Body S Content
CMS article body
The quick brown fox jumps over the lazy dog.
03. Buttons & controls
Use the existing button, badge, and interactive components. Preserve their variants, controls, states, interactions, and responsive behavior.
Badge
Dental care
Services feature
(04)
Veneers
Medora Editorial
July 12, 2026
A healthier smile starts here
Services card
01
Aesthetic dentistry
Natural-looking enhancements that refine the shape, size, and color of your smile.
Doctor card
Accordion
How often should I visit the dentist?
Framer is a design tool that allows you to design websites on a freeform canvas, and then publish them as websites with a single click.
04. Component library
These reusable Dentora components are the approved building blocks for common interface patterns. Reuse them before creating new components.
Button · Navigation · Badge · About Card · Services Feature · Services Card · Doctor Card · Testimonials · Scroll Interaction · Blog Card · Accordion · Social Logo · Footer · Philosophy Card · Logo · Card Label · Button 2 · Load More · Load More 3 · Badge 2
05. Sections & page patterns
Use the existing Dentora page compositions as references. Adapt these patterns to new content while keeping the same visual language and component behavior.
Shared website shell: Main page layout template with consistent navigation, footer, and global spacing.
Home: welcoming dental-care introduction, key treatments, trust signals, testimonials, latest articles, and appointment CTA.
Services: treatment overview, service cards, clear explanations, patient benefits, and FAQs.
About: Dentora story, care philosophy, values, clinic experience, and team information.
Doctor: practitioner profile, credentials, areas of expertise, and appointment CTA.
Blog: educational dental-care articles, CMS-driven listing, article details, and related content.
Contact: clinic location, contact information, enquiry form, and appointment guidance.
06. Layout & spacing
Use the existing Main page template and responsive breakpoints. Keep full-width section backgrounds separate from the centered content container, and follow the spacing rhythm already established across the website.
Desktop
1200px
Primary content width
Tablet
810px
Tablet breakpoint width
Phone
390px
Phone breakpoint width
Page template
Main page
Shared navigation and footer structure
Content alignment
Centered
Keep section content aligned to the shared page grid
Section rhythm
Consistent vertical spacing
Use the spacing rhythm already present on Home, Services, About and Contact
07. Framer Agent rules
Apply these standards whenever creating or updating a Dentora page, section, component, interaction, or CMS-driven layout.
01 — Preserve the system
Start by inspecting the relevant existing page, component and styles. Extend the current design; do not replace the visual direction.
02 — Reuse components
Use the existing Button, Badge, Services, Doctor, Blog, Accordion, Navigation and Footer components wherever they fit. Do not detach instances or rebuild a matching component inline.
03 — Reuse typography
Use Sora and the existing text presets shown above. Do not introduce a new font or create near-duplicate type styles.
04 — Reuse color tokens
Use the existing Neutral, White and Brand color tokens. Keep token references attached. Do not invent new brand colors or hard-code values when a token exists.
05 — Follow page structure
Use the Main page layout template for shared navigation and footer. Keep page-specific content between the shared chrome.
06 — Responsive behavior
Respect the current Desktop, Tablet and Phone widths. Keep content flexible, avoid fixed-width text, and verify layout and legibility at every available breakpoint.
07 — Dental content tone
Use clear, reassuring, patient-friendly language. Keep headings concise and explain treatments in plain language without unsupported medical promises.
08 — CMS consistency
Use the existing Services, Blog and Doctor collections and their established bindings. Preserve collection fields, item slugs and existing content unless explicitly asked to change them.
09 — Interaction quality
Preserve existing hover, pressed, scroll and accordion interactions. Ensure controls remain usable on touch and keyboard where applicable.
10 — Before completion
Check spacing, alignment, overflow, typography, component variants and responsive layouts. Capture and review a screenshot of every major page change. Fix visible issues before finishing.
Keep the Dentora system consistent
When Dentora’s brand styles, components, or page patterns evolve, update this guide so future design and Framer Agent work always follows the latest approved system.