Foundation home
Quick reference
Typography
Color palettes
Color surfaces
Color pairing
Iconography
Spacing and scale
Button - Filled
Colors - surfaces
Surface Colors: Surface colors are the foundational colors applied to the background of UI elements. They define the look and feel of the interface, providing a canvas for other elements.
On-Surface Colors: On-surface colors are used for elements that appear on top of surface colors, ensuring that text, icons, and other elements stand out and are readable against the background.
Surfaces
Surface colors form the foundational background of user interfaces, defining the primary visual structure. These colors create a sense of depth and hierarchy by layering different surfaces, helping to organize content and guide user interaction. Proper use of surface colors enhances the overall aesthetic, making the interface both visually appealing and easy to navigate.
surface fill: neutral-variant.97
on-surface text: text: neutral-variant.10
surface-container fill: neutral-variant.100
on-surface-container text: neutral-variant.10
surface-container-lowest fill: neutral-variant.99
on-surface-container-lowest text: neutral-variant.10 AAA
surface-container-low fill: neutral-variant.98
on-surface-container-low text: neutral-variant.10 AAA
surface-container-high fill: neutral-variant.94
on-surface-container-high text: neutral-variant.10 AAA
surface-container-highest fill: neutral-variant.90
on-surface-container-highest text: neutral-variant.10 AAA
inverse-surface fill: neutral-variant.10
inverse-on-surface text: neutral-variant.95
Surfaces - Primary
Primary roles are used for key components and primary interactive elements across the UI.

Examples: active states, most prominent buttons, and link text.
primary-container-high fill: primary.40
on-primary-container-high text: primary.100 AA
primary-container fill: primary.95
on-primary-container-high text: primary.20 AAA
primary-fixed fill: primary.90
on-primary-fixed text: primary.10 AAA
primary-fixed-dim fill: primary.90
on-primary-fixed-dim text: primary.30 AA
inverse-primary fill: primary.99
inverse-on-primary text: primary.40 AA
Primary – High-emphasis fills, texts, and icons against surface
On primary – Text and icons against primary

Primary container – Standout fill color against surface, for key components like FAB
On primary container – Text and icons against primary container
Surfaces - Secondary
Effectively highlighting key information or significant sections of content. Headers and hero sections create impactful text on complex screens.

Examples - Less prominent buttons and calls to action, content headers, and hero sections.
secondary fill: secondary.40
on-secondary text: secondary.100 AAA
secondary-container fill: secondary.40
on-secondary-container text: secondary.10 AAA
secondary-container-high fill: secondary.40
on-secondary-container-high text: secondary.10 AAA
secondary-container-high fill: secondary.40
on-secondary-container-high text: secondary.10 AA
inverse-secondary fill: secondary.99
inverse-on-secondary text: secondary.40 AAA
Secondary – Less prominent fills, text, and icons against surface. Headers and hero panels
On secondary – Text and icons against secondary

Secondary container – Less prominent fill color against surface, for recessive components like tonal buttons
On secondary container – Text and icons against secondary container
Surfaces - Tertiary
Tertiary roles are used for contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element. Tertiary surface colors provide additional layering and support for complex layouts, enhancing the visual hierarchy at each teams discretion.

Examples: Color fills for less prominent buttons, defining content sections, less prominent calls to actions
tertiary fill: tertiary.40
on-tertiary text: tertiary.100 AA
tertiary-container fill: tertiary.95
on-tertiary-container text: tertiary.20 AAA
tertiary-fixed fill: tertiary.90
on-tertiary-fixed text: tertiary.10 AAA
tertiary-fixed-dim fill: tertiary.80
on-tertiary-fixed-dim text: tertiary.30 AA
tertiary-container-high fill: tertiary.99
on-tertiary-container-high text: tertiary.10 AA
Tertiary – Complementary fills, text, and icons against surface
On tertiary – Text and icons against tertiary

Tertiary container – Complementary container color against surface, for components like alternative input fields
On tertiary container – Text and icons against tertiary container
Surfaces - Error
Error surface colors signal critical issues or problems, ensuring that users are immediately aware of errors that need attention.

Examples: Bold colors for fills, icons, and text, error states and messaging, alerts, delete buttons
error fill: error.40
on-error text: error.100 AA
error-container fill: error.95
on-error-container text: error.20 AAA
error-fixed fill: error.90
on-error-fixed text: error.10 AAA
error-fixed-dim fill: error.80
on-error-fixed-dim text: error.10 AA
inverse-error fill: error.99
inverse-on-error text: error.40 AA
Error - Bold colors for fills, icons, and text, indicating urgent alerts.
On Error - Text and icons against the error fill for critical notifications.

Error Container - Prominent fill color against the surface for highlighting errors.
On Error Container - Text and icons against the error container for emphasizing critical information.
Surfaces - Warning
Warning surface colors draw attention to potential issues, alerting users to be cautious or take preventive action.
warning fill: warning.50
on-warning text: warning.10 AAA
warning-container fill: warning.90
on-warning-container text: warning.10 AAA
warning-fixed fill: warning.70
on-warning-fixed text: warning.10 AAA
warning-fixed-dim fill: warning.40
on-warning-fixed-dim text: warning.10 AA
incerse-warning fill: warning.95
inverse-on-warning text: warning.20 AA
Warning - Bold colors for fills, icons, and text, alerting cautionary alerts.
On Warning - Text and icons against the warning fill for alerting prompts.

Warning Container - Prominent fill color against the surface for highlighting warnings.
On Warning Container - Text and icons against the warning container for emphasizing cautionary information.
Surfaces - Info
Info surface colors highlight informational messages, helping users to notice important but non-critical information within the interface.
info fill: info.30
on-info text: info.100 AA
info-container fill: info.95
on-info-container text: info.20 AA
info-fixed fill: info.90
on-info-fixed text: info.10 AAA
info-fixed-dim fill: info.80
on-info-fixed-dim text: info.20 AA
inverse-info fill: info.99
inverse-on-info text: info.30 AA
Info - Subtle colors for fills, icons, and text, conveying informative cues.
On Info - Text and icons against the info fill for additional details.

Info Container - Subdued fill color against the surface for presenting informational content.
On Info Container - Text and icons against the info container for clarity and understanding.
Surfaces - Info
Success surfaces highlight positive outcomes or confirmations, ensuring users recognize successful actions immediately.

Example: The background color of a message confirming a successful action/submission.
success fill: success.50
on-success text: success.10 AA
success-container fill: success.95
on-success-container text: success.20 AA
success-fixed fill: success.90
on-success-fixed text: success.10 AAA
success-fixed-dim fill: success.40
on-success-fixed-dim text: success.10 AA
inverse-success fill: success.99
inverse-on-success text: success.10 AA
Success - Achievement emphasized with vibrant colors for fills, icons, and text.
On Success - Text and icons presented against the success fill.

Success Container - Engaging fill color against a surface.
On Success Container - Text and icons situated against the success container.
Contact us. If you have any questions or feedback relating to the Core Design System or have suggestions to help our commitment to continuous improvement, please contact:
simon.andrews@joinedup.com
aysha.miskin@beeline.com
CORE DESIGN SYSTEM
Foundations
Made
with