Building risk, managed.
The single reference for SAMRISK's visual language — brand, color, typography, components, and patterns used across the platform.
12
Reference sections
40+
Design tokens
20
UI components in use
Color palette
SAMRISK uses a single primary blue paired with a slate neutral. Click any swatch to copy the hex.
Primary — Blue
Used for primary actions, links, focus rings, and brand accents.
Neutral — Slate
Surfaces, text, borders, dividers. The foundation of every screen.
Semantic colors
Reserved meanings — don't use these for decorative purposes.
Confirmations, completed states, positive trends
Caution states, upcoming deadlines, pending review
Destructive actions, validation errors, overdue items
Neutral system messages, tooltips, help text
Theme color
Used in PWA manifest, mobile address bar, and Open Graph cards.
A slightly more saturated blue than primary-500 — chosen for higher visibility in OS chrome and on dark social-card backgrounds.
Typography
Inter for everything. JetBrains Mono for code, hex tokens, and labels. Title case — never uppercase headings.
Building risk, managed.
Page heading
Section heading
Subsection heading
Card title
Introductory text or lead paragraph
Larger body copy for marketing or hero descriptions.
Default body text used throughout the product UI.
Field label
Helper or secondary copy below a field
Token, hex, or code snippet
Eyebrow label
Spacing scale
Every margin, padding, and gap is a multiple of 4px. Tailwind tokens map 1:1 — p-4 = 16px.
| Token | Pixels | Visual | Common use |
|---|---|---|---|
0.5 | 2px | Hairline gap inside dense form rows | |
1 | 4px | Base grid unit | |
2 | 8px | Icon-to-label spacing, tight stack | |
3 | 12px | Compact card padding, button gap | |
4 | 16px | Default card padding, vertical rhythm | |
6 | 24px | Section gap, modal padding | |
8 | 32px | Page block separation | |
12 | 48px | Major page section padding | |
16 | 64px | Hero vertical padding | |
24 | 96px | Marketing-page hero, between-sections |
Responsive breakpoints
Mobile-first. Use Tailwind's sm:, md:, lg:, xl: prefixes to scale up.
Mobile
— < 640px
Single column. Sidebars hide. Touch-first.
sm
sm≥ 640px
Two-column forms, dense tables.
md
md≥ 768px
Tablet layouts, sidebar reveal.
lg
lg≥ 1024px
Desktop layout with permanent sidebar.
xl
xl≥ 1280px
Wide layouts, multi-column dashboards.
2xl
2xl≥ 1536px
Edge case — large-monitor density.
Components in use
A sampler of the most-used Nuxt UI primitives in SAMRISK. Switch to the Components view for the full reference.
Buttons
Badges
Alerts
Cards
Property: Riverside Tower
15 floors · 42 risk items tracked · last audit 2 weeks ago
Forms & inputs
Every field uses UFormField for the label, help text, and error slot. Labels are sentence case.
Data display
Tables, status badges, progress, and skeleton loaders — the workhorses of the SAMRISK product UI.
Status badges
Progress
Risk assessment completion
68% complete
Skeleton
Use while data is loading — match the dimensions of the real content.
Empty state
No audits yet
Schedule your first periodic audit to get started.
Dark mode
Every surface gets both themes. Use dark: variants and the useColorMode composable. Toggle dark mode using the button in the top right.
Light
Riverside Tower
15 floors · 42 risk items
Dark
Riverside Tower
15 floors · 42 risk items
Motion
Subtle and fast. 200ms color transitions globally; modal/menu animations come from Nuxt UI defaults. Respect prefers-reduced-motion.
Color transitions
200ms ease — applied globally to buttons, links, inputs.
transition: all 200ms easeFocus ring
2px primary-500 outline, 2px offset. Always visible on keyboard focus.
Reduced motion
All animations collapse to 0.01ms when the user has reduced-motion enabled in OS settings.
Logo & brand assets
The SAMRISK mark — clear space, minimum size, and usage on different backgrounds.
Guidelines
- Maintain clear space equal to the height of the mark on every side.
- Minimum size: 24px tall in product UI; 48px tall in marketing.
- Use the SVG for any size above 64px; rasterised PNGs for icons and favicons.
- Don't stretch, recolor, add effects, or place on busy photographic backgrounds.
Do's & Don'ts
The shortest list of rules that will keep SAMRISK looking like SAMRISK.
Do
Use SAMRISK blue for primary actions
Save, submit, and confirm buttons use primary-500. One primary call-to-action per view.
Pair slate text on white surfaces
Body text is slate-700 on white in light mode, slate-100 on slate-900 in dark.
Default to Inter at 15px body
Match the SAMRISK app exactly. Larger sizes are reserved for marketing or empty-state hero copy.
Use UFormField for every input
It gives consistent label, help text, and error styling across the product.
Respect the 4px spacing grid
Every margin, padding, and gap is a multiple of 4px. Use Tailwind tokens (1, 2, 4, 8…).
Provide a focus-visible ring
Every interactive element shows a 2px primary outline on keyboard focus. Don't override this for visual taste.
Don't
Don't introduce new accent colors
Stick to blue + slate + the four semantic colors. New hues need design review.
Don't use pure black (#000) or pure white in dark mode
Use slate-900 surface on slate-950 canvas. Pure black is too harsh against any colored content.
Don't use uppercase headings
SAMRISK is a professional B2B tool, not a brutalist brand. Use sentence case.
Don't mix component libraries
Use Nuxt UI components only. No custom buttons or inputs unless wrapping Nuxt UI primitives.
Don't hide error messages
Validation errors always render below the field via UFormField's `error` slot.
Don't skip dark mode
Every new surface gets both light and dark styling. `dark:` variant is mandatory, not optional.