Base Colors

white

#ffffff

neutral-1

#FFFDFC

neutral-2

#F5F3F0

neutral-3

#E8E6E3

neutral-4

#D6D4D2

neutral-5

#A3A2A0

neutral-6

#786E6D

neutral-7

#57433E

neutral-8

#421F1D

neutral-9

#2E0D0D

neutral-10

#1B0000

black

#000000

brand-red

#E32626

maroon

#6B0100

brand-deep-red

#7D1616

brand-red-dark

#E82828

brand-deep-dark

#BD5E4D

brand-red-hover

#CD1F1D

secondary-red-hover

#E326260A

accent-1

#C3EB79

accent-2

#EAF5D4

accent-3

#181C12

accent-b-1

#A9B1F8

accent-b-2

#D4D7F5

accent-b-3

#080B21

Title 1

Title 2- Serif

Title 2 - Sans

Title 3 - Sans

Title 3- Serif

Title 4 - Sans

Title 4- Serif

Title 5 - Sans

Title 5- Serif

Title 6

Title 7 Title 8

Body 1

Body 2

Body 3

Paragraph

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Emphasis

Did you come here for something in particular or just general
Did you come here for something in particular
Did you come here
Did you come here for something in particular
Did you come here for something in particular
Did you come here for something in particular
URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or
http://www.example.com and sometimes example.com (but not on Github, for example).

Link

I’m an inline-style link

I’m an inline-style link with title

I’m a reference-style link

I’m a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself.

example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

Ordered List

List item
List item
List item
List item
List item

Unordered List

Bullet point to make a statement within a list.
Here’s another point to make.
Another item in the list.
You can have as many of these as you need to add.
But maybe limit them to 5 or 6 max to keep it concise.
This feels like a nice list.

Code and Syntax Highlighting

HTML

<ul>
  <li class="nav-item">
    <a class="nav-link" href="/">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="about/">About</a>
  </li>
</ul>

CSS

img {
  vertical-align: middle;
  border: 0;
  max-width: 100%;
  height: auto;
}

JavaScript

window.addEventListener("load", (e) => {
  document.querySelector(".preloader").style.display = "none";
});

Buttons

Secondary Red Secondary Red Secondary Red Tertiary black Tertiary black

Primary Red Primary Red Primary Red Primary White Primary White Primary White Secondary White Secondary White Secondary White Tertiary Red Tertiary Red Tertiary white Tertiary white

Filter Chips

filter chip

Rectangle Cards

Ratings

5 4.5

Review Card

4.5

Chicago, IL

1001-1500 employees 8-months partnership

Anonymous

Confidential Reviewer

The final checkout cart delivered the highest digital response rates in history. Visual Logic met the deliverable schedule and came in under budget. They were easy to work with throughout the engagement and delivered a high quality of work from day one.

Read full review

4.5

Chicago, IL

1001-1500 employees 8-months partnership

Anonymous

Confidential Reviewer

Read full review

4.5

Case Study Components

Side Panel

Project Highlights

Project Details

Customer Rating

5.0

Project Cost

$100,000-$250,000

View our Pricing

Score cards

SUS 80

This score is based on warfighters’ impression of overall usability. It consists of a 10 item questionnaire with five response options for respondents, from “strongly agree” to “strongly disagree”. This score is considered good to excellent.

SEQ 6.6

This score is based on warfighters’ impression of ease; as in, how difficult or easy did you find this task? A score of “1” is considered very difficult and “7” is very easy.

TCR 79.7%

This score is based on facilitator judgment. It defines the level at which the task was completed on a scale of 0 to 2, which is then turned into percentage.

Testimonial card

Quote

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Notice

Note

This is a simple note.

Tip

This is a simple note.

Info

This is a simple note.

Warning

This is a simple note.

Tab

Tab 1
Tab 2
Tab 3

Tab 1 Title

Table

#	First	Last	Handle
1	Row:1 Cell:1	Row:1 Cell:2	Row:1 Cell:3
2	Row:2 Cell:1	Row:2 Cell:2	Row:2 Cell:3
3	Row:3 Cell:1	Row:3 Cell:2	Row:3 Cell:3

Accordion

This is a thing.
This is a thing.
This is a thing.
This is a thing.
This is a thing.

This is a thing.
This is a thing.
This is a thing.
This is a thing.
This is a thing.

This is a thing.
This is a thing.
This is a thing.
This is a thing.
This is a thing.

Elements

Base Colors

Title 1

Title 2- Serif

Title 2 - Sans

Title 3 - Sans

Title 3- Serif

Title 4 - Sans

Title 4- Serif

Title 5 - Sans

Title 5- Serif

Title 6

Body 1 Body 2 Body 3

Paragraph

Emphasis

Link

Ordered List

Unordered List

Code and Syntax Highlighting

HTML

CSS

JavaScript

Buttons

Tags

Filter Chips

Rectangle Cards

Ratings

Review Card

Case Study Components

Side Panel

Score cards

SUS 80

SEQ 6.6

TCR 79.7%

Testimonial card

Quote

Notice

Tab

Tab 1 Title

Tab 2 Title

Tab 3 Title

Tab 1 Title

Tab 2 Title

Tab 3 Title

Table

Accordion

Why should you need to do this?

How can I adjust Horizontal centering

Should you use Negative margin?

Image

Youtube video

Custom video

Body 1

Body 2

Body 3