Prose v1.5

Guided by principles of consistency, simplicity, accessibility, modularity, user-centricity, adaptability, performance, and continuous improvement, we strive to prioritize user needs and evolve with technological advancements.

Explore components Tokens

Quick start

To include the entire Prose UI system, follow these steps. You can also include individual components as needed by using the resources tab on each component page.

  1. Download

    Grab the entire zip pack or download individual files for you specific needs.

    ↓ prose_v1.5.zip

  2. Include

    <link href="{path_to_css}/prs-tokens_v1.5.css" rel="stylesheet" />
<link href="{path_to_css}/prs-reset_v1.5.css" rel="stylesheet" /> <!-- if you do not have a reset already in your project -->
<link href="{path_to_css}/prs-styles_v1.5.css" rel="stylesheet" />

    or

    <style>
  /* tokens - paste here */

  /* reset - paste here - if you do not have a reset already in your project */

  /* styles - paste here */
</style>

  3. Use

    Follow the component documentation and use the provided accessible markup. You can also use the LLMS file in your project or AI prompt to help learn our design system.

    ↓

    You can also include the styles, tokens, and llms files in your AI prompts to have the UI look closer to our brand guidelines.

    Here's an example prompt:

    - Build a **simple** SaaS dashboard app.
- It needs to use `react`, `vite`, and `tailwindcss v4` (for layouts and spacing ONLY).
- Use the `prs-styles` CSS & `prs-tokens` CSS for ALL components.
- Use the `llms` MD file for instructions on how/when to use the CSS/components.

Foundation

Colors

Color is the characteristic of human visual perception described through color categories, with names such as red, blue, yellow, green, orange, or purple. This perception of color derives from the stimulation of cells in the human eye.

Typography

Arranging type to be legible, readable, and appealing when displayed. The arrangement involves selecting typefaces, sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), etc.

Time

These guidelines are meant to help create a consistency across our platform and tools, while providing as much flexibility to users.

Icons

A collection of icons, logos, and illustrations in SVG with live examples and copy/paste-able code snippets all inside fast, cached sprite sheets.

Logos

Macmillan, Achieve, and miscellaneous logos in SVG Symbol, SVG, and PNG format.

Responsive

CSS breakpoints for allowing the UI to render layouts specifically for different screen sizes.

Tokens

CSS custom properties (variables) are entities defined by CSS authors that contain specific values to be reused throughout a document.