Skip to content
Rocksite Sections – Plugin

Rocksite Sections - Plugin

UI Kit & Documentation

  • Sections
  • Style Guide
  • UI Components
Download from WordPress.org
Rocksite Sections – Plugin
Rocksite Sections - Plugin
UI Kit & Documentation
Download

Design Tokens

Fonts

Design TokenDescriptionValue
  –global–font-primaryThe default UI font familyMonrope, sans-serif
–global–font-secondaryThe default for headingsPoppins, sans-serif

Font-size

Design TokenDescriptionValue
  –global–font-size-h1This is h1 font size46px
–global–font-size-h2This is h2 font size40px
–global–font-size-h3This is h3 font size34px
–global–font-size-h4This is h4 font size28px
–global–font-size-h5This is h5 font size22px
–global–font-size-h6This is h6 font size18px
–global–font-bodyThis is the base font size16px
–global–font-leadThis is the lead font size20px

Line Height

Design TokenDescriptionValue
  –global–line-height-h1This is the default line height for h1 headings.60px
–global–line-height-h2This is the default line height for h2 headings52px
–global–line-height-h3This is the default line height for h3 headings44px
–global–line-height-h4This is the default line height for h4 headings36px
–global–line-height-h5This is the default line height for h5 headings33px
–global–line-height-h6This is the default line height for h6 headings27px
–global–line-height-bodyThis is the default line height for body text29px
–global–line-height-leadThis is the default line height for lead text.36px

Space

Design TokenDescriptionValue
–global–space-xsThis is an extra small space5px
–global–space-smThis is a small space10px
–global–space-mdThis is a medium space15px
–global–space-lgThis is a large space30px
–global–space-xlThis is an extra large space60px
–global–space-verticalThis is a vertical  space most commonly used for buttons and inputs6px
–global–space-horizontalThis is a horizontal  space most commonly used for buttons and inputs27px

Radius

Design TokenDescriptionValue
–global–border-radiusThis is the default border radius most commonly used for buttons and inputs8px
–global–border-radius-pillThis is the default border radius most commonly used for pills100px
–global–border-radius-smallThis is the default border radius for small UI elements6px

Box Shadow 

Design TokenDescriptionValue
–global–box-shadowDefault box shadow.0px 1px 25px 0px rgb(104 103 103 / 15%)
–global–box-shadow-cardDefault box shadow for card component. 10px 10px 25px 0px rgb(104 103 103 / 20%)

Colors

Design TokenDescriptionValue
  –global-color-accentUsed as primary button background  and as a link color. #3EC1D3
–global-color-accent-altUsed as second color that highlights the important things#2B6CB0
–global-color-strongest-textDefault text color. Used as the main text color throughout the UI#1A202C
–global-color-strong-textContrast or text color used to create a design hierarchy with your text, borders etc.#2D3748
–global-color-medium-textContrast or text color used to create a design hierarchy with your text, borders etc.#4A5568
–global-color-subtle-textThe brightest Text color used to create a design hierarchy with your text, borders etc.#718096
–global-color-subtle-backgroundThe darkest background color #EDF2F7
–global-color-lighter-backgroundThe intermediate color background#F7FAFC
  –global-color-whiteWhite Color#FFFFFF
–global-border-colorThe default border color#F7FAFC

Additional Colors

Design TokenDescriptionValue
  –global-color-accent-lightUsed as primary button background  and as a link color. #CDEFF4
–global-color-accent-softUsed as second color that highlights the important things#2B6CB0
–global-color-accent-alt-lightDefault text color. Used as the main text color throughout the UI#FFEFD6
–global-color-accent-alt-softContrast or text color used to create a design hierarchy with your text, borders etc.#FFFBF3
Style Guide:
  • Color Styles
  • Design Tokens
  • Icons
  • Shadows
  • Typography

© 2023 Rocksite Sections - Plugin

Scroll to top