Design System

A complete component library for avi.nyc with light and dark themes.

Tokens

Design tokens are the visual design atoms of the design system.

Colors

Backgrounds

Background
bg-bg
Surface
bg-surface
Elevated
bg-surface-elevated

Text

Primary
text-body
Secondary
text-body-secondary
Tertiary
text-body-tertiary

Accents

Primary
text-primary
Secondary
text-secondary
Tertiary
text-tertiary

Semantic

Success
text-success
Warning
text-warning
Error
text-error
Info
text-info

Typography

Type scale and text components for consistent typography.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
<%= heading "Your Title", level: 2 %>

Body Text

Extra small text (xs)

Small text (sm)

Base text - This is the default body text size used throughout the site.

Large text (lg)

Extra large text (xl)

<%= text "Your paragraph", size: :base, color: :secondary %>

Layout

Layout primitives for structuring content.

Container

Container (lg: 1024px max)

Stack

Item 1
Item 2
Item 3

Grid

1
2
3
4
5
6

Cluster

Tag 1 Tag 2 Tag 3 Tag 4 Tag 5

Buttons

Interactive button components with multiple variants.

Variants

<%= button "Click me", variant: :primary %>

Sizes

Badges

Small labels for status, categories, and metadata.

Default Outline Primary Success Warning Error
<%= badge "New", variant: :primary %>

Hero

Page header with centered content and optional spotlight effect.

Section Label

Page Title

A brief description of the page content.

<%= hero "Page Title", subtitle: "Description", eyebrow: "Label" %>

Variants

:default - Standard height hero

:compact - Reduced height for interior pages

:full - Full viewport height

Section Header

Section titles with optional eyebrow labels.

Portfolio

Featured Work

<%= section_header "Title", eyebrow: "Label", centered: true %>

Status

Status indicators for projects and items.

Live Building Planned Archived
<%= status :live %>

Tech Pills

Small pills for displaying technology stacks.

Rails Ruby PostgreSQL Hotwire AI
<%= tech_pill "Rails" %>

Filter Tabs

Horizontal filter tabs for content filtering.

<%= filter_tabs filters, selected: "all" %>

Pagination

Navigation for paginated content.

<%= pagination current_page: 3, total_pages: 10 %>

Image Frame

Cinematic image treatment with grayscale and gradient overlay.

Code on screen
<%= image_frame "image.jpg", "Alt text", aspect: :"16-10", gradient: :vertical %>

Cards

Card components for projects and blog posts.

Project Card

Used in masonry grids on homepage. Features horizontal layout with image, status, tech stack.

<%= render "shared/components/home_project_card", project: @project %>

Blog Card

Vertical card for blog posts with image, category, excerpt, and meta.

<%= render "shared/components/home_blog_card", post: @post %>

Forms

Coming soon...

Overlays

Coming soon...