Surgical Tech Study App

Color Palette & Design System

Primary Brand Colors

Primary 700

#0D8E83

Dark teal - hover states

Primary 600

#0FA396

Medium teal - headings, icons

Primary 500

#11B5A4

Main brand color - primary actions

Primary 400

#3BC6B8

Light teal - accents

Primary 300

#6ED7CC

Pale teal - subtle backgrounds

Semantic Colors

Success

#2DC98A

Correct answers, positive states

Danger

#FF6B6B

Wrong answers, destructive actions

Warning

#FFC85C

Caution states, alerts

Info

#38BDF8

Informational elements

Bookmark

#FFB436

Active bookmarks, saved items

Neutral Colors

Base Background

#F6F8FA

Page backgrounds

Raised Background

#EEF2F6

Elevated surfaces

Card Background

#FAFBFC

Card backgrounds

Primary Text

#0F172A

Main body text

Secondary Text

#64748B

Supporting text, labels

Category Colors

Anatomy & Physiology

#E85D75

Microbiology

#4CAF82

Pharmacology

#4A9FE8

Sterilization and Decontamination

#8B7BC7

Cardiovascular

#E85D6B

General Surgery

#6B7280

Genitourinary

#F5B947

Neurology

#5A7C99

Ophthalmic

#FF9F5A

Orthopedic

#5BA3D4

Otorhinolaryngology

#64B5F6

Peripheral Vascular

#F08C84

Plastics and Reconstructive

#EDAD5C

Obstetrics and Gynecology

#E88A8A

Preoperative

#52C9B0

Postoperative

#F4D03F

Professional and Administrative

#B591D6

Elevation & Shadows

Raised

Cards, buttons

Emphasis

Hover states

Floating

Modals, overlays