ThePeopleRating visual identity

Click a swatch to copy its hex code.

• CopyNavy 950#020E27Deepest background, footer--tpr-color-navy-950
• CopyNavy 900#03173DBrand navy, page background--tpr-color-navy-900
• CopyNavy 800#0A2452Raised surfaces, cards--tpr-color-navy-800
• CopyNavy 700#123368Borders on dark, hover surfaces--tpr-color-navy-700
• CopyNavy 600#1D4585Strong borders, dividers--tpr-color-navy-600
• CopyBlue 300#7CC6FBLinks and highlights on navy--tpr-color-blue-300
• CopyBlue 500#0F90F1Secondary accent, focus ring--tpr-color-blue-500
• CopyBlue 700#0B6BD5Blue on light backgrounds--tpr-color-blue-700
• CopyGold 300#F9D12FStar highlight--tpr-color-gold-300
• CopyGold 500#FAAF0DPrimary accent, primary button--tpr-color-gold-500
• CopyOrange 500#F88E0AGradient end, hover--tpr-color-orange-500
• CopyGreen 500#4CB847Positive / success--tpr-color-green-500
• CopyViolet 500#7625B2App-icon glow, gradients--tpr-color-violet-500
• CopyInk 50#F5F8FFHeadings and body text on navy--tpr-color-ink-50
• CopyInk 200#C9D4EASecondary text--tpr-color-ink-200
• CopyInk 400#8EA0C2Muted text, captions--tpr-color-ink-400

Plus Jakarta Sans — a clean, friendly geometric sans-serif that matches the rounded letterforms of the logo.

• Display60px / 800Rate the people who shape the world.
• Heading 148px / 800Rate the people who shape the world.
• Heading 236px / 800Rate the people who shape the world.
• Heading 324px / 700Rate the people who shape the world.
• Body large18px / 400Rate the people who shape the world.
• Body16px / 400Rate the people who shape the world.
• Small14px / 500Rate the people who shape the world.
• Caption12px / 600Rate the people who shape the world.

Every colour, radius, shadow and font size above is a CSS custom property in one plain file. Drop it into wwwroot and reference the variables from your components.

<!-- wwwroot/index.html -->
<link rel="stylesheet" href="css/tokens.css" />

/* any .razor.css file */
.rate-button {
  background: var(--tpr-gradient-stars);
  color: var(--tpr-color-navy-900);
  border-radius: var(--tpr-radius-pill);
  box-shadow: var(--tpr-shadow-glow-gold);
}