---
title: "Pravāh design system"
variant: extended
source: https://www.pravah.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/pravah-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Pravāh · Design System

> Quiet precision for the grid’s next century

**Theme:** light · **Industry:** ai · **Source:** https://www.pravah.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Pravāh pairs a quiet, warm-neutral interface with expansive imagery of the physical electric grid. Oversized typography, restrained controls, and research-led visuals position the site as both a technical platform and an engineering-led institution.

## North star

Keep the interface warm, quiet, and editorial; let the scale and detail of grid imagery provide the visual drama.

## Overview

The page is built on a warm near-white canvas (#fdfcf9), with near-black text (#17140f) carrying the main headline and primary contact button. Muted gray-brown copy keeps supporting information readable without competing for attention; thin pale borders divide the navigation and content bands. Switzer provides a contemporary sans-serif voice, using large, tightly tracked headline styles against relaxed body copy. The opening hero aligns a concise text block on the left with a pale, expansive grid image on the right, creating contrast through composition rather than saturated color. Below, research and product sections alternate text with maps, charts, and interface imagery; soft lilac and stone surfaces distinguish selected content cards. Green tones appear mainly in data graphics and gradient details, not as a dominant interface color. Spacing feels open and deliberate, with restrained controls and clear section separation supporting an editorial, engineering-focused presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fdfcf9` | `--color-gallery-white` | brand | Primary page canvas and light navigation background; the dominant warm-white field behind the content. |
| Quiet Taupe | `#6b665e` | `--color-quiet-taupe` | neutral | Muted supporting copy and understated navigation links. |
| Grid Ink | `#17140f` | `--color-grid-ink` | brand | Main headlines, body emphasis, and dark primary contact buttons. |
| Soft Divider | `#e1dfdd` | `--color-soft-divider` | neutral | Fine borders separating navigation, cards, and content sections. |
| Stone Surface | `#e8e4dc` | `--color-stone-surface` | surface | Warm neutral card surface, including the computer-vision feature cards. |
| Grid Green | `#5f9e82` | `--color-grid-green` | accent | Green accent in data visualization and gradients; not a dominant interface fill. |
| Sage Mist | `#9ec0ad` | `--color-sage-mist` | accent | Lighter green gradient stop and supporting tones in grid-related visuals. |
| Lilac Field | `#cfc7ef` | `--color-lilac-field` | surface | Soft lilac card background and product-visual surface. |
| Charcoal Umber | `#3d3831` | `--color-charcoal-umber` | neutral | Secondary dark text tone appearing in minor text details. |
| Warm Gray | `#8a8478` | `--color-warm-gray` | neutral | Low-emphasis text details and secondary labels. |
| Graphite | `#20211f` | `--color-graphite` | neutral | Minor dark text and subtle card-shadow tint. |
| Cool Gray | `#8a8a92` | `--color-cool-gray` | neutral | Small text details within interface and data imagery. |
| Pale Sage | `#a9cdba` | `--color-pale-sage` | accent | Light gradient and data-visualization tone, used as a supporting green. |
| Quiet Silver | `#cac9c5` | `--color-quiet-silver` | neutral | Subtle gray border or minor text detail. |
| Earth Shadow | `#4a443c` | `--color-earth-shadow` | neutral | Minor supporting text tone, not a primary interface color. |

### Semantic aliases

`--color-canvas` → `#fdfcf9` (Gallery White) · `--color-surface` → `#e8e4dc` (Stone Surface) · `--color-surface-2` → `#cfc7ef` (Lilac Field) · `--color-text` → `#17140f` (Grid Ink) · `--color-text-muted` → `#6b665e` (Quiet Taupe) · `--color-border` → `#e1dfdd` (Soft Divider) · `--color-accent` → `#5f9e82` (Grid Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#17140f` | `#fdfcf9` | 17.9:1 | AAA |
| `#17140f` | `#e8e4dc` | 14.48:1 | AAA |
| `#17140f` | `#cfc7ef` | 11.43:1 | AAA |
| `#6b665e` | `#fdfcf9` | 5.55:1 | AA |
| `#6b665e` | `#e8e4dc` | 4.49:1 | AA-large |
| `#6b665e` | `#cfc7ef` | 3.54:1 | AA-large |
| `#5f9e82` | `#fdfcf9` | 3.06:1 | AA-large |
| `#5f9e82` | `#e8e4dc` | 2.47:1 | fail |
| `#5f9e82` | `#cfc7ef` | 1.95:1 | fail |

### Gradients

- `linear-gradient(90deg, rgba(95, 158, 130, 0.55), rgb(95, 158, 130))`
- `linear-gradient(90deg, rgb(169, 205, 186), rgb(95, 158, 130))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Switzer | `--font-body` | webfont | 400, 500, 600 | Display and interface type throughout, from hero headlines to navigation and buttons. | Inter |
| IBM Plex Mono | `--font-mono` | webfont | 400 | Compact technical labels, captions, and code-like details. | IBM Plex Mono |
| JetBrains Mono | `--font-jetbrains-mono` | webfont | 400 | Minor monospace details in technical and data-oriented content. | IBM Plex Mono |

- **Switzer:** Use medium-weight, tightly tracked headlines; keep body copy regular and sentence case.
- **IBM Plex Mono:** Monospaced, compact supporting type; measured code role uses expanded tracking.
- **JetBrains Mono:** Use sparingly for technical metadata; regular weight and monospaced character.

### Type scale — Perfect Fourth (ratio ≈ 1.337, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1.02 | -0.04em | — | Switzer | Large editorial display headings for prominent page statements. |
| h1 | 52px | 500 | 0.92 | -0.04em | — | Switzer | Hero headline and primary page-level heading. |
| h2 | 42px | 500 | 1.04 | -0.034em | — | Switzer | Section titles introducing research and product areas. |
| h3 | 34px | 500 | 1.12 | -0.03em | — | Switzer | Feature and product-card headings. |
| h4 | 28px | 500 | 1.12 | -0.03em | — | Switzer | Smaller nested feature headings. |
| body | 15px | 400 | 1.62 | 0 | — | Switzer | Main explanatory copy and descriptive paragraphs. |
| caption | 14.5px | 400 | 1.4 | -0.01em | — | Switzer | Compact supporting descriptions and image captions. |
| button | 14px | 500 | 1.6 | 0 | — | Switzer | Contact and product action labels. |
| link | 13px | 400 | 1.6 | 0 | — | Switzer | Navigation, text links, and understated secondary actions. |
| code | 10.5px | 400 | 1.6 | 0.12em | — | IBM Plex Mono | Technical labels and code-like metadata. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 3, 4, 6, 7, 8, 9, 10, 12, 13, 14, 16, 20, 22, 24, 28, 32 px.
- Section rhythm 48px · element gap 16px · card padding 25px · max content width 1359px.

A wide, editorial canvas uses a centered page frame capped at the measured 1359px maximum width. The top navigation spans the page with fine vertical separators, then the hero places a left-aligned text block beside full-bleed grid imagery. Subsequent sections alternate text-and-image layouts and card groupings, with generous section rhythm and comfortable content density. Keep alignment crisp, use open negative space around headings, and let imagery occupy large uninterrupted areas rather than crowding the copy.

## Shape & elevation

- Radius: button `3px` · card `20px` · xs `3px` · sm `5px` · md `8px` · lg `20px` · pill `9999px`
- Shadow `lg` (other, card): `rgba(23, 20, 15, 0.1) 0px 1px 2px 0px, rgba(23, 20, 15, 0.5) 0px 18px 40px -28px`
- Shadow `lg-2` (other): `rgba(23, 20, 15, 0.08) 0px 1px 2px 0px, rgba(23, 20, 15, 0.5) 0px 14px 30px -26px`
- Shadow `xl` (card): `rgba(23, 20, 15, 0.04) 0px 2px 4px 0px, rgba(23, 20, 15, 0.1) 0px 28px 70px 0px`
- Shadow `xl-2` (card): `rgba(32, 33, 31, 0.04) 0px 2px 4px 0px, rgba(32, 33, 31, 0.1) 0px 28px 70px 0px`

The interface is mostly flat, with pale hairline borders doing the structural work. Keep navigation and section divisions crisp; reserve soft, deep shadows for layered interface mockups or selected cards shown within imagery. Avoid floating the entire page or applying heavy shadows to ordinary content blocks.

## Imagery

Use expansive, pale-toned imagery of power infrastructure, maps, weather, and network systems. Mix research-style visualizations with product-interface mockups, including charts and map overlays. Keep the hero image atmospheric and softly contrasted so the headline remains dominant; use product graphics as legible evidence, not decoration. Green data marks and lilac or stone panels can appear within visuals and cards without recoloring the overall interface.

## Components

### Top navigation

A light horizontal navigation bar with brand mark, restrained text links, fine dividers, and a dark contact action aligned at the far edge.

### Hero statement

Large left-aligned Switzer headline, concise supporting copy, and a dark contact button beside atmospheric grid imagery.

### Primary action

Near-black (#17140f) button with light text, measured Switzer medium styling, and restrained corner treatment.

### Research feature

Alternating text and large visualization panels, using open spacing and limited warm-neutral or lilac surfaces.

### Product card

A concise descriptive lead above a large product visual; measured card surfaces include stone (#e8e4dc) and lilac (#cfc7ef).

### Technical visual

Charts, maps, and network graphics layered with restrained labels; green tones function as data marks rather than broad interface fills.

### Section divider

Use subtle pale-gray hairlines (#e1dfdd) to distinguish navigation and content bands without adding heavy containers.

### Measured component styles

- **Primary button** (“Get in touch”): background #17140f · text #fbfaf6 · radius 0px · padding 0px 22px · 500 13px Switzer
- **Link** (“Launches new”): transparent background · text #6b665e · radius 0px · padding 0px 20px · 400 13px Switzer
- **Card** (“Computer vision Deccan”): background #e8e4dc · text #17140f · radius 0px · padding 28px 24px 24px 24px · 400 15px Switzer

## Do

- Use Gallery White as the dominant canvas.
- Set key headlines in Grid Ink with a tight editorial feel.
- Keep supporting copy muted and clearly subordinate.
- Use fine dividers to separate content bands.
- Let infrastructure imagery carry the visual impact.
- Keep green accents mainly within data graphics.

## Don't

- Do not introduce bright, saturated interface backgrounds.
- Do not make every section a boxed card.
- Do not let mockup colors define the site-wide palette.
- Do not crowd the hero with extra copy or controls.
- Do not use heavy shadows on ordinary page sections.
- Do not turn technical labels into prominent display text.

## Agent prompt

Build a new page in Pravāh’s quiet, engineering-led visual style. Use Gallery White (#fdfcf9) as the main canvas, Grid Ink (#17140f) for headlines and primary actions, Quiet Taupe (#6b665e) for supporting copy, and Soft Divider (#e1dfdd) for fine structural lines. Set typography in Switzer or a close sans-serif substitute, with large tightly tracked headings and relaxed body copy. Create a clear left-aligned text hierarchy and generous breathing room. Pair content with expansive, pale imagery of energy infrastructure, maps, charts, or grid models. Use Stone Surface (#e8e4dc) and Lilac Field (#cfc7ef) selectively for cards; reserve Grid Green (#5f9e82) for data marks and gradients. Keep sections mostly flat, with borders and imagery doing more work than shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide, left-aligned hero copy beside expansive full-bleed grid imagery; a slim divided navigation bar sits above. | Primary contact action, Top-level text navigation, Prominent mission statement | Warm light canvas, Dark primary button, Fine navigation dividers, Atmospheric infrastructure image |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/pravah-com