POST Design System Using the system
Get started

Using the system

Three files. Load them once and every component on this site works in your page.

1 · Styles

Tokens, type and every component class, in one stylesheet.

<link rel="stylesheet" href="assets/post-ui.css">

2 · Behaviour

Select, Checkbox, Radio, Accordion, Search and Chips need this. Static components do not, but one script covers the page either way. Listeners are delegated from the document and state lives in the DOM, so it survives re-renders.

<script src="assets/components.js"></script>

3 · Icons

The sprite defines the glyphs; it draws nothing on its own. Paste it once per page that uses an icon.

<!-- paste the contents of assets/icons.svg near the top of <body> -->
<svg class="post-icon"><use href="#post-icon-search"/></svg>

Typefaces

Neue Haas Grotesk Display is a licensed Monotype typeface. It is served here from POST's Adobe Fonts kit and is not redistributed with these files - you need your own licence to use it in your own product. If the kit does not load, the stylesheet falls back to a metric-matched local face so layout holds its line breaks instead of reflowing.

JetBrains Mono is used for code and token names. It is licensed under the SIL Open Font License and ships with these files.

Permissions

POST Houston is a Lovett Commercial project. The logotype, the shape library and the POST name are POST's own marks — please ask before using them outside POST and its tenants.

Brand, asset and permission enquiries
Lovett Commercial