Internal · Pattern library

Style Guide.

Every token and component variant on one page. Not linked from Nav or Footer.

01 / Tokens

Color tokens.

Defined in theme.css. The new design system is single-palette — no light/dark switching.

Surfaces

--color-bg
Page background
--color-bg-tinted
Recessed sections
--color-bg-elevated
Cards
--color-bg-card
Nested controls
--color-bg-card-hover
Card hover
--color-nav-bg
Sticky nav (translucent)
--color-ink
Ink (display fills)

Text

Aa
--color-text
Primary
Aa
--color-text-muted
Body (paragraphs)
Aa
--color-text-subtle
Subtle (labels, captions)

Brand accents

--color-blue
Primary (ink-on-blue OK)
--color-blue-soft
Blue tinted background
--color-yellow
Yellow highlight
--color-yellow-soft
Yellow tinted background
--color-orange
Orange signal
--color-orange-soft
Orange tinted background
02 / Typography

Typography.

Inter (incl. italic) for all type. JetBrains Mono for engineering chrome.

H1 · Inter · clamp(48px, 7.4vw, 108px) / 800

The quick brown fox jumps

H2 · clamp(36px, 5vw, 68px) / 800

Infrastructure that thinks

H3 · 24px / 700

The quick brown fox jumps

Body · Inter · 17px / 1.55

Parinita is the world's first Agent-Native Cloud — a new category of infrastructure where agents provision compute, networking, security and inference themselves, in real time, at the edge, without a token tax.

Eyebrow · JetBrains Mono · 11px · 0.16em

A new category · A new company

Mono stats

101 POPs · 42 states · <50ms P99

Serif italic accent (.serif)

Built for agents.

03 / Buttons

Buttons.

Pill buttons in three variants.

04 / Tags

Tag chips.

Mono-cased pill chips used for keyword clusters.

Zero token tax Hyper-local inference Sovereign by design Quantum-ready Self-provisioning Machine-speed loops
05 / Cards

Card variants.

Default + three palette tints (.b, .y, .o).

01
// default

Neutral card surface

  • Hairline border
  • Lifts 4px on hover
02
// blue tint

Card with blue background

  • card.b
03
// yellow tint

Card with yellow background

  • card.y
06 / Geometry

Border radii.

Five steps.

--radius-sm
8px
--radius-md
12px
--radius-lg
18px
--radius-xl
24px
--radius-pill
999px