Dit is mijn main styleguide die ik gebruik voor de pagina voor Funda.
Hieronder staat mijn root:
:root {
/* All colors */
--primary-color: #F7A100;
--secondary-color: #0071B3;
--tertiary-color: #333;
--quaternary-color: #999;
--quinary-color: #E0E0E0;
/* Footer */
--senary-color: #EDEDED;
/* Breadcrumb */
--breadcrumb-devider-color: #333;
--primary-text-color: #333;
--secondary-text-color: #999;
--tertiary-text-color: #fff;
/* background colors */
--primary-bg-background: #fff;
--secondary-bg-background: #EDEDED;
/* Breakpoints */
--breakpoint-sm: 540px;
--breakpoint-md: 720px;
--breakpoint-lg: 960px;
/* Font Family's */
--font-family-default: 'Poppins', verdana, sans-serif;
--font-family-secondary: 'Inter', verdana, sans-serif;
--font-family-tertiary: 'Roboto', verdana, sans-serif;
/* Transitions */
--default-transition: all 0.3s ease-in-out;
--quick-transition: all 0.1s ease-in-out;
--bg-background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(230,242,247,1) 100%);
/* Default button */
--bg-button: #F7A100;
--bg-button-hover: #de9000;
--bg-button-disabled: #e0e0e0;
--bg-button-disabled-hover: #e0e0e0;
--bg-button-error: #f44336;
/* Border radius */
--border-radius-default: 2px;
--gap-default: 10px;
/* H1 - H6 */
--font-size-h1: 32px;
--line-height-h1: 40px;
--font-size-h2: 24px;
--line-height-h2: 32px;
--font-size-h3: 20px;
--line-height-h3: 28px;
--font-size-h4: 18px;
--line-height-h4: 24px;
--font-size-h5: 16px;
--line-height-h5: 24px;
--font-size-h6: 14px;
--line-height-h6: 20px;
/* P */
--font-size-default: 16px;
--font-size-small: 14px;
--font-size-large: 18px;
--font-size-xlarge: 20px;
--line-height-default: 24px;
--line-height-small: 20px;
--line-height-large: 28px;
--line-height-xlarge: 32px;
}