Button

PDS Health Technologies

TECH 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 fifth Brand Examples frame): Poppins Medium 16, 4px 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: #FFFFFF
Stroke: #00334E · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Hover

Large Button

Background: #00334E
Text Color: #FFFFFF
Stroke: #F8FF84 · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Focus

Large Button

Background: #00334E
Text Color: #FFFFFF
Stroke: #F8FF84 · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Disabled

Large Button

Background: #CBCBCB
Text Color: #6F6F6F
Stroke: #CBCBCB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Secondary

Default

Large Button

Background: transparent
Text Color: #00334E
Stroke: #00334E · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Hover

Large Button

Background: transparent
Text Color: #00334E
Stroke: #00334E · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Focus

Large Button

Background: transparent
Text Color: #00334E
Stroke: #00334E · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Disabled

Large Button

Background: transparent
Text Color: #6F6F6F
Stroke: #CBCBCB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Tertiary

Default

Large Button →

Background: transparent
Text Color: #00334E
Stroke: none
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: 4px

Hover

Large Button →

Background: transparent
Text Color: #00334E
Stroke: none
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: 4px

Focus

Large Button →

Background: transparent
Text Color: #00334E
Stroke: #00334E · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 12px
Corner Radius: 4px

Disabled

Large Button →

Background: transparent
Text Color: #6F6F6F
Stroke: none
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: 4px

Inverse — Dark Surfaces

Primary Inverse

Default

Large Button

Background: #F8FF84
Text Color: #00334E
Stroke: #F8FF84 · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Hover

Large Button

Background: #F8FF84
Text Color: #00334E
Stroke: #FFFFFF · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Focus

Large Button

Background: #F8FF84
Text Color: #00334E
Stroke: #FFFFFF · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Disabled

Large Button

Background: #BCCD95
Text Color: #6F6F6F
Stroke: #CBCBCB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Secondary Inverse

Default

Large Button

Background: transparent
Text Color: #F8FF84
Stroke: #F8FF84 · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Hover

Large Button

Background: transparent
Text Color: #FFFFFF
Stroke: #F8FF84 · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Focus

Large Button

Background: transparent
Text Color: #F8FF84
Stroke: #FFFFFF · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Disabled

Large Button

Background: transparent
Text Color: #6F6F6F
Stroke: #CBCBCB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Tertiary Inverse

Default

Large Button →

Background: transparent
Text Color: #F8FF84
Stroke: none
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: 4px

Hover

Large Button →

Background: transparent
Text Color: #FFFFFF
Stroke: none
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: 4px

Focus

Large Button →

Background: transparent
Text Color: #F8FF84
Stroke: #FFFFFF · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 12px
Corner Radius: 4px

Disabled

Large Button →

Background: transparent
Text Color: #6F6F6F
Stroke: none
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: 4px

Source & authoring: All values exported live from Figma O2 → Brand Examples → the fifth Brand Examples frame (node 1017:169). Production buttons use the Pacific Dental Button component — the PDS Health Technologies 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.