Design system
Ostrom Dental design system
Colors, type, components and ready sections. Use this page as your reference when you edit with Framer AI or by hand. It is hidden from search engines.
01
Set your practice details
Ask the practice-setup skill. It changes the name, address, phone, hours, state rules and Medicaid/CHIP lines on every page, in the footer and in the structured data.
02
Swap photos and people
Replace each Sample photo, and edit the team in CMS > Team. Use only photos you have the right to show.
03
Set services, fees and plans
Services live in CMS > Services: fee ranges, codes, times and booking links. Plans and membership use the insurance-update and membership-plan skills.
04
Check before you publish
Run claims-check and search-check. They list what is still marked Sample and what your state may require.
Colors
Fifteen color styles, named by job.
Change a color style once and every page follows. Keep text on dark sections in the On Dark styles.
Background
#F5F4F2
Page background
Surface
#FFFFFF
Cards, forms, white sections
Surface Muted
#ECE6EA
Alternate sections
Text Primary
#22191F
Headings and body text
Text Secondary
#564C53
Supporting text
Accent
#7A1B4D
Main buttons and highlights
Accent Hover
#5E133B
Button hover
Accent Soft
#FBC6A6
Buttons on dark, today’s hours
Background Dark
#2B1424
Hero panel, visit band, footer
Text On Dark
#F7F1F3
Text on dark sections
Text On Dark Secondary
#C9B9C2
Supporting text on dark
Border
#DDD5DA
Card borders and rules
Border On Dark
18% white
Rules on dark sections
Input Border
#857A82
Form fields
Error
#A3312B
Form errors
Type
Sentient for headings, Supreme for text.
Both are by the Indian Type Foundry, from Fontshare under the ITF FFL license, which allows commercial use. Each style has its own tablet and phone sizes.
Display
Sentient 700 · 54 px · Home hero
Family dentistry on Butler Street.
Heading 1
Sentient 700 · 56 px · one per page
Book a visit
Heading 2
Sentient 680 · 46 px · section titles
Three ways to pay.
Card Title Large
Sentient 650 · 32 px · cards, forms
Request a visit
Heading 3
Sentient 650 · 24 px · small titles
Digital X-rays
Visit Number
Sentient 700 · 132 px · street number only
3600
Amount
Sentient 700 · 46 px · prices
$189
Estimate Total
Sentient 700 · 38 px · estimate share
$43.00
Quote
Sentient 600 · 22 px · quotes
“We explain first, then we start.”
Price Row
Sentient 650 · 20 px · service rows
$121 to $160
Ledger Value
Sentient 650 · 21 px · facts
1996
Eyebrow
Supreme 600 · 13 px · above headings
INSURANCE & COSTS
Body Large
Supreme 400 · 19 px · intros
About 75 minutes. You leave with a plan.
Body
Supreme 400 · 17 px · paragraphs
We file your claim for you.
Label
Supreme 600 · 15 px · labels, numbers
Preferred day
Small
Supreme 400 · 14 px · fine print
Msg & data rates may apply.
Nav Link
Supreme 500 · 15.5 px · menu
Insurance & costs
Strip
Supreme 400 · 14 px · top strip
Every cost in writing before any treatment
Button
Supreme 600 · 16.5 px · buttons
Book a visit
Button Small
Supreme 600 · 15 px · small buttons
See times
Tag
Supreme 600 · 11 px · tags
SAMPLE
Paper Body
Supreme 400 · 13.5 px · estimate paper
Cleaning, adult
Paper Strong
Supreme 600 · 13.5 px · estimate paper
Your estimated share
Paper Label
Supreme 600 · 10 px · estimate paper
CDT CODE
Paper Fine
Supreme 400 · 11.5 px · estimate paper
Sample estimate. Your share is on your written estimate.
Logo Wordmark
Sentient 700 · 26 px · logo
Ostrom
Logo Tagline
Supreme 600 · 10.5 px · logo
DENTAL
Components
Every component and its variants.
Edit a component once and every copy updates. Hover variants run on their own and are left out here.
Button
Filled for the main action, outlined next to it. Call is always outlined. Small variants for cards; On Dark variants for dark sections.
Button on dark
The same pair for dark sections.
Logo
Wordmark with the arch monogram. Default on light, On Dark in the footer.
Logo on dark
Arch Monogram
The arch from the logo, in plum or apricot, three sizes.
O
O
O
O
O
Sample Tag
Marks demo content. Remove it once the content is real.
Sample
Sample Tag on dark
Sample
Age Chip
Who a service is for. Shown on service rows and pages.
Adults
Insurance Line
One line under a hero or a button about plans you take.
In network with Delta Dental PPO, UPMC Dental Advantage, United Concordia and MetLife PDP.
No insurance? Membership from $29 a month.
Sample
Insurance Line on dark
In network with Delta Dental PPO, UPMC Dental Advantage, United Concordia and MetLife PDP.
No insurance? Membership from $29 a month.
Sample
Service Row
A treatment with time, fee range and ages. Compact on tablet and phone.
Estimate Line
Lines of the estimate paper. Header and Line; Compact drops the code and fee columns.
D0150
Exam, new patient
$98
$98
$0
Code
Treatment
Fee
Plan pays
You pay
Exam, new patient
$98
$0
Treatment
Plan pays
You pay
Estimate Paper
The signature piece: a written estimate with your share. Hero, Full and Phone variants.
O
Ostrom
Dental
Treatment estimate
No. 1110-0418 · Sample
Code
Treatment
Fee
Plan pays
You pay
D0150
Exam, new patient
$98
$98
$0
D1110
Cleaning, adult
$121
$121
$0
D2391
Tooth-colored filling
one surface, tooth #30
$215
$172
$43
Your estimated share
Fee $434 · Plan pays $391
$43.00
Estimate, not a bill. Based on your plan’s benefits on the date above. Sample prices.
Reviewed with you by
Linda K., office manager
IN WRITING
BEFORE
WE START
O
Ostrom
Dental
Treatment estimate
No. 1110-0418 · Sample
Patient
New adult patient
Plan
Delta Dental PPO
Date
Nov 10, 2026
X-rays: sent by your last dentist
Code
Treatment
Fee
Plan pays
You pay
D0150
Exam, new patient
$98
$98
$0
D1110
Cleaning, adult
$121
$121
$0
D2391
Tooth-colored filling
one surface, tooth #30
$215
$172
$43
Your estimated share
Fee $434 · Plan pays $391
$43.00
Estimate, not a bill. Based on your plan’s benefits on the date above. Sample prices.
Reviewed with you by
Linda K., office manager
IN WRITING
BEFORE
WE START
O
Ostrom
Dental
Treatment estimate
No. 1110-0418 · Sample
Treatment
Plan pays
You pay
Exam, new patient
$98
$0
Cleaning, adult
$121
$0
Tooth-colored filling
one surface, tooth #30
$172
$43
Your estimated share
Fee $434 · Plan pays $391
$43.00
Estimate, not a bill. Based on your plan’s benefits on the date above. Sample prices.
Reviewed with you by
Linda K., office manager
Next Visit Card
The next open new-patient time, with Who’s coming. Phone variant has no button.
O
Next new-patient visit
Thu, Nov 12 · 9:40 AM
Sample time
Week Band
Opening hours for the week, today highlighted.
Mon
7:30 to 5
Tue
7:30 to 5
Wed
7:30 to 7
Thu
7:30 to 5
Fri
7:30 to 2
Sat
8 to 1
Sun
Closed
FAQ Item
Question and answer. Open shows the answer; it toggles on click.
How accurate is the estimate?
How accurate is the estimate?
We build it from your plan's current benefits.
Form Button
Submit button for forms, with Loading, Success and Error states the form switches to.
Top Strip, Navigation, Footer and Mobile Action Bar
These sit in the Main layout template, so every page shares them. The Spanish page uses Main ES with the ES versions of each. Change the menu or footer there, not on a page.
Examples
Ready sections from the site.
Copy a section, paste it on another page and change the words. Tablet and phone settings come with it.
When to use: costs and payment choices: Home, Insurance & payment or a service page.
Insurance & costs
Three ways to pay. Every cost in writing first.
Insurance
We file your claim.
In network with these PPO plans. With other PPO plans we are out of network, and we still file the claim for you.
Delta Dental PPO
In network
UPMC Dental Advantage
In network
United Concordia
In network
MetLife PDP
In network
Sample list. Plans change, so call or text to confirm before your visit. Last updated Nov 2026.
No insurance
Ostrom membership
$29
a month, adults
Kids under 18
$19 a month
Two exams and cleanings a year
Included
Routine X-rays
Included
Fillings, crowns and more
15% off
Sample prices. This membership is not dental insurance and does not replace it. Cannot be combined with insurance. See plan terms.
Payment plans
Spread the cost.
For crowns, implants and aligners. Apply online and see the answer before you decide.
Lender
Financing partner (Sample provider)
Apply
Online or at the front desk
Sample provider. Terms come from the lender.
No insurance, or paying yourself? You have the right to a Good Faith Estimate of your costs. Ask us for one before you book.
When to use: steps with times: the first visit, or how a treatment works.
New patients
Your first visit, line by line.
About 75 minutes. You leave with a plan and a written estimate, and nothing is done that day unless you say yes.
Your dentist shows you the X-ray before talking about treatment.
Sample photo
Book the family in one trip
Who’s coming?
Me
My child
My parent
Someone else
Next back-to-back new-patient times
Thu, Nov 12 · 9:40 and 10:40 AM
Sample
01
Pick a time online or call
Choose any open new-patient time. Linda checks your benefits before you arrive.
2 minutes
02
Fill out forms on your phone
We text you a secure link. Health questions stay in the secure form, never in email.
10 minutes
03
Exam, X-rays and cleaning
Your dentist walks you through what they see, tooth by tooth.
About 75 minutes
04
Your estimate in writing
Fee, plan share and your share on every line. Take it home and decide.
Before any treatment
Bring: photo ID, your insurance card, and a list of any medicines you take.
New patient visit, no insurance: $189
Sample offer
Exam, full set of X-rays and cleaning. Regular fee $330 to $380. New patients without dental insurance only. Not valid for patients whose care is paid by Medicare, Medicaid/CHIP or other government programs. Cannot be combined with membership. Expires Dec 31, 2026.
When to use: a photo next to a short list of promises: comfort, kids, or a service story.
We show you first, then we start.
Sample photo
Comfort
Nervous about the dentist? Tell us.
Many of our patients put off a visit for years. Nobody here will lecture you about it. Bringing a nervous kid? Tell us when you book and we plan a slower visit.
We explain before we start.
You see the X-ray and the plan first.
Raise your hand and we stop.
Every time, no questions asked.
We numb carefully.
We wait until you are numb, and check before we begin.
Nitrous oxide if you want it.
Dr. Ostrom holds a Pennsylvania permit (Sample).
No surprise bills.
Your share is on paper before any treatment.
When to use: questions and answers on any page.
Questions
Before you book.
Still not sure? Text us your plan name and we will check it for you.
How accurate is the estimate?
We build it from your plan’s current benefits. If your plan pays less than expected, we call you before billing the difference. If treatment changes in the chair, we stop and tell you the new cost first.
Do you take my insurance?
What if I don’t have insurance?
Do you see kids?
What counts as a dental emergency?