meter.com — Design System Reference

1. Visual Theme & Atmosphere

Serious infrastructure with a purple soul. Meter.com chooses a cool-blue-purple slate palette — steel grays tinting toward blue-violet — that signals enterprise networking infrastructure without the cold sterility of typical DevOps palettes. The brand cobalt (rgb(84,97,200)) acts as both primary action and product identity. Mint green and periwinkle semantic chips add accessible status clarity without breaking the cool palette logic. Suisse Intl (a neo-grotesque) lends Swiss precision to every character.

2. Color Palette & Roles

• background: rgb(233, 234, 240) — cool light blue-gray
• textPrimary: rgb(54, 58, 91) — deep blue-violet
• textSecondary: rgb(87, 92, 123) — muted blue-violet
• textTertiary: rgb(114, 118, 148)
• border: rgb(209, 211, 229) — lavender-gray
• white: rgb(255, 255, 255)
• cobalt: rgb(84, 97, 200) — primary brand/CTA
• semanticGreen: rgba(143, 245, 160, 0.75) — positive status
• darkGreen: rgb(17, 90, 30) — positive text on green chip
• semanticPeriwinkle: rgba(209, 215, 255, 0.75) — info status
• periwinkleDark: rgb(62, 70, 160) — info text

Notably absent: Warm tones

3. Typography Rules

Typeface(s): Suisse Intl

Tech stack fonts hint: Next.js

• note: Suisse Intl — a precise Swiss neo-grotesque. Likely tight tracking for display, generous line-height for body reading.
• h1: Large display with negative tracking
• body: 16px regular

4. Component Stylings

Border Radius: Soft-medium — infrastructure dashboard cards with rounded-lg

Shadows: Likely multi-level elevation for dashboard panels

Gradients: None recorded at CSS root

Components lean on spacing and typography for distinction rather than decorative chrome. Buttons likely use filled + ghost variants in the primary colour.

5. Layout Principles

Built on Next.js. Layouts follow a content-first grid — wide gutters, deliberate whitespace rhythm. Section breaks use background-colour contrast rather than divider lines.

6. Depth & Elevation

Elevation system: Likely multi-level elevation for dashboard panels. Depth is used purposefully, not decoratively.

7. Do’s and Don’ts

Do:

• Use the exact colour roles as defined — each serves a specific semantic purpose
• Respect the typeface role boundaries (each font has one job)
• Preserve generous whitespace — crowding breaks the design language
• Keep interactions restrained: hover opacity or colour-shift, not complex transforms

Don’t:

• Introduce colours outside the defined palette
• Mix typefaces beyond the established pairing
• Add drop shadows where the design is intentionally flat
• Use gradients unless the site already employs them
• Add Warm tones
• Add decorative gradients

8. Responsive Behavior

Next.js; blue-gray palette with semantic status chips works cleanly at all sizes

On mobile, the core design language holds — the reduction is spatial (tighter gutters, stacked columns) not stylistic. Colour, typography, and component styles remain unchanged.

9. Agent Prompt Guide

Use this as a one-paragraph brief when prompting an AI to build in this design language:

“Enterprise networking product: cool blue-purple-gray base, Suisse Intl, cobalt #5461C8 primary, mint-green + periwinkle semantic status chips, rounded-lg cards, no warm tones, Swiss precision aesthetic”

Generated by Sparkbites — extracted from live CSS analysis