Front-End Design – Design Portal

Some rules to follow when doing any front-end design for our publishing sites using the Unified Theme.

Note

There are many styling guidelines that should be followed for our unified theme.
Please be vigilant about following them, in order to keep our code clean, consistent and maintainable.

Examples of CSS custom properties

:root {
	// Logo
	--logo-width: 10rem;

	// Fonts
	--body-font: 'Inter', sans-serif;
	--heading-font: 'Metropolis', sans-serif;

	// Spacing + Sizing
	--container-width: 87.5rem;
	--column-gap: 1rem;
	--card-gutter: 1.25rem;
	--header-gap: 1.25rem;
	--header-height: 3.625rem;

	// Misc
	--box-shadow: 0 .1875rem .3125rem rgba(0,0,0,0.15);
	--border-radius: .3125rem;

	// Colors
	--primary: #053361; // Navy Blue
	--accent-1: #1D87D2; // Blue
	--accent-2: #F6F3F0; // Pastel Brown
	--dark-gray-1: #757575;
	--light-gray-1: #DCDCDC;
	--light-gray-2: #F6F6F6;
	--black: #303030; // Black - default
	--white: #FFF;
	--disabled: #98AABE;
	--overlay-color: rgba(5, 51, 97, 0.5);
}

Some breadcrumb HTML markup utilizing BEM

<nav class="breadcrumb" aria-label="breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="https://walletgenius.com">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="https://walletgenius.com/budgeting/">Budgeting</a>
    </li>
  </ol>
</nav>