Amirhossein Hosseinpouramirhp
CV
// design-system.md

Editor

The site behaves like the tool I work in all day.

Editor tabs as navigation, a minimap, a status bar, and syntax colours used as meaning rather than decoration. This page is rendered from the same two stylesheets as every other page, so what you see here is what ships.

// tokens/colour

Colour

contrast measured on --bg

A VS Code palette. Surfaces step up by lightness, text has three levels, and the syntax colours each carry one meaning everywhere on the site.

Surfaces and lines

  • --surface-sunken#090B0ESunken sections, code wells
  • --bg#0D1014Page, tracks, active tab
  • --panel#14181DCards, panes, top and status bars
  • --raised#1B2027Hover, secondary button, cards in .inverse
  • --borderrgba(255,255,255,.10)Every divider and card edge
  • --border-strongrgba(255,255,255,.18)Buttons, chips, hovered cards

Text

  • --text#E6E9EEHeadings, values. 15.7:1
  • --muted#B3B9C4Body copy, leads. 9.7:1
  • --faint#8A93A2Labels, meta, captions. 6.2:1

Accent and action

  • --accent#3B9EFFLinks, active tab, focus ring, h1 second clause. 6.8:1
  • --btn#0A74CCPrimary button fill, white text 4.8:1
  • --btn-hover#0969BDPrimary hover, white text 5.4:1

Syntax colours as meaning

  • --green#3FB950Numbers, Active, live and "now". 7.5:1
  • --orange#D9A066Tags, strings, warnings, hindsight. 8.3:1
  • --purple#C586C0Kickers, keys, step numbers. 6.9:1
  • --teal#4EC9B0Types, JSON keys, inline code. 9.4:1
  • --yellow#DCDCAAVersions, Maintenance. 13.5:1
  • comment#7FA86BComments in panes (contact.txt). 7.0:1

Contribution scale

Rule: green never decorates. If something is green it is a number, a live state or Active. Orange marks what needs attention, including what I would do differently.

// tokens/type

Type

3 families · self-hosted woff2

Inter Tight 700 for headings at −0.03em, Inter for reading, JetBrains Mono for every label, number, tag and the status bar. Vazirmatn covers Persian through a unicode range.

Aa

Inter Tight

--tight · 700 · headings, card titles, quotes

Aa

Inter

--sans · 400/500 · body, leads, buttons

Aa

JetBrains Mono

--mono · 400/500 · labels, data, tabs, code

اب

Vazirmatn

--font-persian · names and Persian strings

  1. h1 · 44 to 76px

    Keep them working

  2. h2 · 30 to 44px

    What eleven years adds up to

  3. entry title · 40 to 68px

    Toolkit

  4. claim · 22 to 30px

    Every fix written once.

  5. h3 · 17px

    A migration that cannot afford downtime.

  6. .lead · 17 to 18px

    Software on thousands of sites, still shipping this week.

  7. body · 16px / 1.65

    Plain sentences, first person, one idea each.

  8. .kicker · mono 13px

    // verified-figures

  9. .label · mono 12px caps

    Counted on 27 August 2026

  10. .fig__v · mono 26 to 34px

    169,000+

// tokens/space

Space

4px base

Ten steps on a 4px base. Sections breathe at 64 to 96px; cards pad at 18 to 24px; grids gap at 12px. The shell is 1248px, less 104px on each side on desktop for the minimap.

  • --s14
  • --s28
  • --s312
  • --s416
  • --s524
  • --s632
  • --s748
  • --s864
  • --s996
  • --s10128

Layout tokens: --top 44px tab bar, --status 28px status bar, --mm-w 90px minimap, --gutter 16 to 24px. Nothing may scroll sideways at 360px.

// tokens/radius

Radius and depth

Three radii, and borders instead of shadows. The only shadow is on floating things: the palette, a mock window, the toast.

--r-card 6pxcards, panes, buttons
--r-chip 4pxchips, tags, pills, icon tiles
--r-pill 100pxthe hero eyebrow only
--shadow-overlayfloating layers only

// tokens/motion

Motion

hover a row

Motion confirms state; it never decorates. No count-ups, no parallax. Under prefers-reduced-motion: reduce every animation and transition drops to 0.01ms and reveals show at once.

  • --fast 160mshover, colour, borders
  • --base 240mscarets, toasts
  • --slow 420msscroll reveals
  • 1.2s sequenceheatmap paint, rails, tz bars

--ease cubic-bezier(.2,.7,.2,1) for state, --ease-out cubic-bezier(.16,1,.3,1) for entrances. Pages cross-fade with view transitions (140ms out, 220ms in).

// chrome

The chrome

Header.astro · Footer.astro

Three fixed pieces make the site feel like an editor. They are the same on every page, and each page only sets two things: which tab is active (nav) and the file name in the status bar (file).

Tabs

Mono 12.5px, one square per file kind: md blue, directory orange, log green, txt grey. Active tab has the page background and a 2px accent underline, aria-current="page". The strip scrolls sideways on phones and keeps the active tab in view.

Minimap

90px on the right from 1100px up. A canvas abstraction of the page drawn from real element boxes, in the same syntax colours; the lighter band is the viewport. Click or drag to scroll. Hidden from assistive technology.

Status bar

28px, mono 12px. Branch, active projects, releases, the current file (updated per section on long pages through data-file), live Sari time and the email. Low-priority items drop below 820px and 480px.

// components

Components

live, from components.css

Every component below is the real class. Hover and tab through them to see the states. Interactive targets are at least 44px tall.

Buttons .btn

Primary Secondary Text link
Ghost

One primary per view. Focus: 2px accent outline, 2px offset.

Chips, tags, pills

PHPWooCommerceHPOS
ActiveMaintenanceArchive

Chips filter (aria-pressed); tags label stack; pills carry status.

Section head .sec-h

// what-i-do

What I do

10 areas

Kicker in purple mono, h2, right-aligned mono meta, lead.

Card .card · .card--link

WordPress plugin

Ultimate Invoice

5K+ installs4.8/5 from 34v2.2.6

HTML and PDF invoices for WooCommerce.

PHPmPDF

Figures .figs · .fig

WordPress.org 9plugins published GitHub 83public repositories
Students350+taught English
DegreeMATeaching English

Every figure links to its source or says where it was counted. Numbers are never animated.

Facts panel .facts

Since
2015
Pricing
Quoted after the first call

Lifespan rail {{lifespan}}

Lifespan2020 to today Maintained2020 to today Ended2017 to 2019

Code pane .code

profile.json· read only
1{
2  "followers": 91,
3  "label": "BlackSwan Development"
4}

Pane .pane

bio.txt · third person

A file with a title bar and actions. Used for bio.txt, contact.txt and hours.json.

Quote .quote · .quotes

He is responsive, detail-oriented, whip smart, and a pleasure to work with.
Michael Janda founder of Riser (2002 to 2015)client, 2021

Name links to the public source. Caption segments stack one per line. Never a "testimonials" section.

Callout and hindsight

The first ten minutes

OPcache was not loaded at all.

Fit .fit · .ba

A good fit when

The scope can be written down.

Not a fit when

You need it next week.

Steps .steps

  1. A short call

    Thirty minutes.

  2. A written scope

    Before any code.

Disclosure .faq

Do you sign NDAs?

Yes.

Open state

The plus turns 45 degrees into a close mark.

Table .tbl

NameRoleYearsStatus
Pigment DevCo-founder and lead developer2025 to nowActive
Pepro DevCo-founder2020 to nowActive

Below 720px each row becomes a stacked block.

Cross links .others

Palette .palette

// template

One page template

Every product, service and project page runs in the same order, so a reader who has seen one knows where to look on the next.

  1. Entry head .entry-head

    Crumbs, mark and kicker, title, accent claim, lede, one primary and one secondary action, and a facts panel. A proof row or lifespan rail spans the bottom.

  2. Stage

    The one illustration: a mock, a flow, a request path. Built in HTML and CSS, never a stock image.

  3. What it does, and why it is built that way

    Features or problems as cards, then the decisions, each with its reason.

  4. Evidence

    A case, a release log, figures with sources. Admitting what went wrong goes in a hindsight block, unsoftened.

  5. How it goes, fit, questions

    Steps, the two-sided fit, and a short FAQ.

  6. Close

    The shared partial ({{> service-close}} or {{> product-close}}): the next step and every sibling page.

// writing

Writing rules

Do

  • First person, plain sentences, one idea each.
  • Every claim carries a number or a link, and the number is counted, not estimated.
  • Concrete beats abstract: "OPcache was not loaded at all".
  • Say what went wrong and what I would do differently.
  • Ultimate Invoice is "published by Pepro Dev; I lead its development and maintenance".

Never

  • Em dashes. Use commas, colons, parentheses or full stops.
  • Hype adjectives: cutting-edge, seamless, robust, passionate, innovative, world-class.
  • "Hire me", availability dots, "open to opportunities", rates on the page.
  • The title CTO for me, anywhere.
  • An invented number, client, quote or date.

Accessibility floor: one h1 per page, no skipped heading levels, WCAG AA contrast (checked above), 44px targets, a visible focus ring, no horizontal scroll at 360px, and reduced motion respected. Full reference: web/DESIGN-SYSTEM.md.

branch main 6 active projects ↑ 113 releases design-system.md Sari --:-- UTC+3:30 its@amirhp.com