Design System
Salmon Creek Plastic Surgery
Living reference for all design primitives — colors, typography, spacing, components, and patterns used across the site.
Logo
Colors
Primary
Lightest
--color-primary-l-4 #e6dce7 Lighter
--color-primary-l-3 #ccb8cf Light
--color-primary-l-1 #9d72a3 Base
--color-primary #86548c Dark
--color-primary-d-1 #6d4372 Darker
--color-primary-d-2 #553558 Darkest
--color-primary-d-3 #3d2640 Secondary
Lightest
--color-secondary-l-4 #d5e0df Lighter
--color-secondary-l-3 #abc1bf Light
--color-secondary-l-1 #6b8d89 Base
--color-secondary #51736f Dark
--color-secondary-d-1 #415c59 Darker
--color-secondary-d-2 #324845 Accent
Lightest
--color-accent-l-4 #edf7f7 Lighter
--color-accent-l-3 #dbefef Light
--color-accent-l-1 #a3cfcf Base
--color-accent #88bfbf Dark
--color-accent-d-1 #6da8a8 Darker
--color-accent-d-2 #548f8f Tertiary
Lightest
--color-tertiary-l-4 #fff9f3 Lighter
--color-tertiary-l-3 #fef4e7 Light
--color-tertiary-l-1 #fddcb8 Base
--color-tertiary #fcd0a1 Dark
--color-tertiary-d-1 #f0b870 Darker
--color-tertiary-d-2 #e4a040 Base & Surface
Surface Warm
--color-surface-warm #faf5ef Surface Alt
--color-surface-alt #f8f7f6 Surface
--color-surface #ffffff Base Lighter
--color-base-l-2 #2a302f Base Light
--color-base-l-1 #1a1f1e Base
--color-base #0b0f0e Typography
Heading Font
PT Sans Narrow
Used for all headings, display text, and navigation items.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&
Body Font
PT Sans
Used for body copy, labels, captions, and UI elements.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&
Heading Scale
H1 The quick brown fox
H2 The quick brown fox
H3 The quick brown fox
H4 The quick brown fox
H5 The quick brown fox
H6 The quick brown fox
Text Sizes
L Body large — The quick brown fox jumps over the lazy dog.
M Body medium — The quick brown fox jumps over the lazy dog.
S Body small — The quick brown fox jumps over the lazy dog.
XS Body extra small — The quick brown fox jumps over the lazy dog.
Buttons
Primary
Secondary
Outline
Accent
Tertiary
On Dark Background
Links
Inline navigational links used within service cards and content lists. On hover, an underline grows left-to-right; on release, it retracts left-to-right.
Service Links
Breast Augmentation · Breast Lift · Breast Reduction · Implant Exchange
In Context
Cards
Service Card
Used for displaying procedure categories on the homepage services section.
Bordered Card
Used for testimonials, info blocks, and content that needs a subtle container.
Dr. Jane Doe
Board Certified Plastic Surgeon
Pricing Card
Featured pricing card with inverted border-radius notch on the CTA button. The button wrapper uses ::before and ::after pseudo-elements with box-shadow on transparent circles to create the concave curves.
Sample Pricing Estimates
$10,000 - $15,000
Financing available from $350 per month
There are many factors that can affect pricing. After your initial consultation you will receive a complete quote.
Form Fields
Spacing Scale
--space-4xs 0.25rem --space-3xs 0.375rem --space-2xs 0.5rem --space-xs 0.75rem --space-s 1rem --space-m 1.5rem --space-l 2rem --space-xl 3rem --space-2xl 4rem --space-3xl 6rem --space-4xl 8rem Border Radius
xs 0.25rem s 0.5rem m 0.75rem l 1rem xl 1.5rem full 999rem Shadows
--shadow-1 --shadow-2 --shadow-3 --shadow-4 Taglines & Labels
Section Tagline
Used above section headings to provide context. Uppercase, bold, accent color (#88BFBF).
Site Credits
Website created and maintained by Deep River Digital.