Color Palette
Colors on web/wp-content/themes/blackpoint_cyber_wp/styles/scss/inc/_config.scss
- $primary-green-50
- $primary-green-100
- $primary-green-200
- $primary-green-300
- $primary-green-400
- $primary-green-500
- $primary-green-600
- $primary-green-700
- $primary-green-800
- $primary-green-900
- $accent-blue-50
- $accent-blue-100
- $accent-blue-200
- $accent-blue-300
- $accent-blue-400
- $accent-blue-500
- $accent-blue-600
- $accent-blue-700
- $accent-blue-800
- $accent-blue-900
- $neutral-gray-50
- $neutral-gray-100
- $neutral-gray-200
- $neutral-gray-300
- $neutral-gray-400
- $neutral-gray-500
- $neutral-gray-600
- $neutral-gray-700
- $neutral-gray-800
- $neutral-gray-900
- $dark-gray-50
- $dark-gray-100
- $dark-gray-200
- $dark-gray-300
- $dark-gray-400
- $dark-gray-500
- $dark-gray-600
- $dark-gray-700
- $dark-gray-800
- $dark-gray-900
- $white
- $black
- $primary-gradient
- $gray-light-gradient
- $text
- $invert
- $link
- $hover
Typography
Typography mixins on web/wp-content/themes/blackpoint_cyber_wp/styles/scss/inc/_mixins-typography.scss
Display 01 Light
Display 02 Light
Display 02 Regular
Display 02 Bold
Heading 01 Light
Heading 01 Regular
Heading 01 Bold
Heading 02 Light
Heading 02 Regular
Heading 02 Bold
Heading 03 Light
Heading 03 Regular
Heading 03 Bold
Heading 04 Light
Heading 04 Regular
Heading 04 Bold
Heading 05 Light
Heading 05 Regular
Heading 05 Bold
Heading 06 Light
Heading 06 Regular
Heading 06 Bold
Paragraph (Baseline 18pt): A light paragraph example with nunito sans light.
Paragraph (Baseline 18pt): A light paragraph example with nunito sans regular.
Paragraph (Baseline 18pt): A light paragraph example with nunito sans bold.
Paragraph Small: A light paragraph example with nunito sans light.
Paragraph Small: A light paragraph example with nunito sans regular.
Paragraph Small: A light paragraph example with nunito sans bold.
Subheading Light
Subheading Regular
Subheading Bold
ALL CAPS REGULAR caption goes here.
Regular caption goes here.
ALL CAPS BOLD caption goes here.
Bold caption goes here.
Link
Buttons
Buttons mixins on _web/wp-content/themes/rbp/styles/scss/inc/_mixins.scss.
Primary Gradient Small
PRIMARY GRADIENT SMALL DARK: @include button-primary-gradient;
Button CTA
Button CTA
Primary Gradient Large
PRIMARY GRADIENT LARGE DARK: @include button-primary-gradient-large;
Button CTA
Button CTA
Primary Small
PRIMARY SMALL DARK: @include button($dark-mode: true);
Button CTA
Button CTA
Primary Large
PRIMARY LARGE DARK: @include button-large($dark-mode: true);
Button CTA
Button CTA
Secondary Small
SECONDARY SMALL DARK: @include button-secondary($dark-mode: true);
Button CTA
Button CTA
Secondary Large
SECONDARY LARGE DARK: @include button-secondary-large($dark-mode: true);
Button CTA
Button CTA
Tertiary Small
TERTIARY SMALL DARK: @include button-tertiary($dark-mode: true);
Button CTA
Button CTA
Tertiary Large
TERTIARY LARGE DARK: @include button-tertiary-large($dark-mode: true);
Button CTA
Button CTA
Primary Small
PRIMARY SMALL LIGHT: @include button($dark-mode: false);
Button CTA
Button CTA
Primary Large
PRIMARY LARGE LIGHT: @include button-large($dark-mode: false);
Button CTA
Button CTA
Secondary Small
SECONDARY SMALL LIGHT: @include button-secondary($dark-mode: false);
Button CTA
Button CTA
Secondary Large
SECONDARY LARGE LIGHT: @include button-secondary-large($dark-mode: false);
Button CTA
Button CTA
Tertiary Small
TERTIARY SMALL LIGHT: @include button-tertiary($dark-mode: false);
Button CTA
Button CTA
Tertiary Large
TERTIARY LARGE LIGHT: @include button-tertiary-large($dark-mode: false);
Button CTA
Button CTA
Icon Buttons
Icon Buttons mixins on _web/wp-content/themes/rbp/styles/scss/inc/_mixins.scss
Primary
PRIMARY: @include button-icon;
Ghost
GHOST DARK: @include button-icon-ghost($dark-mode: true);
Ghost
GHOST LIGHT: @include button-icon-ghost($dark-mode: false);
Drop Shadows
Shadows variables on web/wp-content/themes/blackpoint_cyber_wp/styles/scss/inc/_config.scss
Shadows classes on web/wp-content/themes/blackpoint_cyber_wp/styles/scss/_styleguide.scss
var: $shadow-xs
class: .shadow-xs
var: $shadow-sm
class: .shadow-sm
var: $shadow-md
class: .shadow-md
var: $shadow-lg
class: .shadow-lg
var: $shadow-xl
class: .shadow-xl