EMOJI!
DESIGN
MORE.
FASTER.

Welcome to the Postscript Design System! Emoji is a unified language of components and patterns that allows Design, Engineering, and Product to craft consistent, intentional, and exciting experiences for our customers.

Quick links

Brand guide

Access the brand basics and learn how to use them.

Logos

Download the Postscript logo in RGB or CMYK.

Slide decks

Find and use templates featuring our beautiful bananary.

Emojis

Peruse our library of animated emojis to use in your slides.

Design principles

As we grow the Postscript Design team and evangelize within the company, this set of design principles will help us maintain the fundamental traits that have made our team successful thus far. Used in tandem with the Design System, these principles will help us make decisions quickly and confidently, measure our results, and guide our focus.

As simple as SMS

Designs should feel as easy, familiar, and effective as sending a text.

Make bets

It's okay not to know everything. A small, strategic bet could be the next breakthrough. Ship quickly and measure the results.

Rock solid, but not set in stone

We should use established patterns and components first, but be adaptable and unafraid to let customer insights challenge convention.

Design principles are a set of guidelines your team can follow throughout their design process in order to create more aligned experiences. Well-written design principles create alignment, speed up decision-making, and increase the quality of your team's output.

Yesenia Perez-CruzExpressive Design Systems

Foundations

Explore the core brand and learn how we create great experiences.

Our brand purple joins a series of bright supporting hues over a tinted grayscale. A range of "suggested colors" are selected from each hue.

Show only suggested

Grayscale

Gorgon Heap Purple

Grover Blue

Rosita Mint

Oscar Green

Bert Yellow

Ernie Orange

Animal Red

Abby Cadabby Pink

Color tokens correspond to global CSS variables and have assigned light and dark mode values. In Figma, those values are indicated by a 🌙 icon for dark mode, but in code they'll change automatically. Tokens cover common use cases and have an implied purpose, indicated by their name. Don't use token colors for non-semantic elements (i.e., don't use border-color for backgrounds).

Main background color

var(--main-bkg-color)

The main light or dark background color of the page. Near white or dark purple.

🌙

Modal background color

var(--modal-bkg-color)

Background color used by modals. Pure white or dark purple.

🌙

Surface color

var(--surface-bkg-color)

Slightly lighter or darker alternative to the main background color. Useful for a subtle contrast or for raised elements. All text should contrast properly with the Surface color.

🌙

Highlight color

var(--highlight-color)

The primary color indicator of the theme.

🌙

Error Color

var(--error-color)

Scary Gary in action. Use this color for error borders or icons to catch attention and signify danger.

Link colors

var(--link-color)

Used for default links. All link colors should pass 7:1 AAA contrast ratio with Surface Color.

🌙

Link hover colors

var(--link-color-hover)

Used for links in hover states. Full palette is used for a more pronounced transition.

🌙

Link active colors

var(--link-color-active)

Used for links in active states.

🌙

Text color

var(--text-color)

Provides the highest grayscale color contrast possible. This is used for Headings and Microtext. 7:1 AAA contrast ratio with Surface Color.

🌙

Text color (dim)

var(--text-color-dim)

Used for Body Text, this marks the dimmest grayscale contrast possible, while still hitting a 7:1 AAA contrast ratio with Surface Color.

🌙

Border color

var(--border-color)

Borders and other UI elements should achieve a 3:1 contrast ratio with the Surface Color.

Border color (dim)

var(--border-color-dim)

Useful for disabled form fields, or for lesser, dimmer borders that are stylistic and not essential to the experience.

🌙

Field text color

var(--field-text-color)

Colors the text inside a form field.

Field border color

var(--field-border-color)

Defines the borders of form fields, changing colors based on focus and error states.

Creating the palette

The full palette was built by first choosing our brand color (purple), and creating a purple-tinted grayscale with 11 values, 0-10. From there, we settled on our our other brand colors (purple, blue, mint, green, yellow, orange, red, and pink) and created a value scale that aligns each hue to its corresponding grayscale value.

Desaturated hue values align with a corresponding grayscale range. We extrapolate outward to add more shades of each. This creates a full palette, usable in any promotional design or illustration.

To trim down the color values in-use and to create a more utilitarian palette, we suggest a limited range of corresponding color styles to work with (see the card to the left).

Accessibility

Evaluate your designs for proper contrast, color blindness, and the use of exclusive language. Our team uses tools such as Stark to make accessibility in Figma easier.

Each hue uses a range of 11 values, 0-10. 0 is white, 10 is black, and 5 is the accessible middleground between the two. The palette's 0-10 range ensures that WCAG contrast standards are easily maintained. Matching a color with another at least 7 steps away ensures a strong 7:1 AAA contrast rating (though 5-6 steps is typically enough to meet at least a 4.5:1 AA rating).

Dark mode

Providing an alternative dark UI is important for relieving eye strain, improving energy consumption, and respecting users' system settings. Our system strives to make dark mode easy to attain, but test your designs on both light and dark backgrounds.

For most purposes, Postscript uses Inter Regular 400 and SemiBold 600. For emphasis and style, Roc Grotesk is used in varying styles, typically Bold 600.

Extra Large Heading

4.25rem/4.5rem • 68px/72px • 51pt/54pt

Large Heading

3.125rem/3.375rem • 50px/54px • 37.5pt/28.5pt

Medium Heading

2.375rem/3rem • 38px/48px • 28.5pt/36pt

Small Heading

1.75rem/2.25rem • 28px/36px • 21pt/27pt

Extra Small Heading

1.375rem/1.875rem • 22px/30px • 16.5pt/22.5pt

Extra (Extra) Small Heading

1rem/1.5rem • 16px/24px • 12pt/18pt

Large Body Text

1.375rem/1.875rem • 22px/30px • 16.5pt/22.5pt

Medium Body Text

1rem/1.5rem • 16px/24px • 12pt/18pt

Small Body Text

.875rem/1.5rem • 14px/24px • 10.5pt/18pt

Extra Small Body Text

.75rem/1.5rem • 12px/18px • 9pt/13.5pt

Large Eyebrow Text

1.875rem/2.25rem • 30px/36px • 22.5pt/27pt

Large Eyebrow Text

.75rem/1.5rem • 12px/18px • 9pt/13.5pt

Type is handled via styled React components, each with its own props to handle size, weight, and line-height. This helps take the guesswork out of implementing text. Below are the CSS variables consumed by the type components, and used anywhere these font styles need to be mimicked.

Extra large heading

var(--heading-x-large)

The font definition for extra large Heading component (600 4.25rem/4.5rem var(--heading-typeface)).

Large heading

var(--heading-large)

The font definition for large Heading component (600 3.125rem/3.375rem var(--heading-typeface)).

Medium heading

var(--heading-medium)

The font definition for medium Heading component (600 2.375rem/3rem var(--heading-typeface)).

Small heading

var(--heading-small)

The font definition for small Heading component (600 1.75rem/2.25rem var(--heading-typeface)).

Extra small heading

var(--heading-x-small)

The font definition for extra small Heading component (600 1.375rem/1.875rem var(--heading-typeface)).

Extra (extra) small heading

var(--heading-xx-small)

The font definition for extra (extra) small Heading component (600 1rem/1.5rem var(--body-text-typeface)).

Large body text

var(--body-text-large)

The font definition for large BodyText component (400 1.375rem/1.875rem var(--body-text-typeface)).

Medium body text

var(--body-text-medium)

The font definition for medium (normal) BodyText component (400 1rem/1.5rem var(--body-text-typeface)).

Small body text

var(--body-text-small)

The font definition for small BodyText component (400 0.875rem/1.5rem var(--body-text-typeface)).

Extra small body text

var(--body-text-x-small)

The font definition for extra small BodyText component (400 0.75rem/1.125rem var(--body-text-typeface)).

Large eyebrow text

var(--eyebrow-text-large)

The font definition for large EyebrowText component (600 1.875rem/2.25rem var(--heading-typeface)).

Small eyebrow text

var(--eyebrow-text-small)

The font definition for small EyebrowText component (600 0.75rem/1.125rem var(--heading-typeface)).

Heading typeface

var(--heading-typeface)

The font-family definition for the Heading component ('roc-grotesk', 'Helvetica', sans-serif).

Wide heading typeface

var(--wide-typeface)

The font-family definition for wide heading text (used by Studios only) ('roc-grotesk-wide', 'Inter', 'Helvetica', sans-serif).

Body text typeface

var(--body-text-typeface)

The font-family definition for the Body Text component ('Inter', 'Helvetica', sans-serif).

Monospace typeface

var(--mono-typeface)

The font-family definition for Code and other monospaced text components (SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace).

`<heading>` elements

Semantic heading elements don't necessarily correspond to the size of a heading. In other words size="x-large" headings don't need to be <h1> elements, but should rather correspond to the contextual usage of the element. Use semantic heading numbers contextually.

Links and emphasis

Afford links using Inter SemiBold/Roc Grotesk Bold and/or an accent color. Links can also be underlined for extra affordance in situations where they otherwise may not stand out. Link hover colors are a step darker over a dark background and a step lighter over a light background.

Emphasis is indicated via the 600 weight and an accent color (where appropritate).

Responsiveness

Headings and large Body Text can optionally be set to respond down to smaller sizes on small screens.

Line height

Line heights are set per font style, chosen for legibility and to line up with our 6px baseline. It's best to use the line height associated with the font size you select. Unless you have a very good reason, do not override the line height/font size pairings.

Spacing

Sizes for type are referred to in Extra Small, Small, Medium, Large, and Extra Large intervals. In application, they're set in rem values for flexibility. This allows us to effectively increase or decrease the base font size proportionally, based on future brand expression. Vertical margins between headlines and body text can vary based on text size and the density you want to create in your content.

Hierarchy and pairing

Type sizes increase by a perfect fourth increment (1.333), adjusted slightly to avoid subpixel values. (Okay, so it's not a perfect fourth.) Working from our 16px base and increasing/decreasing by our "perfect" fourth ratio, we've included 6 heading sizes, 4 body text sizes, and 2 variations eyebrow text.

A small heading

...pairs well with large body text.

An extra small heading

...pairs well with medium body text.

An extra (extra) small heading

...pairs well with small body text.

Our spacing system creates a consistent baseline unit for our brand: 6px. Adjust it by variable ratios to control rhythm, density, and the grid system.

Alignment and spacing

Margins and paddings in and around elements should be in increments of our 6px baseline—including the horizontal padding inside elements. This maintains harmony between vertical and horizontal spacing. Components should control their own internal spacing, whereas the space between components should be determined by the template of the page.

When laying out elements on a page, watch the edges and ensure proper alignment. Don't allow elements to weave unnaturally around a page.

CSS Variables

Spacing variables are available in increments of 6px, used primarily for quickness and consistency in margins and padding.

6px

var(--spacing-1)

12px

var(--spacing-2)

18px

var(--spacing-3)

24px

var(--spacing-4)

30px

var(--spacing-5)

36px

var(--spacing-6)

42px

var(--spacing-7)

48px

var(--spacing-8)

54px

var(--spacing-9)

60px

var(--spacing-10)

Layout grids

Layouts in the Postscript ecosystem are generally based on 12-column grids with a 6px baseline. Each department of Postscript will have custom layouts to achieve their designs, based off these basic rules. Be sure to check the Product layout documentation and Studios component documentation to better understand the needs and use cases for each.

Responsiveness

Our users work primarily on desktops (most often at 1440 x 900), and many of our users access the application via their phones. In the product, strive to make non-complex flows fully responsive, designing for the documented breakpoints. More complex user interaction where full optimization is impractical—such as Flows or Popup design—should be at minimum accessible and navigable.

Content width

Layout modules can be as wide or narrow as you need them to be. However, avoid allowing text and layouts to simply expand full-width in a very wide container. This reduces readability, looks unintentional, and can reduce usability by adding unnecessarily large distances between related elements (violating Fitt's Law). In general, aim for a base width of 80 characters for your text, or at least strive to preserve the customer's ability to reduce the screen size to achieve 80 characters.

This paragraph is very long, stretching the full width of its container. At large sizes, this text will grow too long to read comfortably. The CTA is also placed very far to the right, decreasing its visibility and relation to the material.

This paragraph is also long, but has a max-width to help limit the character count of each line. This makes it easier to read, and helps keep the CTA present and noticeable.

Here you'll find guidlines on speaking as our brand, including basic instruction from the Nielson Norman Group on making UI copy successful. Source

Short but clear CTAs

Use just enough text to make CTAs specific and actionable. Avoid articles and use no more than 5 words. Avoid possessive terms such as "View My Automations" or "Delete Your Campaign".

Use Title Case for CTAs.

Mindful headings

A heading gives a summary of its content. Avoid punctuation, except when it adds clarity or makes an amusing point.

Use Sentence case for headings.

Consistent, specific command words

Whether it's in a Dropdown Menu or a Button, a command should always be a consistent term. If you say "Upload Image" in one place, don't say "Choose File" in another if it's the same action.

Consequent state > Current state

Describe what the action WILL do, rather than what it is. A playing video has a Pause button, not an Is Playing button.

Action verbs

Try to follow the active Verb > Noun format for commands. "Next Slide" is clearer than "Next," and "Accept Terms & Conditions" is clearer than "Got It".

No vague or generic commands

Be explicit in your command names. Avoid "Download Now" or "See the Thing". Also avoid generic terms like "Okay," "Got It," and "Done."

Adjectives

Use adjectives to indicate change in appearance or state. The adjective should always reflect how the element will change. For example, for text editing, adjectives such as Regular, Bold, or Italic are used to describe the change in appearance.

Minimal branded terms

In-house or company-wide terminology for products or features may be clear to you, but a customer will not know what "Cheese" means (historical Postscript product codename), or what an "Exit Trigger" is without help. Try making a feature term clear, rather than explaining it in a tooltip.

Ellipsis = More

Use an ellipsis (...) to indicate that more input or another action will follow.

Keyboard shortcuts

Consider adding keyboard shortcuts to accomplish frequent tasks. Don't override common shortcuts (e.g., cmd + s), but watch users for cues.

Minimal tooltips

Tooltips can be great to contextualize terms or explain difficult concepts. But they're also a crutch. Use them as a last resort or an occasional cherry. Try to resolve complexity via other UI/UX methods first, and avoid littering the interface.

Clear outcomes

Although tooltips are rarely the right answer, if a command is irreducibly complex, provide some form of description in the interface.

As a design team, we take note of reusable patterns or guidelines that provide the best solutions for our users. Current Postscript design patterns are documented here.

Border radius

We use three levels of border-radius. From outer elements inward, we use large (24px), medium (12px), and small (6px). For instance, a larger container Card will have a large border-radius, while the content inside that card would be medium to small.

Supplementary border radius

Currently, some small elements such as form fields use one level smaller: an extra-small 3px. This is used to create a slightly off-round effect for certain small elements. In addition, you'll find a variable used to make corners a consistently round 999px. These styles are very specific and should not be used as a practice.

Tokens and CSS variables

Small border radius

var(--border-radius-small)

A small 6px radius is good for small items and tight spaces, or a simple softening of an element.

6px

Medium border radius

var(--border-radius-medium)

A 12px radius is a strong default.

12px

Large border radius

var(--border-radius-large)

A 24px radius is great for large Cards or containing items with smaller radii.

24px

(Extra) small border radius

var(--border-radius-x-small)

3px adds a slightly rounded effect. Use this very sparingly.

3px

Round border radius

var(--border-radius-round)

A massive border radius that will round most any element.

999px

Box shadow and elevation

Box shadows indicate elevation between elements, separate containers from similar backgrounds, and afford the interactivity of an element. Elevation is not a large factor in our designs at Postscript. However, a single layer of elevation is necessary for Card layouts, providing a sense of depth and contrast. Typically, stick to the small box-shadow listed here, raising elevation only to contrast with the plane beneath.

Tokens and CSS variables

Low elevation

var(--box-shadow-small)

Small elevation documentation

Low

Medium elevation

var(--box-shadow-medium)

Medium elevation documentation

Medium

Large elevation

var(--box-shadow-large)

Large elevation documentation

Large

Buttons

Limit the number of Buttons on a page. Every page should serve a purpose. Aim for one Primary Button, followed by Secondary and tertiary Text Buttons. When grouping buttons together, follow hierarchy rules. Pair a Primary action with a Secondary action or Text Button. Include appropriate space between, placing the higher import Button on the right side (no hate please).

Adding and removing

When adding an item that uses pre-existing information, use a text button with the following structure: "+ Add [Item]"See "+ Add Rule" in the example.

When creating something new or adding a complex group, use a text button with the following structure: "+ Create [XXX]"See "+ Create Filter" in the example.

When removing an item from a given area in the app, use the "X" icon in a text button next to the item.See "Rule 1" and "Rule 2" inputs in the example.

When deleting an item (causing it to no longer exist anywhere on the app), use the trash can icon in a text button next to the item.

When removing or deleting a group, use the action in a text button with the following structure: "[Action] [Group]". See "Delete Filter" in the example.

AND

Components

Documented patterns and components enable fast and meaningful change by promoting efficiency, consistency, and scalability.

Core • Components

This is our primary library of components, available in Figma and code and fully documented in Storybook.

Figma

Storybook

Core • Styles

These are the base Figma styles shared between Studios and Product. They include colors, type, layout grid, and effect styles.

Figma

Studios • Components

Studios needs to explore and play to push the brand and the website. This is their custom component library, built off of Core · Styles and Core · Components.

Figma

Storybook

Product • Components

Product Design's custom component library built off of Core · Styles and Core · Components in relation to the Postscript App.

Figma

Storybook

Core • Icons

This is our shared icon set, based on the Iconic library.

Figma

Storybook

Core • Emojis

Emoji is such a big part of the SMS world that we've got a whole library of them based off of JoyPixels.

Figma

Storybook

Contributing

We're building a minimal but unique Design System at Postscript that encourages collaboration. Here, you'll find guidelines for designers and developers on contributing components, patterns, designs, or code.

Strive for design and code parity

A Design System is not just Figma, and it's not just Storybook! Keep code and design aligned as much as possible to ensure design and development are speaking the same language and telling the same story.

Use Storybook as the source of truth

We use Storybook as our source of truth. It contains all our component documentation, and we strive to keep it in line with designs. If work exists in Figma but not in code, customers can't see it!

Expect things to change

The important thing is to think modularly, ensure we're using consistent components and patterns, and build in levers and dials that can be used to make big impact with small, iterative changes.

Give feedback and ask questions

Wondering why things are the way that they are? The System is managed by the Design team. Feel free to ask us any questions you might have or provide us with your awesome feedback. You can learn more about contributing to the System as a designer or developer by reading this document.

EMOJI!DESIGNMORE.FASTER.

Quick links

Brand guide

Logos

Slide decks

Emojis

Design principles

As simple as SMS

Make bets

Rock solid, but not set in stone

Foundations

Grayscale

Gorgon Heap Purple

Grover Blue

Rosita Mint

Oscar Green

Bert Yellow

Ernie Orange

Animal Red

Abby Cadabby Pink

Creating the palette

Accessibility

Dark mode

Components

Core • Components

Core • Styles

Studios • Components

Product • Components

Core • Icons

Core • Emojis

Contributing

Strive for design and code parity

Use Storybook as the source of truth

Expect things to change

Give feedback and ask questions

EMOJI!
DESIGN
MORE.
FASTER.