Good morning, Alex!

You have 3 upcoming appointments this month.

Upcoming Appointments

Book New

Dr. Emily Carter

General Medicine

Apr 10, 2026

10:00 AM · In-person

Dr. Michael Kim

Cardiology

Apr 15, 2026

2:30 PM · Telemedicine

Dr. Aisha Patel

Dermatology

Apr 22, 2026

11:00 AM · In-person

Recent Lab Results

Complete Blood Count

Apr 2, 2026

Normal

Lipid Panel

Mar 28, 2026

Review needed

Metabolic Panel

Mar 28, 2026

Normal

Theme Config

Edit the CSS custom properties below and click Apply to see changes live. Copy the config to use in your own project.

:root {
  /* Colors — calming blue/teal, accessible */
  --background: 0 0% 99%;
  --foreground: 210 15% 12%;
  --card: 0 0% 100%;
  --card-foreground: 210 15% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 210 15% 12%;
  --primary: 199 89% 38%;
  --primary-foreground: 0 0% 100%;
  --secondary: 195 20% 96%;
  --secondary-foreground: 195 10% 40%;
  --accent: 199 40% 92%;
  --accent-foreground: 199 89% 28%;
  --muted: 210 10% 96%;
  --muted-foreground: 210 8% 45%;
  --destructive: 0 84% 50%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 71% 35%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 210 15% 12%;
  --border: 210 10% 91%;
  --input: 210 10% 91%;
  --ring: 199 89% 38%;
  --chart-1: 199 89% 38%;
  --chart-2: 142 71% 35%;
  --chart-3: 38 92% 50%;
  --chart-4: 280 50% 50%;
  --chart-5: 340 55% 50%;

/* Sidebar */
  --sidebar-background: 199 20% 97%;
  --sidebar-foreground: 210 15% 12%;
  --sidebar-primary: 199 89% 38%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 199 40% 92%;
  --sidebar-accent-foreground: 199 89% 28%;
  --sidebar-border: 210 10% 91%;
  --sidebar-ring: 199 89% 38%;

/* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

/* Shadows */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.03);
  --shadow-lg: 0 6px 10px -2px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.03);
  --shadow-xl: 0 12px 20px -4px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.03);

/* Glass & overlay */
  --overlay-opacity: 0.5;
  --backdrop-blur: 8px;
  --glass-bg: rgba(252, 252, 253, 0.8);
  --glass-border: rgba(255, 255, 255, 0.15);

/* Spacing & density — generous spacing for readability */
  --spacing-scale: 1.1;
  --container-max-width: 1280px;
  --container-padding: 2rem;
  --card-padding: 1.75rem;
  --input-height: 2.75rem;
  --button-height: 2.5rem;
  --section-gap: 5rem;

/* Typography tokens */
  --letter-spacing-tighter: -0.04em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.05em;
  --line-height-tight: 1.3;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.75;
  --heading-weight: 700;
  --heading-letter-spacing: -0.02em;
  --heading-line-height: 1.2;

/* Shape */
  --radius: 0.5rem;
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  --avatar-radius: 9999px;
  --badge-radius: 9999px;
  --button-radius: 0.5rem;
  --input-radius: 0.5rem;
  --card-radius: 0.625rem;
  --tooltip-radius: 0.375rem;

/* Component shadows */
  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.03);
  --dropdown-shadow: 0 6px 10px -2px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.03);
  --dialog-shadow: 0 12px 20px -4px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.03);
  --button-shadow: none;

/* Borders & dividers */
  --border-width: 1px;
  --border-style: solid;
  --divider-style: solid;
  --divider-opacity: 0.12;

/* Inputs */
  --input-style: bordered;
  --input-border-on-focus: 0;
  --placeholder-opacity: 0.5;

/* Buttons */
  --button-style: filled;
  --button-weight: 500;
  --hover-effect: darken;
  --active-effect: scale-down;
  --disabled-opacity: 0.5;

/* Links */
  --link-style: color-only;
  --link-weight: inherit;

/* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-style: ring;

/* Icons */
  --icon-style: outlined;
  --icon-stroke-width: 1.5;
  --icon-size: 1.25rem;

/* Scrollbar */
  --scrollbar-style: thin;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(0, 0, 0, 0.12);

/* Selection */
  --selection-background: 199 89% 38%;
  --selection-foreground: 0 0% 100%;

/* Tooltips */
  --tooltip-style: dark;

/* Tables */
  --table-style: clean;
  --table-header-weight: 600;

/* Loading */
  --spinner-style: circle;

/* Motion */
  --transition-duration: 150ms;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-speed: fast;
  --hover-transition: 150ms ease;
  --enter-transition: 200ms ease-out;
  --exit-transition: 150ms ease-in;
}

RBuilt with Refraction UI