This is your friendly resource for all things brand, voice, and design elements. Here at Spiceworks, we celebrate our brand to its spicy core. Why? Because it’s who we are, what we believe, and how we roll. Working with a contractor or agency? Our Style Guide serves as the perfect crash course for all things Spiceworks brand. Feel free to share with outside parties.
Still scratching your head? Just email us at: [email protected]
Modern. Clean. Sizzling with potential. Our logo is the face of our brand identity. But why exactly is a logo so important? Great question. It’s often the first visible encounter our users and clients have with us. It delivers a quick dose of energy that speaks to the essence of our brand — one that the tech world has come to love and associate with Spiceworks.
Our logo is made of two parts: a brandmark and a wordmark
Our brandmark visually represents the work we do (and the spice we deliver!). Flames interconnect to emit energy that amplifies the impact we make every day. Overlapping shapes within the flames embody the network of people we unite across an industry.
At its core, an “S” is revealed — the presence of Spiceworks as we simplify the day for our millions of users and thousands of tech marketers.
Our wordmark is, simply put, the Spiceworks name stylized into art. It appears lowercase for a clean look that perfectly aligns with the cutting-edge internet company we are.
From a legibility standpoint, it didn’t make sense to include the dot on the “I.” Our logo is often used in small formats such as on mobile, and the dot wouldn’t be visible in that scenario.
The brandmark can be viewed as our flair (flare!) and the wordmark as our business casual side. The two elements blaze together to form one radiant logo that captures the friendly, modern, warm persona that is the Spiceworks brand.
Please use the Spiceworks logo as directed…
To build equity with our new logo (and trust with all who see it), we do have some guidelines we’d like you to follow:
Our formal signature is shown here in full color. We use this version when introducing ourselves to our audience for the first time and in places where the audience might not know us as well. Available color variations are shown below.
Occasionally, you may have need for alternatives to our formal signature. The following options are available for use in more familiar environments.
* When using our wordmark alone, consider using the orange variation before the other options.
In order to maintain the integrity of our brand, the logo should always be given an appropriate margin. No components should be placed within the exclusion zone of the logo.
The minimum clear space is defined as x, measured by the height of the “o” in the wordmark. The minimum clear space should be maximized whenever possible.
There are minimum size requirements for our logos to maintain legibility and clarity (and ensure our brand is presented consistently). Below are the minimum sizes for all print and web applications. There are no maximum size restrictions:
Minimum size – 30 px on screen / 0.32 in for print
When using small versions of the logo on web and screens, use a vector-based file format to maintain the integrity of the details and resolution, like .eps and .svg files. And always use vector files for print, no matter how big or small the design.
Appropriate use of logo with an image, photo, or abstract background
Our logo may be placed over images. That said, this application might not always be successful. Be judicious when choosing an image and when placing the logo over an image.
Rule of thumb: The logo should always be clearly visible. Elements from the image should not interfere with the logo, and the logo should not obscure important details in the photo.
Please don’t ever misrepresent our logo! It should never be redrawn, adjusted, or modified in any way (and should only be produced by using the artwork provided). What’s the big deal? If our logo appears in altered forms, it becomes less trusted and less associated with Spiceworks.
Always write the company name in copy (with a capital “S”):
Spiceworks
SpiceWorks
SPICEWORKS
spiceworks
Spice Works
sPiCE wORkS
“When and how should I use Spiceworks social icons?” Great questions. Use them in social media and digital instances where the standard Spiceworks logo won’t work because of size or format restrictions.
When using these social icons to represent Spiceworks — either alone or alongside other social icons — you may use the logo in any of the provided color options: full color, orange, white, grey, or black. While a full color or orange icon is ideal, legibility should take priority. Rule of thumb: The color arrangement that provides the most contrast is the icon that should be used.
Treat your icons right! The Spiceworks social icon should be displayed at equal size and height to the other social media icons. It’s preferred that our icon is represented free of a container. But if a container works best for your needs, feel free to use either a circle, square, or square with rounded corners.
Here are some quick social icon tips:
“Hi, nice to meet you. My name’s Spiceworks, and I’m totally your pal.”
Sound friendly? That’s because we are! Here's a quick breakdown of what our voice is… and isn’t.
Our voice DOES sound: informative, credible, spicy, useful, smart, funny, conversational, human, genuine. Our voice does NOT sound: corporate, robotic, dry, formal, clinical, generic, boring.
Thought experiment: What companies can you think of that are similar to Spiceworks? That’s right, none! We’re a unique brand with a singular voice.
Here’s what IT pros and tech marketers should hear when we speak to them:
“I’m on your side. I get you and the hurdles you face. I’m smart, I’m capable, and you can trust me. Also, I’m a voice you can actually like (GASP!).”
So… how exactly do you, SpiceWriter, capture our voice? Here are a few mechanics that can transform the Spiceworks voice from stale… to spicy!
Corporate jargon, be gone. Write how you’d speak to a friend, not how you’d speak to a robot.
Groan
IT professionals trust the opinions of other IT professionals. In addition, they trust the vendors they encounter in Spiceworks. This is a fundamental component to the success of Spiceworks.
Great
IT pros trust the opinions of other IT pros. And they trust the vendors they meet in Spiceworks. This is what makes Spiceworks a one-of-a-kind experience for IT pros and tech marketers alike!
Jazz up your prose (and keep it flowing) with a healthy mix of punctuation. Question prompts, short sentences, and inspired vocab can transform a yawn-fest… into a spice-fest.
groan – job description
Spiceworks is seeking a job candidate who can generate multiple impressions and strives to increase impressions over time.
great – job description
Are you someone who obsesses over every single impression that gets generated? Do you stay up late brainstorming new ways to amp up impressions until they’re cash machines? You’re in luck!
Although we're moving away from "Spice" mashed up with another word, we do have some existing SpiceWords that should be treated as camel case (first letter of second word is capitalized):
SpiceHead: An IT pro who uses Spiceworks
SpiceWorld: Our annual user conference
SpiceCorps: A local Spiceworks user group
*Spiceworker: Someone who works at Spiceworks (shocking, right?)
*Exception: The name of our company is embedded in “Spiceworker,” so the “w” is lowercase. Have fun SpiceWording!
No matter who we’re talking to, we’re always Spiceworks. That said, you’ll want to tweak the tone to adjust for personality and subject matter. Why? Because depending on the topic/person, the spice-o-meter rises and falls. References that resonate with IT pros (sci-fi) might not click as well with marketers (Mad Men).
Rule of thumb: While being human and conversational should come through no matter who you’re talking to, IT pros need to see the value right out of the gate. Only then should you pepper in the puns and fun (within reason).
groan – Standard error message
An error occurred. Try again later.
great – Spiceworks error message
I’m sorry, but this isn’t working out. It’s not you — it’s me.
Rule of thumb: No matter the type of marketer, you should ALWAYS avoid academic speak (tech writing’s unfortunate default). And just as with IT pros, earn their trust first and then you can bring the spice.
Groan
Spiceworks Vendor Pages are your company’s hub inside the app for direct interaction with your users (and prospects), building and expanding your base of followers of your brand and products/services.
Great
Think of your Spiceworks Vendor Page as your company’s basecamp inside the app — a hub for all your rockin’ marketing campaigns.
Rule of thumb: After trudging through dry, corporate copy, our candidates will rejoice when they first hear the SpiceVoice. It’s potentially their first encounter with our brand, so let’s show them how we roll!
Groan
We are looking for an experienced Associate Video Producer to take responsibility for production management tasks and ensure that videos are produced on budget and on time.
Great
We’re seeking a video editor who can take rough cut footage and polish it into a final cut gem. You’ll render and upload finished products to various online video services, and you’ll have a blast every frame of the way!
Grammar, punctuation, and all that jazz.
When we’re not bringing the spice, we follow Associated Press (AP) best practices. Here’s a summary of how that translates to the types of things we write about most, so that you’re speaking the same language when conversing with the IT world.
Abbrevs and ACREs (Acronyms Commonly Recognized by Everyone) are encouraged so long as they’re popular enough to recognize at a glance.
For example, neither “abbrev” nor “ACRE” should ever be used in copy, as they both likely left you scratching your head. No periods and write out the acronym the first time it’s used in a document if it’s less common.
Common Abbreviations: Tech, info, pro, app, promo, Mac, Spice U
Common Acronyms: IT, SMB, PC, UPS, MSP
They stand for “and,” but they shouldn’t be used in the same way. An “&” symbol is there to connect a compound concept (not a sub for the word “and”).
Ampersands can be used in headlines and blog titles if connecting a compound concept, but never in text unless part of a company’s name or a typical compound concept (R&D).
Ratings & Reviews, Polls & Surveys, Fish & Chips (yum).
DON’T use as a replacement for quotation marks. Apostrophes should only be used around a quote if it’s a quote within a quote.
DON’T use an apostrophe to make a word plural… most of the time.
dos and don’ts, to-dos, 1980s, Q&As, PhDs.
An exception: “Cross your t’s and dot your i’s”
DON’T be too casual. While you might not say the “g” at the end of an “-ing” word aloud (if yer talkin’ like yer from ’round here), avoid dropping the “g” and adding an apostrophe.
DO make names and other proper nouns that end in “s” possessive by just adding an apostrophe afterward: “Spiceworks’ style follows AP Style on this matter.”
DO use to indicate you’re leaving something out.
“Remember the ’90s?”
“Gotta catch ’em all!”
Note: the apostrophes face the direction of what’s being left off: ’80s not ‘80s
Save it for email addresses and crazy-eye emojis: @_@
Defer to the brand’s preference on stylization: ASUS, VMware. Avoid pluralization: Not “Blackberries” or “LEGOs” but “Blackberry devices” or “LEGO blocks.” When referring to an organization as a pronoun use “it” rather than “they.”
Bullets help make information more readable, scannable, and easier to digest.
Keep end punctuation consistent. Avoid using periods unless each item is a complete sentence. If needed, make all items complete or incomplete sentences. When firing off bullets, consistency is key!
Ex: (without end punctuation):
- Free network management and help desk software
- Community that’s home to millions of IT pros
Ex: (with end punctuation):
- Spiceworks is a free and easy-to-use network management and help desk software application.
- The Spiceworks Community is where millions of IT pros in Spiceworks can come to talk shop, get help, and connect with vendors.
Learn More Click to Buy
Avoid capitalizing unless used as a proper noun (such as Spiceworks products): Spiceworks Help Desk, the Spiceworks Community, Spiceworks Vendor Page.
DO lowercase the words help desk, IT pro, and trojan.
DO capitalize the following as noted: IoT, Wi-Fi, and VoIP.
The Great Debate. Have you ever asked yourself if “internet” should be capitalized? Well, we’re here to settle the score once and for all: Nope. Never. AP style used to call for it to be capitalized, but they saw the light — it’s as ubiquitous these days as radio, film, and tv (none of which get the capital treatment).
The internet has revolutionized the way we access information.
Only capitalize formal titles when used immediately before a name. Titles by themselves or following a name (and set off by commas) should be lowercase.
IT Director Keanu loves tacos. Keanu is an IT director who loves tacos.
Headlines should be sentence case: What the heck is sentence case? Glad you asked. The first letter of the first word gets capitalized and all other words are lowercase (just like a sentence!).
Keep tabs on what’s happening in IT
Title case can be used sparingly, such as in a table of contents or for section titles (this portion of the SpiceGuide, for example).
If you’re specifically referring to our Community, capitalize the word. If you’re referring to a community in the generic sense, it does not need to be capitalized
The Spiceworks Community is where SpiceHeads can talk shop, share tips and recommendations, and connect with vendors.
The first letter following a colon should be capitalized if the information forms a complete sentence — otherwise the information should not be capitalized.
Spiceworks essentially has three main branches: an app, a community, and a purchasing platform.
Spiceworks essentially has three main branches: The software delivers a network management and help desk app, an energetic community, and an easy-to-use purchasing platform.
DO use the Oxford/serial comma, the last comma in a series.
Tacos are tasty, nutritious, and cheap.
Why? “I love my grandparents, David Bowie and Count Chocula” could be read as your grandparents are David Bowie and Count Chocula, which would be awesome… but still. For the sake of excessive clarity, we’d write “I love my grandparents, David Bowie, and Count Chocula.” (all true)
Italicize titles of books, video games, movies, albums, and TV shows. Capitalize prepositions and conjunctions of four or more letters in titles. Put quotes around the titles of works that are part of other works (like short stories or songs).
Use them whenever possible.
won’t, isn’t, they’re, aren’t
Why? Contractions help your prose sound more conversational and friendly (just like the Spiceworks brand!)
The em dash — the long one used in this very sentence — is probably the punctuation mark you’re looking for.
A versatile piece of punctuation that may take the place of a comma, colon, or a pair of parentheses used to enhance readability. We prefer spaces around them (less formal).
Create one with ALT + 0151 on PC or Option + Shift + Dash on Mac.
NOT to be used in place of an em dash.
Typically reserved for representing a span or range of numbers.
5–6 million IT pros, the score was 21–7, from 2–3 p.m.
For real grammar nerd points, you can use an en dash in place of a hyphen in a compound adjective with an open or hyphenated compound.
Bartholomew is one IT pro–loving, Brussels sprouts–eating guy.
Create one with ALT + 0150 on PC or Option + Dash on Mac.
Use them to avoid ambiguity or to form a single idea from two or more words.
A hyphen can be used to bring multiple words together as one to modify a word they come before.
I’m a part-time chef who cooks up tongue-scorching tacos.
DON’T hyphenate after an adverb ending in “-ly.”
Rapidly changing taco technology gives me hope for the future.
While you might hyphenate words when they come together to modify a word BEFORE the word they modify, you typically DON’T hyphenate them when they come after the word.
He had an ever-increasing love of tacos. His love was ever increasing.
A 25-year-old taco stand is 25 years old.
You buy your bulk queso fresco from a third party but you turn to a third-party queso fresco provider.
Not datacenter
We prefer to write them as a singular punctuation using Alt + 0133 on a PC or Option + Semicolon on a Mac. Follow this with a space to evoke a pause in your prose (just like… this). An ellipsis may also be used to indicate omitted material when used in brackets […].
Use VERY sparingly and avoid altogether in any instances where copy might be read by an international audience (it might not translate with ’em).
Not e-mail
Use sparingly. These are typically best reserved for short exclamations.
Holy cow! Yay! Boo!
DON'T drop an exclamation point at the end of a sentence in a desperate attempt to punch up otherwise dull verbiage! <-- forced
A fragment is basically a sentence that’s missing a subject and predicate (verb). For the most part, try to avoid using them (unless it’s a stylistic choice that’s consistent, which is difficult to pull off without sounding unprofessional).
SpiceRex is the Spiceworks mascot. Representing the Spiceworks Community.
SpiceRex represents the force-to-be-reckoned-with Spiceworks Community.
The digits “one” through “nine” are generally spelled out, while 10 and above are written as numerals.
Spiceworks has been in operation for seven years and currently has over 200 employees.
Write out the biggies: millions, billions (as opposed to 1M, 2M, etc.). Be sure to write out “over” rather than just “+” (Nay: 5 million+ or 5M+)
Spiceworks is a free IT management app and community connecting over 5 million IT pros and 1,300 tech vendors.
Always spell out a numeral at the beginning of a sentence — rewrite the sentence if necessary.
Wrong
200 employees work at Spiceworks.
Right
Spiceworks currently has 200 employees.There are also special circumstances where numbers less than 10 are not written out. This is typically done when comparing amounts, when the numbers have obvious marketing value, or when specifying a measurement.
2-1 ratio
1 in 3 IT pros
8 GB
Our unique voice is a key ingredient to why millions of IT pros and thousands of tech marketers around the world already love us. And the perk? It’s a big part of what’ll make your job here FUN vs. the typical humdrum grind of other companies.
Can’t tell if your work is too stuffy to be Spiceworks-worthy? Read it aloud and ask yourself: “Do I sound like a like a down-to-earth, likeable, trustworthy person sharing info that’s useful? Or do I sound like an academic drone who’s wearing a button-down shirt and winces at the prospect of having a little fun?”
Still floundering? No worries, we’re all here to do different things!
Just email [email protected] and we’ll help you make sure your writing’s up to Spiceworks snuff!
You're just my type…
Typography can be seen as the foundation of memorable interface design. It’s stylistic importance cannot be stressed enough as it becomes crystallized as an integral part of our logo, brand, and ultimate identity.
Our company standard is Roboto (fitting, right?). And like our company, this typeface is friendly with open counter spaces, curves, and solid engineering. It provides a natural reading rhythm in large and small formats.
And with six weights and 12 styles… you’ll always have the right words! When needing a little variation, Roboto Condensed can be used as an accent. (three weights with six styles)
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
@import url('https://fonts.googleapis.com/css?family=Roboto');
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Aleo is a stylish alternative for headlines and display. It’s a contemporary slab serif with an open, streamlined structure that’s playful while still exuding a business vibe. This family consists of three weights in six styles.
* Do not use this option for body copy.
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
| Aa | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 “,.:;?!$&*” The quick brown fox jumps over the lazy dog. |
@font-face {
font-family: 'Aleo';
src: local('Aleo'),
url("path/to/file/Aleo-Regular.otf") format("opentype");
font-weight: 500;
font-style: normal;
}
font-family: 'Aleo', sans-serif;
It’s all about contrast! Typeface, type size, type weight, and color may be used to communicate which text is most important on a page. Below are examples of how these components are used together to create a typographic hierarchy.
Weight Sample Header
Body copy lorem ipsum. When I started Reynholm Industries, I had just two things in my possession: a dream and 6 million pounds. He's had quite an evening. Someone stole his wheelchair. Did you see who it was? Red bearded man. You can come down here any time and I'll be waiting for you! [slams down phone] That told her!
Size Sample Header
Body copy lorem ipsum. Uh... okay, well, the button on the side, is it glowing? Hello, IT. Have you tried turning it off and on again? See the driver hooks a function by patching the system call table, so its not safe to unload it unless another thread's about to jump in there and do its stuff, and you don't want to end up in the middle of invalid memory!
Color Sample Header could be orange or darker than the body copy.
Body copy lorem ipsum. That's the American one, you berk! No, that's the music you hear when... I'm sorry are you from the past? Well then see a hyper link here.
When using type on a dark gray background, use Trappist-1 Orange or Cloud White to call attention to primary headline text. Secondary headlines and body copy should be set in a smaller point size and heavier weight.
A contrasting color to the headline can be used for additional emphasis. Headline text should always be set in a color from the primary palette. Body copy can be typeset in light gray or white.
Subhead in this style may be used.
You mean 999. Yes, yes, I mean 999! Yeah, I know. That's the American one, you berk!
When using type on a Trappist-1 orange background, use Cloud white to call attention to primary headline text. Secondary headlines and body copy can be dark gray or Cloud. Body copy should be Cloud or black.
Subhead in this style may be used.
You mean 999. Yes, yes, I mean 999! Yeah, I know. That's the American one, you berk!
All headlines on white or light gray background should be orange, black, or dark gray.
A headline in black on white.
How can you two... Don't Google the question, Moss! Yeah, you need to turn it on... uh, the button turns it on.
A headline in dark gray on white.
How can you two... Don't Google the question, Moss! Yeah, you need to turn it on... uh, the button turns it on.
A headline in orange on white.
How can you two... Don't Google the question, Moss! Yeah, you need to turn it on... uh, the button turns it on.
Under NO circumstances should body copy be set in orange.
See the driver hooks a function by patching the system call table, so its not safe to unload it unless another thread's about to jump in there and do its stuff, and you don't want to end up in the middle of invalid memory!
As a general rule, large headlines above 16pt should be set with reduced leading or line spacing. Don’t forget to kern large to reduce gaps between letters.
Roboto light / size 40 pt / leading 44 pt
Roboto light / size 40 pt / leading 44 pt
As a general rule, body copy should be set with a looser leading or line spacing. Body copy should have 0 tracking.
How can you two... Don't Google the question, Moss! Yeah, you need to turn it on... uh, the button turns it on.
Roboto light / size 18 pt / leading 32 pt
How can you two... Don't Google the question, Moss! Yeah, you need to turn it on... uh, the button turns it on.
Roboto light / size 18 pt / leading 18 pt
*When using programs such as Microsoft Office, body copy may be set with automatic or single-spaced leading.
Now in glorious technicolor!
Whether designing for web, mobile, or slide decks, our color palettes allow you to expand on the Spiceworks brand. This helps our audiences recognize us in a quick glance.
A far cry from boring and buttoned-up (or from a kaleidoscope assault on the eyes), the Spiceworks primary palette is intended to inspire a sense of dynamic, hip, innovative confidence.
Our primary brand colors are Trappist-1 (Orange), Earl (Gray), and Cloud (White). Each color is defined in multiple color models (Pantone, CMYK, RGB, or hex code).
Please be sure to always select the color specifications that best suit the intended media. The use of these colors is not limited to the logo, brandmark, or wordmark, but care should be taken to follow the guidelines specifying color usage for our logo. Trappist-1 may be used for headlines and display level copy, but should not be used for body copy.
Please be sure to always select the color specifications that best suit the intended media. The use of these colors is not limited to the logo, brandmark, or wordmark, but care should be taken to follow the guidelines specifying color usage for our logo. Trappist-1 may be used for headlines and display level copy, but should not be used for body copy.
Download Color PalettesWe also have secondary and tertiary support palettes to help jazz up our work. To maintain consistent color throughout print and digital media, our brand colors should be used in the color profile best suited for their application: Pantone, CMYK, RGB, or hex code.
Our secondary palette works in support of our primary brand color palette. The full spectrum works as a unified palette, and each effectively complements or supplements the primary palette.
Use of secondary colors is flexible, but care should be taken to ensure that in no instance would our primary brand colors become subservient to secondary colors.
Typographic emphasis — use secondary colors to provide emphasis or contrast for secondary pull quotes, captions, and other ancillary copy.
Color blocking — use secondary colors as components of backgrounds for text boxes and other small-defined areas of emphasis.
Color fields — use secondary colors as full-bleed fields to add visual impact or to visually define or differentiate types of content.
UI elements — secondary colors may be used in certain cases for UI design. Refer to the Pattern Library for guidance.
Be deliberate — select colors with specific purposes in mind. Avoid using multiple colors for the sake of “variety” when a single color will do.
Be consistent — establish consistent color applications that can unify content across product, service, or support functions.
Be resourceful — use the defined shades and tints to develop additional levels of hierarchy in information and design rather than picking random variations.
* Secondary colors should not be used for body text applications.
In addition to the secondary palette, a tertiary palette further extends the color system for our brand. This palette is bolder than the secondary palette and should be used sparingly for accent purposes.
As with the secondary palette, in no instance would our primary brand colors become subservient to tertiary colors.
Shades and tints of our color palette options.