starikov.dev logo
🧱

Herman's Design System

A collection of reusable components built using AI with simplicity and maintainability in mind

See it in action ✦Read about it ✦

Interactive Components

<NavigationLink/>

Used for navigation between pages and external links

Primary ✦Secondary ✦Tertiary ✦

<Action/>

Used for interactive elements that trigger actions

Content Components

<TimelineEvent/>

Used to display chronological events

Example Event

This shows how timeline events are displayed with consistent styling

<TimeStamp/>

Used to display dates in a consistent format

<Pill/>

Used to display tags and labels

Design System
React
TypeScript

Layout Components

<PageContainer/>

Provides consistent max-width and padding for page content. This entire page is wrapped in a PageContainer.

<Card/>

Used to group related content with consistent styling. All component examples on this page use the Card component.

<HeroSection/>

Used at the top of pages to introduce content. Supports both video and emoji visuals.