# Bright Dental Cambridge design system

> Bright Dental Cambridge design system measured from bright-dental-beryl.vercel.app: Inter font, 16 color hex codes, type scale and spacing. Free DESIGN.md file.

Canonical page: https://sitepeel.dev/design-md/bright-dental-beryl.vercel.app/

Bright Dental Cambridge’s website (bright-dental-beryl.vercel.app) uses the Inter font and #11BCFF as its main color on a white background. Measured by Sitepeel on November 6, 2026.

## What font does Bright Dental Cambridge use?

Bright Dental Cambridge uses Inter (weight 600) and Inter Tight (weights 400, 500 and 700), with IBM Plex Mono for code on bright-dental-beryl.vercel.app. Page titles are 105px at weight 600 (44px on phones) and body text is 14px. Measured on November 6, 2026.

- Inter (weights 600)
- Inter Tight (weights 400, 500, 700)
- IBM Plex Mono (weights 400)

## Bright Dental Cambridge colors: palette and hex codes

Bright Dental Cambridge’s main colors are #FFFFFF (white) for the background, #0B1622 (deep blue) for text and #11BCFF (vivid cyan) as the main accent, with #2BA77B (teal) as another accent. Measured on November 6, 2026.

- #FFFFFF: white
- #0B1622: deep blue
- #000000: near black
- #445365: dark blue
- #5E6A78: blue
- #EEF9FF: cool snow
- #F3F5F8: snow
- #E3F6FF: pale cyan

## What is Bright Dental Cambridge built with?

Bright Dental Cambridge’s website (bright-dental-beryl.vercel.app) is built with Vercel, Lenis and Google Fonts. Measured on November 6, 2026.

- Animation & 3D: Lenis
- Hosting & CDN: Vercel
- Fonts & icons: Google Fonts

## Questions and answers

### What font does Bright Dental Cambridge use?

Bright Dental Cambridge’s website uses Inter (weight 600) and Inter Tight (weights 400, 500 and 700), with IBM Plex Mono for code. Page titles are 105px at weight 600 (44px on phones) and body text is 14px. Measured on November 6, 2026.

### What are the Bright Dental Cambridge colors and hex codes?

On bright-dental-beryl.vercel.app: #FFFFFF (white) for the background, #0B1622 (deep blue) for text and #11BCFF (vivid cyan) as the main accent, with #2BA77B (teal) as another accent. The color palette above lists all 16 colors with their hex codes and where each one is used.

### What is the Bright Dental Cambridge design system?

The design system on this page is bright-dental-beryl.vercel.app’s, as measured on November 6, 2026: Inter type, #11BCFF as the main color and pill-shaped corners, written down as a DESIGN.md. It is not Bright Dental Cambridge’s own documentation.

### What is Bright Dental Cambridge built with?

Bright Dental Cambridge’s website (bright-dental-beryl.vercel.app) is built with Vercel, Lenis and Google Fonts. Measured on November 6, 2026.

### What is the Bright Dental Cambridge DESIGN.md?

A plain-text file with Bright Dental Cambridge’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Bright Dental Cambridge’s official design system?

No. Sitepeel measured it from bright-dental-beryl.vercel.app’s public page on November 6, 2026. It is an independent analysis, not made or approved by Bright Dental Cambridge.

### Can I use Bright Dental Cambridge’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Bright Dental Cambridge’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/bright-dental-beryl.vercel.app/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Bright Dental Cambridge.

## The DESIGN.md file

```markdown
---
version: alpha
name: Bright Dental Cambridge
description: "Light interface measured from bright-dental-beryl.vercel.app: Inter type with Inter Tight, vivid cyan accents, tonal surfaces and pill-shaped controls."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#0B1622"
  on-background: "#0B1622"
  on-surface-strong: "#000000"
  on-surface-variant: "#445365"
  on-surface-muted: "#5E6A78"
  surface-container-low: "#EEF9FF"
  surface-container: "#F3F5F8"
  surface-container-high: "#E3F6FF"
  surface-container-highest: "#DFE4EA"
  overlay: "#0B16228C"
  overlay-strong: "#11BCFF80"
  outline: "#E2E7EC"
  outline-variant: "#D6DDE4"
  primary: "#11BCFF"
  on-primary: "#000000"
  secondary: "#2BA77B"
typography:
  headline-display:
    fontFamily: Inter
    fontSize: 105px
    fontWeight: 600
    lineHeight: 0.89
    letterSpacing: -0.05em
  headline-lg:
    fontFamily: Inter Tight
    fontSize: 54px
    fontWeight: 500
    lineHeight: 1.06
    letterSpacing: -0.035em
  headline-md:
    fontFamily: Inter Tight
    fontSize: 24px
    fontWeight: 700
    letterSpacing: 0.013em
  headline-sm:
    fontFamily: Inter Tight
    fontSize: 22px
    fontWeight: 500
    letterSpacing: -0.02em
  title-lg:
    fontFamily: Inter Tight
    fontSize: 20px
    fontWeight: 500
    letterSpacing: -0.015em
  body-md:
    fontFamily: Inter Tight
    fontSize: 14px
    fontWeight: 400
    letterSpacing: 0.023em
  body-lg:
    fontFamily: Inter Tight
    fontSize: 16px
    fontWeight: 400
    letterSpacing: 0.02em
  body-sm:
    fontFamily: Inter Tight
    fontSize: 13px
    fontWeight: 400
    letterSpacing: 0.025em
  caption:
    fontFamily: Inter Tight
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 0.027em
  label-md:
    fontFamily: Inter Tight
    fontSize: 15px
    fontWeight: 400
    letterSpacing: 0.021em
  label-sm:
    fontFamily: Inter Tight
    fontSize: 14px
    fontWeight: 500
    letterSpacing: 0.023em
  code:
    fontFamily: IBM Plex Mono
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 0.027em
  headline-display-mobile:
    fontFamily: Inter
    fontSize: 44px
    fontWeight: 600
    lineHeight: 0.89
    letterSpacing: -0.05em
  headline-lg-mobile:
    fontFamily: Inter Tight
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.06
    letterSpacing: -0.035em
rounded:
  xs: 3px
  sm: 12px
  md: 20px
  lg: 24px
  xl: 200px
  full: 9999px
spacing:
  xs: 3px
  sm: 8px
  md: 10px
  lg: 18px
  xl: 64px
  gutter: 8px
  section: 112px
  margin: 32px
  container: 1280px
components:
  button-outline:
    textColor: "{colors.background}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 0px 20px
    height: 44px
  button-ghost:
    textColor: "{colors.background}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 0px 20px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.md}"
    padding: 0px
  link:
    textColor: "{colors.on-surface}"
---

# Bright Dental Cambridge Design System

## Overview

Bright Dental Cambridge describes itself as: “Bright Dental Cambridge: implants, crowns, cleaning, whitening and more, with onsite dental technicians. Your first consultation is free.” The interface is light, built on **White (#FFFFFF)** with **Deep Blue (#0B1622)** text, and **Vivid Cyan (#11BCFF)** as the main accent.

Type is set in **Inter** and **Inter Tight**, with **IBM Plex Mono** for code. Headlines run large with tight negative tracking; body text is 14px. Depth comes from soft drop shadows. Controls are pill-shaped.

Measured from [bright-dental-beryl.vercel.app](https://bright-dental-beryl.vercel.app/) on November 6, 2026 at 1440×900 and 390×844 from 397 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 16 roles, plus gradient stops #0B6AA8, #0A3557, #0C4470.

- **White (#FFFFFF):** Page background, seen 34 times. Token `background`, CSS `--cream-strong`.
- **Deep Blue (#0B1622):** Primary text and headings, seen 78 times. Token `on-surface`, CSS `--strip-ink`.
- **Near Black (#000000):** Headings and emphasis, seen 2 times. Token `on-surface-strong`.
- **Dark Blue (#445365):** Secondary text, seen 26 times. Token `on-surface-variant`.
- **Blue (#5E6A78):** Muted text and metadata, seen 21 times. Token `on-surface-muted`.
- **Cool Snow (#EEF9FF):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Snow (#F3F5F8):** Cards and panels, seen 7 times. Token `surface-container`, CSS `--strip-bg`.
- **Pale Cyan (#E3F6FF):** Hover and pressed fills, seen 5 times. Token `surface-container-high`.
- **Cool Mist (#DFE4EA):** Highest raised elements, seen 2 times. Token `surface-container-highest`.
- **Deep Blue 55% (#0B16228C):** Translucent fill for cards and controls, seen 10 times. Token `overlay`.
- **Vivid Cyan 50% (#11BCFF80):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **Cool Mist (#E2E7EC):** Borders and dividers, seen 10 times. Token `outline`.
- **Cool Silver (#D6DDE4):** Secondary dividers, seen 5 times. Token `outline-variant`.
- **Vivid Cyan (#11BCFF):** Brand accent (CSS variable), seen 65 times. Token `primary`, CSS `--accent`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Teal (#2BA77B):** Accent, seen 1 time. Token `secondary`.

## Typography

**Inter**, **Inter Tight** and **IBM Plex Mono** (monospace) share the interface. Fallback stack: `Inter, Inter Tight, system-ui, sans-serif`.

- **headline-display:** Inter 105px at weight 600, line height 0.89, tracking -0.05em (44px on mobile). Page title (h1).
- **headline-lg:** Inter Tight 54px at weight 500, line height 1.06, tracking -0.035em (34px on mobile). Section headings (h2).
- **headline-md:** Inter Tight 24px at weight 700, tracking 0.013em. Sub-section headings.
- **headline-sm:** Inter Tight 22px at weight 500, tracking -0.02em. Card and feature titles.
- **title-lg:** Inter Tight 20px at weight 500, tracking -0.015em. Small titles.
- **body-md:** Inter Tight 14px at weight 400, tracking 0.023em. Body text.
- **body-lg:** Inter Tight 16px at weight 400, tracking 0.02em. Lead paragraphs.
- **body-sm:** Inter Tight 13px at weight 400, tracking 0.025em. Secondary and small text.
- **caption:** Inter Tight 12px at weight 400, tracking 0.027em. Captions and fine print.
- **label-md:** Inter Tight 15px at weight 400, tracking 0.021em. Buttons, navigation and labels.
- **label-sm:** Inter Tight 14px at weight 500, tracking 0.023em. Small labels and badges.
- **code:** IBM Plex Mono 12px at weight 400, tracking 0.027em. Code and technical values.

## Layout

Spacing does not follow a strict grid: 57% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 3px, sm 8px, md 10px, lg 18px, xl 64px.
- **Sections:** 112px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1280px.
- **Page margin:** 32px on each side of full-width sections.
- **Breakpoints:** 480px, 560px, 600px, 720px, 860px, 861px, 1100px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(11, 22, 34, 0.18) 0px 6px 20px 0px`
- `rgb(255, 255, 255) 0px 0px 0px 3px, rgba(4, 22, 40, 0.5) 0px 4px 10px 0px`
- `rgba(4, 22, 40, 0.45) 0px 14px 32px 0px, rgba(4, 22, 40, 0.2) 0px 2px 6px 0px`

Hairline rings and inset highlights also appear: `rgba(43, 167, 123, 0.18) 0px 0px 0px 3px`.

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 132 elements.
- **sm (12px):** 36 elements.
- **md (20px):** 20 elements.
- **xs (3px):** 16 elements.
- **lg (24px):** 16 elements.
- **xl (200px):** 8 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-outline (“Book Appointment”):** transparent fill, #FFFFFF text, 14px/500, 999px radius, padding 0px 20px, border 1px solid #FFFFFF73.
- **button-ghost (“Book Appointment”):** transparent fill, #FFFFFF text, 14px/500, 999px radius, padding 0px 20px, border 1px solid #FFFFFF73.
- **card:** #FFFFFF fill, #0B1622 text, 16px/400, 20px radius, padding 0px.
- **link:** transparent fill, #0B1622 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page and lift surfaces in small steps: #EEF9FF, #F3F5F8, #E3F6FF, #DFE4EA.
- Do keep text in 4 levels: #0B1622, #000000, #445365, #5E6A78.
- Do use #11BCFF as the brand accent: header, logo and key highlights.
- Do set headlines in Inter with tight tracking (-0.05em).
- Do reuse the measured spacing steps (8px, 10px, 18px).
- Do make buttons and chips fully rounded (9999px); most other elements use 12px corners.
- Don't introduce new font families beyond Inter, Inter Tight and IBM Plex Mono.
- Don't use #11BCFF for large backgrounds or body text.
- Don't make interface transitions slower than 0.6s.

## Motion

Interface transitions are quick: 0.2s, 0.3s, 0.6s, 0.25s. Longer ambient animations run 0.8s, 0.9s, 2.4s.

- **Easing:** `ease`, `cubic-bezier(0.22, 1, 0.36, 1)`, `ease-out`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/bright-dental-beryl.vercel.app/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```