Design system
The tokens and components behind dentalpin.in. Every page uses these names, so a change in assets/css/tokens.css updates the whole site, in light and dark mode.
Colour roles
Semantic roles map to primitive scales; components never use raw hex values.
--enamelPage--inkText, emphasis--pulpPrimary action--mintSuccess, focus--iris-600Aurora accent--hazeQuiet fillsGlass surfaces
Frosted panels sit on a soft aurora. Each has three layers: a translucent fill, a backdrop blur with extra saturation, and a one-pixel inner highlight. Browsers without blur, and people who ask for reduced transparency, get solid panels.
Cards, tiles, navigation
Sticky nav, floating chips
Emphasis: featured plan, CTA
Type scale
Bricolage Grotesque for display, Instrument Sans for text, Noto Sans for Tamil, Telugu, Devanagari, Kannada and Malayalam. Ratio 1.25.
--fs-4xlDental care in your language--fs-3xlDental care in your language--fs-2xlDental care in your language--fs-xlDental care in your language--fs-lgDental care in your language--fs-mdDental care in your language--fs-baseDental care in your language--fs-smDental care in your languageRadius and space
Spacing steps on a 4 px base (--space-1 to --space-9). Radius grows with the size of the surface.
Components
Emphasis tile
Dark glass for the one thing on a screen that matters most.