Developers
On this page
We use CSS patterns to create a foundation of typography and layout compositions within the design system. Below are some common foundational CSS patterns that we use in combination with our Tokens for this site, which you might find helpful for bootstrapping your own application, page, or website.
We also have element-specific patterns for extending our design system elements on our Patterns page.
Reset
/* Box sizing rules */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* Remove default margin */
:where(body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
figure,
figcaption,
blockquote,
dl,
dd) {
margin: 0;
}
/* Default scroll behavior */
@media (prefers-reduced-motion: no-preference) {
html:focus-within {
scroll-behavior: smooth;
}
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Inherit fonts for inputs and buttons */
:where(input,
button,
textarea,
select) {
font: inherit;
}
Fonts
Red Hat CDN
If you are on a *.redhat.com domain, you can use our CDN to access the Red Hat fonts:
<link rel="stylesheet" href="https://www.redhatstatic.com/dssf-001/v2/@redhat/redhat-font@4.1.0/font.min.css">Hosted/bundled assets
Optionally, you can download the Red Hat fonts and include them directly in your project. Below is an example of how you might reference them in CSS:
@font-face {
font-family: RedHatDisplay;
src: url('path/to/fonts/RedHatDisplay/RedHatDisplay-Regular.woff');
font-style: normal;
font-weight: 400;
text-rendering: optimizelegibility;
}
@font-face {
font-family: RedHatDisplay;
src: url('path/to/fonts/RedHatDisplay/RedHatDisplay-Medium.woff');
font-style: normal;
font-weight: 500;
text-rendering: optimizelegibility;
}
@font-face {
font-family: RedHatDisplay;
src: url('path/to/fonts/RedHatDisplay/RedHatDisplay-Bold.woff');
font-style: normal;
font-weight: 700;
text-rendering: optimizelegibility;
}
@font-face {
font-family: RedHatText;
src: url('path/to/fonts/RedHatText/RedHatText-Regular.woff');
font-style: normal;
font-weight: 400;
text-rendering: optimizelegibility;
}
@font-face {
font-family: RedHatText;
src: url('path/to/fonts/RedHatText/RedHatText-Medium.woff');
font-style: normal;
font-weight: 500;
text-rendering: optimizelegibility;
}
@font-face {
font-family: RedHatMono;
src: url('path/to/fonts/RedHatMono/RedHatMono-Bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: RedHatMono;
src: url('path/to/fonts/RedHatMono/RedHatMono-BoldItalic.woff2') format('woff2');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: RedHatMono;
src: url('path/to/fonts/RedHatMono/RedHatMono-Italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: RedHatMono;
src: url('path/to/fonts/RedHatMono/RedHatMono-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: RedHatMono;
src: url('path/to/fonts/RedHatMono/RedHatMono-LightItalic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: RedHatMono;
src: url('path/to/fonts/RedHatMono/RedHatMono-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: RedHatMono;
src: url('path/to/fonts/RedHatMono/RedHatMono-MediumItalic.woff2') format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: RedHatMono;
src: url('path/to/fonts/RedHatMono/RedHatMono-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: RedHatMono;
src: url('path/to/fonts/RedHatMono/RedHatMono-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: RedHatMono;
src: url('path/to/fonts/RedHatMono/RedHatMono-SemiBoldItalic.woff2') format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
}
Typography
We highly recommend using our tokens in your project, so that you can take full advantage of their utility throughout your code. Here is an example of how to set typography using our tokens:
body {
font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif);
font-size: var(--rh-font-size-body-text-md, 1rem);
line-height: var(--rh-line-height-body-text, 1.5);
-webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, h4, h5, h6) {
font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
line-height: var(--rh-line-height-heading, 1.3);
font-weight: var(--rh-font-weight-heading-medium, 500);
}
:where(code) {
font-size: inherit;
font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace);
line-height: var(--rh-line-height-code, 1.5);
}
:where(kbd) {
font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif);
font-size: var(--rh-font-size-body-text-md, 1rem);
line-height: var(--rh-line-height-body-text, 1.5);
}
:where(h1) {
font-size: var(--rh-font-size-heading-2xl, 3rem);
}
:where(h2) {
font-size: var(--rh-font-size-heading-xl, 2.5rem);
}
:where(h3) {
font-size: var(--rh-font-size-heading-lg, 2.25rem);
}
:where(h4) {
font-size: var(--rh-font-size-heading-md, 1.75rem);
}
:where(h5) {
font-size: var(--rh-font-size-heading-sm, 1.5rem);
}
:where(h6) {
font-size: var(--rh-font-size-heading-xs, 1.25rem);
}
:where(p) {
font-size: var(--rh-font-size-body-text-md, 1rem);
}
:where(p, ul, ol, dl) {
font-size: var(--rh-font-size-body-text-lg, 1.125rem);
}
:where(input, button, textarea, select) {
font: inherit;
}
Layout and grid
There are a number of ways you can create layouts and grid systems within your application or website. With CSS Grid and Flexbox, it's never been easier.
Experimental RHX Grid
If you'd prefer using a Web Component for layout and grid purposes, we have an experimental <rhx-grid> element available. You can install it using one of two ways:
1. Update your import map to add RHX Elements:
/* Modify your imports block to add: */
"imports": {
...
"@rhdx/elements/": "https://www.redhatstatic.com/dssf-001/v2/@rhdx/elements@0.0.1/elements/"
}2. Import the bare module specifier:
<script type="module">
@import "@rhdx/elements/rhx-grid/rhx-grid.js"
</script>We'd love your feedback on <rhx-grid> and/or our CSS-based approach.
FAQs
Here are some frequently asked questions we get about our CSS patterns and other assets for bootstrapping applications, websites, and pages.
Why don't we ship these patterns in our npm package?
While we do ship our global tokens in the @rhds/tokens package, we are not shipping these CSS patterns yet. This is primarily because we want different teams and projects to try them out first, identify integration issues, and provide feedback.
We know that there are a lot of different CSS framework approaches, tool chains, and requirements across the different applications, domains, etc. used by the teams we support. So at this point, we feel it's a little premature to make a one-size-fits-all kind of recommendation. However, with these easily copyable example snippets, we encourage you to use LLM coding tools to adjust our recommendations to suit your toolchains, workflows, and conventions. We don’t have a specific timeframe for a more formal release, which is why we need you to try these out and give us your feedback.
Why don't we ship utility classes for each token like class="rh-color-text-primary"?
class="rh-color-text-primary"?We'd like to encourage teams to move towards a more semantic, high-level approach to web design and development. Ideally, teams would block-out experiences using semantic, design system elements and patterns, and then make adjustments using the design system's theming features, color palettes, attributes, and variants which the design team designers and engineers have prepared for those very purposes. In doing so, teams can make their design knowledge portable across different projects, and they can be confident that they are shipping experiences which align with Red Hat's Brand standards.
