PM7 UI Style Guide

A comprehensive guide to the design system, tokens, and visual language of PM7 UI.

Colors

PM7 UI uses a semantic color system that automatically adapts to light and dark modes.

Primary Colors

Aa
Background
--pm7-background
Aa
Foreground
--pm7-foreground
Aa
Primary
--pm7-primary
Aa
Secondary
--pm7-secondary

Semantic Colors

Aa
Muted
--pm7-muted
Aa
Surface
--pm7-surface
Aa
Accent
--pm7-accent
Aa
Destructive
--pm7-destructive

Border & Ring

Border
Border
--pm7-border
Ring
Ring
--pm7-ring

Typography

PM7 UI uses system fonts for optimal performance and native feel.

Heading 1 - The quick brown fox

Heading 2 - The quick brown fox

Heading 3 - The quick brown fox

Heading 4 - The quick brown fox

Heading 5 - The quick brown fox
Heading 6 - The quick brown fox

Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Small text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Code text - const example = "PM7 UI";

Font Stack

--pm7-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                   Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 
                   'Helvetica Neue', sans-serif;

Spacing

PM7 UI uses a consistent 4px spacing scale.

1
2
3
4
5
6
8
10
12
16
Token Size Pixels Common Usage
0.25rem 1 4px Tight spacing, small gaps
0.5rem 2 8px Icon spacing, small padding
1rem 4 16px Default padding, margins
1.5rem 6 24px Section spacing
2rem 8 32px Large padding, section gaps

Border Radius

Consistent border radius values for a cohesive design.

--pm7-radius-sm

4px

--pm7-radius

8px

--pm7-radius-lg

12px

Full

50%

Shadows

Elevation system for depth and hierarchy.

Small

--pm7-shadow-sm

Default

--pm7-shadow

Large

--pm7-shadow-lg

Icons

PM7 UI includes a curated set of commonly used icons. All icons are 24x24 SVGs optimized for web use.

Using Icons

<!-- Import specific icon -->
<script>
  import { ChevronDown } from '@pm7/core/icons';
</script>

<!-- Or use directly in HTML -->
<img src="@pm7/core/icons/chevron-down.svg" width="24" height="24" alt="Chevron Down">

Animation

PM7 UI uses subtle animations for a polished user experience.

Timing Functions

Token Value Usage
--pm7-ease-in cubic-bezier(0.4, 0, 1, 1) Enter animations
--pm7-ease-out cubic-bezier(0, 0, 0.2, 1) Exit animations
--pm7-ease-in-out cubic-bezier(0.4, 0, 0.2, 1) Default transitions

Durations

Token Value Usage
--pm7-duration-fast 150ms Micro-interactions
--pm7-duration-normal 200ms Default transitions
--pm7-duration-slow 300ms Complex animations

Z-Index Scale

Consistent z-index values to prevent stacking conflicts.

Token Value Usage
--pm7-z-dropdown 50 Dropdowns, tooltips, popovers
--pm7-z-sticky 60 Sticky headers, fixed elements
--pm7-z-modal 100 Modals, dialogs, overlays
--pm7-z-toast 150 Toast notifications (highest)

Responsive Breakpoints

PM7 UI is mobile-first with these breakpoint values.

Breakpoint Min Width CSS Variable Usage
Mobile 0px Default Base styles
Tablet 768px --pm7-screen-md Tablet portrait
Desktop 1024px --pm7-screen-lg Small desktop
Wide 1280px --pm7-screen-xl Large desktop

Using Breakpoints

/* Mobile first approach */
.pm7-component {
  padding: 1rem;
}

@media (min-width: 768px) {
  .pm7-component {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .pm7-component {
    padding: 3rem;
  }
}