pavel 1ar.ionov
Contact

Design system v2

Live showcase. Components are built on the design-system-v2 branch. Not yet migrated across the site — a later pass will codemod the call sites.

29
built
10
planned (p2+)
15
kept as-is

01 · Primitives

Badge

variants = default, secondary, outline, accent, status-upcoming, status-live, status-past

default secondary outline accent upcoming live past

Button + ButtonGroup

variants = default, secondary, outline, ghost, neutral, light · sizes = sm, default, lg

Link

variants = default, subtle, external · auto-detects http(s) URLs

default link subtle link external link

Tag

variants = default, filter

default linked filter chip dismissable

Kbd · Spinner · Separator · Icon

open palette: ⌘ K
loading loading loading
github calendar rocket

02 · Typography

PageHeader (extended)

props = title, description, kicker, count, variant · slot = ctaRow

kicker label

Example title

Description text goes here to show default variant spacing.

archive

Compact variant

12 entries

Kicker + CodeInline

default kicker

muted kicker

accent kicker

Use <CodeInline> for inline code like bun run build.

03 · Layout

Grid

cols = 2, 3, 4, auto · gap = sm, default, lg

1
2
3
4

Split

ratio = even, wide-left, wide-right · align = center, start

Left

Text column.

Right

Image or content column.

Stack

gap = sm, default, lg, xl · align = start, center, end, stretch

item 1
item 2
item 3

04 · Forms

Input (extended)

sizes = sm, default, lg · props = label, description, error

This field is required.

We'll never share this.

Label + FormField

Wraps label, description, control, and error.

Something went wrong.

06 · Feedback

CalloutBox

variants = info, warning, success, note

Info callout used inside MDX prose.
Warning callout.
Success callout.
Note callout (new variant).

EventBanner

status = upcoming, live, past

upcoming · Workshop at Serviceplan

Banner body content goes here.

past event · Past event

Banner body content goes here.

EmptyState

No results found

Try adjusting your filters or searching for something else.

Reset filters

07 · Cards

FeatureCard

Shipping real products

Multiple live projects generating traction and revenue.

Industry recognition

50+ international awards across digital, product, and innovation.

Long-standing clients

Partnerships built on consistent delivery.

StatCard

29
built
12
planned
1.2k
downloads
8
pages migrated
of 54

EventCard

Workshop at Serviceplan

upcoming
Munich

Hands-on session with the product team.

Past meetup

past
Hamburg

Retrospective notes.

ToolCard

variants = shortcut, affiliate

graft

Hackathon-winning inbox for links.

Raycast

Launcher replacement for macOS.

PricingCard

BYOK

Bring your own OpenAI/Anthropic key.

free
  • Unlimited summaries
  • Local storage
  • No subscription

Managed

We host the LLM.

popular
$4.99 /mo
  • No API key needed
  • Fair-use limits
  • Cancel any time

UpdateCard

variant = slim | full · merges UpdateCardSlim + TimelineCard. Rendering below uses mock data.

Live preview skipped here — UpdateCard requires a valid TimelineEntry from the content collection, which depends on front-matter rules. See src/components/cards/UpdateCard.astro. Will be shown on /updates after migration.

08 · Media

AppStoreBadge

variants = apple, google

Download on the App Store Get it on Google Play

09 · Planned (later passes)

Not urgent. No call sites block them. Build when the need is real.

Forms (later)

<Textarea />

planned

multi-line input

<SearchInput />

planned

input with leading icon + clear

<Checkbox />

planned

boolean control

<Select />

planned

dropdown select

Navigation (later)

<Tabs />

planned

tabbed content switcher (line/pill)

AiNews has its own .app-tablist impl

Overlays (later)

<Dialog />

planned

modal for confirms

<Tooltip />

planned

hover hint

Feedback (later)

<Skeleton />

planned

loading placeholder

<Toast />

planned

transient form feedback

Media (later)

<Gallery />

planned

ImageGrid + Lightbox combined

Page parts (keep as-is)

<Hero />

built

home + labs hero

<CTASection />

built

full-width CTA band

<FeaturedProjects />

built

homepage projects grid

<FeaturedTools />

built

homepage tools teaser

adopt ToolCard in a later pass

<RecentUpdates />

built

homepage updates list

adopt UpdateCard slim variant

<Services />

built

services grid

consider merging with FeatureCard grid

<Testimonials + Carousel />

built

testimonials section (island)

<AiNews />

built

homepage briefing tabs

<EmailSignup />

built

double opt-in form

port internal button to <Button>

<ClickToCopyEmail />

built

obfuscated email copy

<AwardsMarquee />

built

auto-scrolling awards

<UpdatesSidebar />

built

taxonomy filters

adopt Kicker + Tag variants

Migration readiness

What's next

Components exist. The site still uses raw Tailwind patterns — nothing was migrated in this pass. Next: codemod the 25+ page-headers, 19+ sumr-nav call sites, etc. per T1-T14 in the plan.

Branch

Work on design-system-v2. Four commits: audit/plan, primitives+layout, navigation+forms+feedback, card family, utility extras. Merge after migration-pass PR review.

Compare against /design-system (v1 audit snapshot). Plan: docs/plans/2026-04-17-design-system-v2.md.