Documentation/ Visual identity /Colors and styles
Contact us
Install
01OPALINE

Colors and styles

Colors, schemes, and visual settings saved in this preset.

SAVED COLOR SCHEMES

The preset’s five color schemes

These values come directly from settings_data.json. Recreate them in the same order so sections referencing a scheme keep the same appearance.

scheme-1
View values
background
#f5f1e8
background_gradient
No custom value: the theme uses its automatic behavior or hides the element when no data is available.
text
#191917
button
#b59a68
button_label
#f5f1e8
secondary_button_label
#191917
shadow
#191917
scheme-2
View values
background
#d9cab0
background_gradient
No custom value: the theme uses its automatic behavior or hides the element when no data is available.
text
#191917
button
#b59a68
button_label
#f5f1e8
secondary_button_label
#191917
shadow
#191917
scheme-3
View values
background
#c3c1bb
background_gradient
No custom value: the theme uses its automatic behavior or hides the element when no data is available.
text
#191917
button
#191917
button_label
#f5f1e8
secondary_button_label
#191917
shadow
#191917
scheme-4
View values
background
#b59a68
background_gradient
No custom value: the theme uses its automatic behavior or hides the element when no data is available.
text
#f5f1e8
button
#f5f1e8
button_label
#191917
secondary_button_label
#f5f1e8
shadow
#191917
scheme-5
View values
background
#191917
background_gradient
No custom value: the theme uses its automatic behavior or hides the element when no data is available.
text
#f5f1e8
button
#b59a68
button_label
#f5f1e8
secondary_button_label
#f5f1e8
shadow
#191917
DESIGN SYSTEM

Preset global values

background_color#f5f1e8
background_soft_color#d9cab0
foreground_color#191917
muted_color#6f6554
accent_color#000000
accent_contrast_color#f5f1e8
type_heading_fontbuenard_n4
heading_letter_spacing1
heading_text_transformnone
type_primary_fontsans_serif_n4
link_color#000000
link_hover_color#B59A68
link_styleunderline
surface_colorrgba(0,0,0,0)
surface_border_color#171714
card_background_colorrgba(0,0,0,0)
card_border_color#171714
glass_color#f5f1e8
glass_content_color#191917
glass_action_color#b59a68
glass_background_color#f5f1e8
glass_border_color#f8f4ee
button_primary_background#b59a68
button_primary_text#f5f1e8
button_secondary_background#d9cab0
button_secondary_text#191917
REPRODUCTION

Recommended order

  1. 01

    Create the schemes in Theme settings → Colors.

  2. 02

    Apply global values before editing a section.

  3. 03

    Then configure page templates in the documented order.

  4. 04

    Check contrast and mobile rendering.