This document serves as a guide for base elements in the theme. It is not intended to cover all patterns and elements — like a component library does. As the prototypes are refined this section may also be refined.
Two typefaces are used for the theme: Larken is used only for h1 and a h2 variant (or similar high level headings/titles) while Inter should be set as global default. Both font files come in variable OTF format and this format should be used for the actual implementation of this theme despite these prototypes failure to employ them (vOTF presents compatibility issues with the design software).
The base font size should always be at least 18px. This will help us meet — if not exceed — WCAG 2.1 AA rating compliance as well as provide highly legible blocks of text. In addition, to assist consumption of large bodies of copy, one should refrain from extending text beyond 1000px on a horizontal (x-axis) plane.
When Inter is not an option, please use the following fontstack as a fallback: Inter, "IBM Plex Sans", "San Francisco", -apple-system, BlinkMacSystemFont, "Microsoft Sans Serif", "Helvetica Neue", Helvetica, Arial, sans-serif.
When Larken is not an option, please use the following fontstack as a fallback: Larken, Charter, "Calisto MT", Cambria, Georgia, Garamond, serif.
Notice how both stacks still call the original font. We can never be 100% sure that the user does not already have these fonts locally installed, so it doesn't hurt to include them in any stack being called — even when we aren't proactively loading/calling the font files themselves. The stacks above are optimized for both Windows 10+ and macOS El Capitan+ operating systems and their factory-installed fonts.
Do not share or use the Larken font files outside of the context of Chromatic brand material. This would be an infraction of our EULA as the fonts have been licensed specifically for Chromatic usage. This does not pertain to Inter which is licensed under the SIL Open Font license and therefore can be shared/used freely.
Large paragraph • Through an anonymous survey to our Chromatic team, we have officially earned the Great Place to Work® Certification™. While certifications are lovely, what really matters is that 100% of our team thinks this is a great place to work, that 100% feel our management team delivers on promises, and that 100% of the team feels they can ask questions and get answers. Check out some additional highlights of our survey results. Also checkout what happens with italic text since Inter solely changes slant axis.
Base paragraph • Through an anonymous survey to our Chromatic team, we have officially earned the Great Place to Work® Certification™. While certifications are lovely, what really matters is that 100% of our team thinks this is a great place to work, that 100% feel our management team delivers on promises, and that 100% of the team feels they can ask questions and get answers. Check out some additional highlights of our survey results. Also checkout what happens with italic text since Inter solely changes slant axis.
Paragraph over dark backgrounds • Through an anonymous survey to our Chromatic team, we have officially earned the Great Place to Work® Certification™. While certifications are lovely, what really matters is that 100% of our team thinks this is a great place to work, that 100% feel our management team delivers on promises, and that 100% of the team feels they can ask questions and get answers. Check out some additional highlights of our survey results. Also checkout what happens with italic text since Inter solely changes slant axis.
Small paragraph • Through an anonymous survey to our Chromatic team, we have officially earned the Great Place to Work® Certification™. While certifications are lovely, what really matters is that 100% of our team thinks this is a great place to work, that 100% feel our management team delivers on promises, and that 100% of the team feels they can ask questions and get answers. Check out some additional highlights of our survey results. Also checkout what happens with italic text since Inter solely changes slant axis.
Inline code can look like this, while code blocks might like this:
⚠️ Note that the pre block will be styled in the 11ty codebase itself. The styling of this in Webflow is merely a suggestion. Please see the build repo for actual styling of pre and code blocks. Additionally, these prototypes suggest the usage of JetBrains Mono typeface, but if this is not widely compatible, configuration with the library mentioned above, or presents licensing complications it should be replaced with a similarly styled monotype family.
Animations and transitions are based off of the easeOutQuint cubic bezier curve, and should be applied in increments of 320ms/.32s. Faster transitions can use 240ms (sparingly) while longer durations should be set to 640ms (also sparingly). Webflow's auto-easing calculations sometimes set easeOutQuint as cubic-bezier(.23, 1, .32, 1) as opposed to cubic-bezier(.22, 1, .36, 1). Since both are nearly impossible to tell apart, when applying to a variable-based SASS/SCSS system, feel free to use the more widely-accepted cubic-bezier(.22, 1, .36, 1) curve.
When the platform allows it, smooth scrolling should always be proactively set — do not rely on the device or operating system to provision it (especially considering this is very rarely handled by devices/OSs). For web, this can be handled the majority of the time with the simple scroll-behavior: smooth CSS property or alternatively with the JavaScript scroll({ behavior: 'smooth' }) method.
† = Only passes on very dark or very light backgrounds (#FFF or #000), or vice versa
‡ = Only passes on true black (#000) backgrounds, or vice versa
∆ = Only passes on dark backgrounds
Ø = Only passes on light backgrounds
WCAG 2.1 Color Contrast Board »
The secondary palette should be used very sparingly and only when contextually relevant. For instance, one may use Red/Dark Red and Green/Dark Green for error handling and form validation.
The animated gradients (making use of a WebGL function) requires more refinement and is a work-in-progress. Because of this, some of the swatches below may not render properly or at all.
The form styles below are not currently interactive and each input represent a different interactive state on a "single" input type. The immediate set below represents the default styles (to be used in admin systems like Drupal admin or forms that cannot be refactored into ad-libs, for instance).
The icon set below is employed as a WOFF font file and is available here (multiple formats, Google Drive). Access Branding & Design Materials > 2022 Rebranding > Graphic Assets (Google Drive) for separated SVG files.
The follow iconography is unique to each service category at a global level. For instance, Insights Articles tagged with the "migration" service taxonomy term would receive the migration iconography in its tag terms listing pattern. In addition, all service iconography comes with a small, medium, and large (and animated) variants. They are not interchangeable! Large animated and medium variants should never be used small, and small should never be used larger than ~1rem/18px.
For ease of dissemination the large icons below are not animated, though they are the same SVG code. See the "What we do" page for the animated versions.