Explore MySmileEd
Emergency!
Where to look first when a tooth gets hurt or something urgent happens.
Ask Cozy
What would you like to learn?
TRY ASKING
Browse by topic
The colours, type, characters and building blocks that give MySmileEd its look and feel.
Everything below is a live Elementor element. The swatches use the real Global Colours, the type samples use the real Global Fonts, and the buttons, cards and content boxes carry the same CSS classes the rest of the site uses. Change a value in Site Settings and this page changes with it, so it cannot drift out of date.
Where each thing is edited
Colours and fonts: Elementor → Site Settings → Global Colors and Global Fonts.
Shared mse- classes: Elementor → Site Settings → Custom CSS.
Spacing, widths and breakpoints: on the container itself, under Layout.
This page is an internal reference. It carries no dental or medical guidance.
Nineteen colours are registered as Elementor Global Colours. Always pick one from the Global list rather than typing a hex value, so a later palette change reaches every page at once. Each card below states the measured contrast for text on that colour.
Ink
#5C463B
Body and heading text. 8.36:1 on Cream – passes AA.
Warm Brown
#7A6256
Secondary text. Safe on five surfaces only – see the note below.
Light Cocoa
#A98268
Icons and rules only. 3.45:1 on white, above the 3:1 non-text floor. Never a text background.
Cream Background
#FFF9EC
Page background. Ink 8.36:1 – passes AA.
Warm Ivory
#FFF4D6
Heroes and disclaimer panels. Ink 8.00:1 – passes AA.
Tooth White
#FFFFFF
Cards and secondary buttons. Ink 8.77:1 – passes AA.
Border Soft
#F1E6D2
Card borders. Ink 7.10:1 – passes AA.
Soft Gray Outline
#D8D3CF
Dashed rules. Ink 5.91:1 – passes AA.
Cozy Yellow
#FFE7A3
Cozy Tip box. Ink 7.19:1 – passes AA.
Star Yellow
#FFC94A
Primary button. Ink 5.72:1 – passes AA.
Mint Green
#AEEFD8
Crumbs Explains box. Ink 6.74:1 – passes AA.
Sky Blue
#9EDCFF
Smile Basics. Ink 5.90:1 – passes AA.
Soft Lavender
#E8D9FF
Parent Note box. Ink 6.60:1 – passes AA.
Peach
#FFD4B8
Topic cards. Ink 6.42:1 – passes AA.
Soft Blush
#FFC4C8
Topic cards. Ink 5.84:1 – passes AA.
Coral Pink
#FF9F9A
Accent and decoration only. Ink 4.46:1 – fails AA for body text.
Emergency Deep Coral
#BF3F3A
Emergency button fill and the focus ring. White 5.27:1 – passes AA.
Emergency Border
#C9524C
Emergency button border. White 4.38:1 – border use only, not text.
The one contrast rule that matters
Ink #5C463B is safe as text on every light colour in this palette. Warm Brown #7A6256 is not. Warm Brown passes on Tooth White (5.66:1), Cream (5.40:1), Warm Ivory (5.17:1), Cozy Yellow (4.64:1) and Border Soft (4.58:1) – and fails on everything else: Soft Lavender 4.26:1, Mint 4.35:1, Peach 4.14:1, Sky Blue 3.81:1, Soft Gray 3.81:1, Soft Blush 3.77:1, Star Yellow 3.70:1. Warm Brown is the kit default, so text inside a tinted container inherits it and quietly fails. If a container has a coloured background, set the text inside it to Ink. This is the rule behind the 51-page correction in Run 49.
Two families. Fredoka carries the friendly, rounded voice in headings and navigation; Nunito keeps body copy calm and readable. Both are registered as Global Fonts, so a family change is one edit in Site Settings.
Primary Heading
Fredoka 600. Used for H1 through H4.
Secondary Text
Nunito 600. Card titles, eyebrows and labels.
Body Text
Nunito 400. Paragraphs at 17-18px, line-height 1.65.
Navigation
Fredoka 500. Menu labels and button text.
Three button styles. The primary style lives in Site Settings → Buttons, so it needs no class; the other two are one class each. All three inherit the same 16/28px padding, which keeps them comfortably above the 44px tap-target floor. The buttons below are live links to real pages.
Primary
No class – this is the Site Settings button style. Ink on Star Yellow, 5.72:1.
Secondary
Class mse-btn-secondary. Ink on white with a 2px Ink border, 8.77:1.
Emergency
Class mse-btn-emergency. White on Deep Coral, 5.27:1. Noticeable but not alarming.
One base card and three variants. The base gives a white fill, a 2px Border Soft outline, a 24px radius and a 6px hover lift with a soft shadow. Variants change only the radius or the fill. Hover or tab into any card below to see the lift; it is suppressed under reduced motion.
.mse-card
The base. White, 2px Border Soft, 24px radius, 6px hover lift.
.mse-card-topic
Topic cards on the homepage and landing pages. 28px radius.
.mse-card-article
Article and guide cards. 20px radius.
.mse-card-quickhelp
Quick Help cards. 20px radius on a Warm Ivory fill.
Card grid metric
Every four-across card grid on the site uses width 23.5% desktop, 48% tablet, 100% mobile, with a 20px gap and flex-grow 0. Copy those values rather than inventing new ones – grow 1 makes the last row stretch, and anything under 23.5% leaves a ragged right edge. Do not use Elementor custom units on container Width in this version; they silently produce no CSS.
Five boxes carry the recurring voices in an article. Each is a container with one class, a coloured fill and a 6px left rule. The left rule matters: it means the box is distinguishable without relying on colour. Set the text inside every one of these to Ink.
Cozy Tip – .mse-tip-cozy
Cozy Yellow with a Star Yellow rule. Ink 7.19:1. Friendly encouragement, aimed at children.
Crumbs Explains – .mse-tip-crumbs
Mint with a Light Cocoa rule. Ink 6.74:1. The curious question-and-answer voice.
Safety alert – .mse-alert-safety
Soft alert pink with a Deep Coral rule. Ink 7.29:1. Used for what to do right now.
Parent note – .mse-note-parent
Soft Lavender with a Warm Brown rule. Ink 6.60:1. Written for the adult reading over a child’s shoulder.
Disclaimer – .mse-disclaimer
Warm Ivory with a dashed Soft Gray border, text at .95em. Warm Brown 5.17:1 – the thinnest passing margin in the system, so do not lighten this text.
Motion is slow, small and optional. Prefer Elementor Motion Effects on the widget itself; the two classes below exist only because Elementor has no looping idle animation.
These are not optional extras; they are part of the definition of a finished section. The target is WCAG AA.