starikov.dev logo
Sign Up
🧱

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
TypeScript

Form Components

<Input/>

Used for text input fields

<FormField/>

Used to group label, input and help text

Password must be at least 8 characters long

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.

<Grid/>

Responsive grid layout

Column 1
Column 2
Column 3