arjunsiv
Design system · v1

arjunsiv

The tokens, type and components this site is built from. Everything below is rendered live fromtokens.json and the same CSS the pages use. Turn on Inspect and hover anything to see which token it uses.

arjunsiv is the design system for arjunsiv.com, the portfolio of Arjun S, a frontend engineer in Bengaluru. The site has two modes. Read mode is a calm, fast page a recruiter can scan in a minute. Inspect mode (toggle in the header, or press I) turns the same page into x-ray: box-model overlays, element labels, spacing redlines, token names and live Web Vitals. The site documents itself, and that is the pitch.

Principles

  • Read mode first. Every page must work, and look finished, with Inspect off. Inspect adds information; it never hides any.
  • Show the build, don’t describe it. Prefer an overlay, a measurement or a live number over a sentence saying “pixel-perfect”.
  • One accent. probe is the only brand hue. Everything else is ink on paper. The box-* colours appear only in Inspect mode.
  • Square by default. Corners are radius-0 or radius-2, like a browser’s own panels. Round shapes are reserved for the Inspect toggle.
  • The personal side is an easter egg. Films, football and weird facts live in FactCard, the 404 page and palette commands. They never become a section of the main story.

Content fundamentals

  • First person, plain and specific: “I rebuilt the flow from the first notice to the final decision.” Not “Passionate engineer leveraging cutting-edge tech”.
  • Sentence case everywhere, including buttons and headings. No exclamation marks and no emoji.
  • Lead with the outcome and a real number when there is one: “Cut CI from 12 to 3 minutes by removing one build step.”
  • Easter-egg copy can be playful, but still has a source for every fact.

Colour

  • Page ground is paper. Cards, the palette and tooltips use paper-raised. Code and wells use paper-sunken.
  • Text is ink. Secondary text is ink-muted. Both pass 4.5:1 on all three paper tokens in both themes. ink-faint is for placeholders and disabled labels only.
  • line is for decorative hairlines. Anything a person operates (button, input, toggle track) uses line-strong, which meets 3:1.
  • probe covers links, the active toggle, focus rings, selection outlines and redlines. On a probe fill, text is on-probe, never a literal white. probe-wash tints a selected nav item or palette row.
  • Box model, Inspect mode only: box-margin, box-border, box-padding, box-content, drawn at 35% opacity over content. Never put text on them.
  • Inspect tooltips are tip with on-tip text and a tip-accent tag name.
  • Ratings use vital-good, vital-warn and vital-poor, always with a glyph and a word (✓ Good). Never rely on hue alone.
  • Two themes, light and dark. The site follows the system setting and offers a toggle in the palette.

Type

  • One superfamily built for legibility: Atkinson Hyperlegible Next for text and Atkinson Hyperlegible Mono for code, labels and numbers. Load both from Google Fonts. The choice is deliberate: an accessibility-first face for a site that shows its own craft.
  • Scale: display (home hero only), h1 page titles, h2 sections, h3 sub-sections and card titles, lede under a page title, body running text, body-sm card summaries, caption dates.
  • Mono styles: label for uppercase eyebrows (write sentence case, CSS uppercases), code, metric for big numbers with tabular figures, and inspect for overlay labels only.
  • Keep running text near 65 characters (max-width: 34rem). Headings use text-wrap: balance.

Spacing and layout

  • A 4px base: space-1 4 through space-24 96. Use gap in flex and grid rather than margins.
  • Page column: a 1120px max width, a 16px gutter on phones (space-4) and 32px from tablet up (space-8). Running text sits in a 34rem column inside it.
  • Sections are separated by space-16 on phones and space-24 on desktop. Cards sit space-8 apart with space-6 inner padding.
  • In Inspect mode, an 8-column layout grid overlay (1px probe at 15%) appears behind content.

Radius, borders and shadow

  • radius-0 for overlays, rulers and code. radius-1 for tags, kbd keys and tooltips. radius-2 for buttons, cards, inputs and the palette. radius-pill for the toggle only.
  • Borders are 1px. Cards do not lift on hover; the title turns probe instead.
  • shadow-float is only for things that float: the palette, tooltips and the inspect panel.

Motion

  • dur-quick (120ms) for fades and colour changes; dur-move (220ms) for the toggle knob and panel slides. No scroll-triggered entrance animations.
  • Under prefers-reduced-motion, all durations become 0 and overlays appear instantly.

Interaction

  • Focus is always visible: a 2px solid probe outline offset by 2px.
  • Shortcuts: I toggles Inspect (ignored while typing), ⌘K / Ctrl K opens the palette, Esc closes overlays and unpins.
  • Inspect never shifts layout. Overlays live in one fixed layer with pointer-events: none.

Iconography

  • No icon font. Use Lucide outline icons at a 1.5px stroke, 16px or 20px, coloured with currentColor as inline SVG. This choice is made for the site; there is no prior icon set.
  • Status glyphs are text characters (✓ ▲ ✕), so they inherit colour and read in plain text.
  • No logo mark. The wordmark is “arjunsiv” set in h3 weight 760, with “siv” in probe.

Easter eggs

  • Palette commands: fact (a random sourced fact), now watching, kickoff (a penalty-shootout mini game), credits (the page scrolls like film credits).
  • The 404 page is the penalty shootout. The footer shows one FactCard.
  • The Konami code triggers credits.
  • Use original art only: no film stills, posters, quotes or club badges.
Colour

22 colour tokens, two themes

TokenLightDarkUsage
--paper#f5f6f8#0e1014Page background in Read mode. The default ground for all text tokens.
--paper-raised#ffffff#161920Cards, the command palette, tooltips and code blocks that sit above `paper`.
--paper-sunken#eceef2#090b0eWells: code blocks inside cards, the inspect panel body, input fields.
--ink#13161b#e9ebefHeadings and body copy on `paper`, `paper-raised` and `paper-sunken`.
--ink-muted#545b67#9ba2aeSecondary copy, dates, captions and metadata on `paper`, `paper-raised` and `paper-sunken`.
--ink-faint#6c7380#7f8794Placeholder text and disabled labels only. Large or non-essential text on `paper`; never body copy.
--line#dfe2e8#262b33Hairline dividers, card borders and table rules (decorative, not a control boundary).
--line-strong#878f9b#5f6875Control borders (buttons, inputs, toggle track) and the ruler ticks in Inspect mode. Meets 3:1 on `paper` and `paper-raised`.
--probe#c4145c#ff7bb0The one accent. Links, the Inspect toggle when on, focus rings, measurement redlines and the selected-element outline. Text use on `paper` and `paper-raised`.
--probe-hover#a10f4b#ffa3c8Hover and pressed state of `probe` fills and links.
--on-probe#ffffff#14060cText and icons on a `probe` fill (primary button, active toggle).
--probe-wash#c4145c1f#ff7bb029Tinted ground behind the selected nav item and the highlighted command in the palette. Text on it stays `ink`.
--box-margin#f6b26b#f6b26bInspect mode only: the margin layer of the box-model overlay (shown at 55% opacity over content). Never a text ground.
--box-border#ffe08a#ffe08aInspect mode only: the border layer of the box-model overlay. Never a text ground.
--box-padding#93c47d#93c47dInspect mode only: the padding layer of the box-model overlay. Never a text ground.
--box-content#6fa8dc#6fa8dcInspect mode only: the content layer of the box-model overlay. Never a text ground.
--tip#13161b#e9ebefInspect tooltip ground (the element label, for example `h2.title 640×48`). Inverts with the theme.
--on-tip#ffffff#13161bElement names and sizes on `tip`.
--tip-accent#ff8fbd#b0104fThe tag name inside an inspect tooltip (`h2` in `h2.title`), on `tip`.
--vital-good#0b6e47#5bd69aWeb Vitals and checks rated Good. Always shown with the word "Good" or a check glyph, never colour alone. On `paper` and `paper-raised`.
--vital-warn#8a5300#f0b44cWeb Vitals rated Needs improvement. Always paired with its label. On `paper` and `paper-raised`.
--vital-poor#b3261e#ff8a7aWeb Vitals rated Poor, and form errors. Always paired with its label. On `paper` and `paper-raised`.
Type

Atkinson Hyperlegible Next and Mono

.t-display56px/58px · 800
I build interfaces you can inspect.
.t-h140px/46px · 760
Shipping disputes in two weeks
.t-h228px/34px · 700
Selected work
.t-h320px/28px · 650
The approach
.t-lede20px/32px · 400
Frontend engineer in Bengaluru, working on checkout flows and dashboards.
.t-body17px/28px · 400
I rebuilt the flow from the first notice to the final decision.
.t-body-sm15px/24px · 400
Next.js, TypeScript, Zustand
.t-caption13px/20px · 500
Jul 2024 – present
.t-label12px/16px · 600
SELECTED WORK
.t-code14px/22px · 400
const lcp = 1.9; // seconds
.t-metric32px/36px · 600
−73%
.t-inspect11px/14px · 500
h2.title 640×48
Spacing

A 4px base

--space-14px · Gap between an icon and its label; tag inner vertical padding.
--space-28px · Gap between tags; tooltip padding.
--space-312px · Button vertical padding pair (with space-5 horizontal); list item gap.
--space-416px · Minimum side gutter on phones; gap inside cards.
--space-520px · Button horizontal padding.
--space-624px · Card padding.
--space-832px · Gap between cards in a grid.
--space-1248px · Gap between a section heading and the section above.
--space-1664px · Vertical space between page sections on phones.
--space-2496px · Vertical space between page sections on desktop.
Radius and shadow

Mostly square

--radius-0Inspect overlays, rulers, code blocks and section rules.
--radius-1Tags, kbd keys, inspect tooltips.
--radius-2Buttons, cards, inputs and the command palette.
--radius-pillThe Inspect toggle track and its knob only.
--shadow-floatThe command palette, inspect tooltips and the inspect panel.
Components

14 components, plain CSS classes

Tag

Content

Labels a stack or topic. Not interactive. Up to 5 per card.

Next.jsTypeScriptDesign systems

Kbd

Content

Shortcuts: I inspects, ⌘K opens the palette, Esc closes.

I⌘KEsc

Metric

Content

Real, measured numbers only. Tabular mono figures.

−73%CI build time12 → 3.25 min
−18.3%Checkout bundle459 → 375 KB

Vital

Content

A glyph and a word carry the rating; colour only reinforces it.

LCP 0.9 s✓ GoodINP 240 ms▲ Needs improvementCLS 0.31✕ Poor

CodeBlock

Content

Square, sunken, scrolls instead of wrapping.

// read the hovered element's box model
const s = getComputedStyle(el);
const pad = parseFloat(s.paddingTop); // 24

InspectToggle

Inspect mode

The signature control. Every visit starts in Read mode.

InspectOverlay

Inspect mode

DevTools box-model colours at 35%, never under text. Turn on Inspect to see it live.

2025Lead frontend

Dispute management

article.as-card 360 × 112

Measure

Inspect mode

Redlines name the spacing token when the gap matches one.

space-24 · 96
48

SiteHeader

Navigation

Wordmark, four links and the Inspect toggle. Links fold into the palette on phones.

arjunsivWorkWriting

CommandPalette

Navigation

Press ⌘K / Ctrl K to try the real one. Fun commands appear only when typed.

> fa
Fun
  • fact something weird

FactCard

Easter eggs

The only home for films, football and facts. Every fact has a source.

Fact

Octopuses have three hearts, and the one that pumps blood to the body stops beating while they swim.

Source: Smithsonian Ocean