Button

PDS Medical Group

MDGP Buttons

Buttons communicate the primary action on a page — use one primary button per view, with secondary and tertiary for less prominent actions. All values below are pulled from the Figma O2 Design System (Brand Examples → the sixth Brand Examples frame): Manrope Bold 16, full pill radius, 2px stroke, 12×24 padding, 40px height.

Style	CTA style ID	Behavior
Primary	`to confirm`	Solid navy fill — one per view, the main action
Secondary	`to confirm`	Outlined — supporting actions
Tertiary	`to confirm`	Text link with arrow — low-emphasis actions
Inverse	`to confirm`	All three styles on dark surface backgrounds

Primary

Default

Large Button

Background: #00334E
Text Color: #B1E4D7
Stroke: #00334E · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Hover

Large Button

Background: #000000
Text Color: #B1E4D7
Stroke: #000000 · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Focus

Large Button

Background: #00334E
Text Color: #B1E4D7
Stroke: #B1E4D7 · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Disabled

Large Button

Background: #CBCBCB
Text Color: #6F6F6F
Stroke: #CBCBCB · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Secondary

Default

Large Button

Background: transparent
Text Color: #0B262E
Stroke: #00476C · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Hover

Large Button

Background: #00334E
Text Color: #B1E4D7
Stroke: #00476C · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Focus

Large Button

Background: #00334E
Text Color: #B1E4D7
Stroke: #00476C · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Disabled

Large Button

Background: transparent
Text Color: #6F6F6F
Stroke: #CBCBCB · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Tertiary

Default

Large Button →

Background: transparent
Text Color: #0B262E
Stroke: none
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: Full (pill)

Hover

Large Button →

Background: transparent
Text Color: #88B5AD
Stroke: none
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: Full (pill)

Focus

Large Button →

Background: transparent
Text Color: #88B5AD
Stroke: none
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: Full (pill)

Disabled

Large Button →

Background: transparent
Text Color: #6F6F6F
Stroke: none
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: Full (pill)

Inverse — Dark Surfaces

Primary Inverse

Default

Large Button

Background: #DEFF34
Text Color: #0B262E
Stroke: #DEFF34 · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Hover

Large Button

Background: #A2C200
Text Color: #0B262E
Stroke: #DEFF34 · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Focus

Large Button

Background: #A2C200
Text Color: #0B262E
Stroke: #FFFFFF · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Disabled

Large Button

Background: #CBCBCB
Text Color: #6F6F6F
Stroke: #CBCBCB · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Secondary Inverse

Default

Large Button

Background: transparent
Text Color: #B1E4D7
Stroke: #B1E4D7 · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Hover

Large Button

Background: #B1E4D7
Text Color: #0B262E
Stroke: #B1E4D7 · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Focus

Large Button

Background: #B1E4D7
Text Color: #0B262E
Stroke: #FFFFFF · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Disabled

Large Button

Background: transparent
Text Color: #6F6F6F
Stroke: #CBCBCB · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Tertiary Inverse

Default

Large Button →

Background: transparent
Text Color: #B1E4D7
Stroke: none
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: Full (pill)

Hover

Large Button →

Background: transparent
Text Color: #94CEBF
Stroke: none
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: Full (pill)

Focus

Large Button →

Background: transparent
Text Color: #B1E4D7
Stroke: #FFFFFF · 2px
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 12px
Corner Radius: Full (pill)

Disabled

Large Button →

Background: transparent
Text Color: #6F6F6F
Stroke: none
Font: Manrope 16
Text Style: Bold
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: Full (pill)

Source & authoring: All values exported live from Figma O2 → Brand Examples → the sixth Brand Examples frame (node 1027:873 — mislabelled “PDS Health Tech” in Figma). Production buttons use the Pacific Dental Button component — the PDS Medical Group CTA style IDs still need to be confirmed and added to the table above. Inverse variants apply on dark surface backgrounds; the dark panel colour shown here is a documentation choice, not a Figma token.