STYLE_GUIDE.md

<style> .cardContainer{ display: flex; flex-wrap: wrap; justify-content: flex-start; } .card { box-sizing: border-box; flex-direction: column; word-wrap: break-word; width: 50%; flex: 0 0 auto; padding-bottom: 1.75rem; } .cardColor { display: flex; width: 100%; height: 100px; boder: 2px solid black; margin-bottom: 0.75rem; } .cardTitle{ font-size:1.5em; } .bgBlue{ background: #3c3cb9;} .bgDarkBlue{background: #0f1038;} .bgLightBlue{background:#4547c9;} .bgWhite{background:white;} .bgGray{background:#dbdbeb;} .bgCoolGray{background:#cfcfe3;} .section { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 50px; padding: 3.1em 0; } .sectionPadded { margin: 0 4em; } .typography{font-family:Raleway, sans-serif; text-decoration:none; font-size:24px;} .xlText{font-size: 80px;} .lgText{font-size:52px;} .mdText{font-size:32px} </style>

Style Guide for DSD Website's brand

To establish consistency and aid to developers, this guide aims to set a ruleset of common styles and resources such as colors, typography, and more. Please use Global.css

Getting Started

Global.css contains a collection of common styling properties and CSS classes which can be used to both create new CSS classes and "pre-build" styles onto one class you can then cascade onto the HTML element you want to style. This guide will list all available properties and CSS classes from the global.css file.
To use a property from global.css into your file, use the var() function when declaring your own property. For example, if we wanted to set the color of a text within a container with the class myCustomClass to our primary blue color, we would use the --blue prefix property as so:

element.css

.myCustomClass {
  color: var(--blue);
}

To add a class from global.css to your html element in tsx, wrap the

element.tsx

return(
  <div className={`bgGray ${myCustomClass}`}>
    Lorem Ipsum
  </div>
)

Visual Style

Colors and Font

The most unifying visual component is the consistent use of colors and font settings.
Font Family font-family: Raleway, sans-serif;
font-size: 24px;
The core colors below are for background and textual elements. They are listed with their CSS variable value for easy access.

Primary Color
--blue

Secondary Color
--dark-blue

White
--white

Light Blue
--light-blue

Gray
--gray

Cool Gray
--cool-gray

Typography

.xlText Heading 1 / XL Text

.lgText Heading 2 / Large Text

.mdText Heading 3 / Medium Text

Normal Text

Design Elements

Sections

Blue .bgBlue

Nam sagittis scelerisque maximus. Integer id volutpat augue, nec suscipit ante. Nulla facilisi. Proin interdum lectus ligula, in elementum leo lacinia et. Ut nec condimentum urna. Morbi at elit tellus. Praesent vel faucibus purus, sed laoreet orci. Donec tempus elit vel purus gravida laoreet. Fusce maximus metus eget dolor scelerisque, eu ornare arcu faucibus. In ut lacus id ligula tempus blandit sed sed nisl.

Dark Blue .bgDarkBlue

Nam sagittis scelerisque maximus. Integer id volutpat augue, nec suscipit ante. Nulla facilisi. Proin interdum lectus ligula, in elementum leo lacinia et. Ut nec condimentum urna. Morbi at elit tellus. Praesent vel faucibus purus, sed laoreet orci. Donec tempus elit vel purus gravida laoreet. Fusce maximus metus eget dolor scelerisque, eu ornare arcu faucibus. In ut lacus id ligula tempus blandit sed sed nisl.

Gray .bgGray

Nam sagittis scelerisque maximus. Integer id volutpat augue, nec suscipit ante. Nulla facilisi. Proin interdum lectus ligula, in elementum leo lacinia et. Ut nec condimentum urna. Morbi at elit tellus. Praesent vel faucibus purus, sed laoreet orci. Donec tempus elit vel purus gravida laoreet. Fusce maximus metus eget dolor scelerisque, eu ornare arcu faucibus. In ut lacus id ligula tempus blandit sed sed nisl.

Light Blue .bgLightBlue

Nam sagittis scelerisque maximus. Integer id volutpat augue, nec suscipit ante. Nulla facilisi. Proin interdum lectus ligula, in elementum leo lacinia et. Ut nec condimentum urna. Morbi at elit tellus. Praesent vel faucibus purus, sed laoreet orci. Donec tempus elit vel purus gravida laoreet. Fusce maximus metus eget dolor scelerisque, eu ornare arcu faucibus. In ut lacus id ligula tempus blandit sed sed nisl.

White .bgWhite

Nam sagittis scelerisque maximus. Integer id volutpat augue, nec suscipit ante. Nulla facilisi. Proin interdum lectus ligula, in elementum leo lacinia et. Ut nec condimentum urna. Morbi at elit tellus. Praesent vel faucibus purus, sed laoreet orci. Donec tempus elit vel purus gravida laoreet. Fusce maximus metus eget dolor scelerisque, eu ornare arcu faucibus. In ut lacus id ligula tempus blandit sed sed nisl.

Breakpoints

--max-width: 1450px;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;