Getting startedInstallation & imports

Installation & imports

The system ships with the portfolio codebase. There is no separate package; the components live alongside the case studies they ship with.

MIT licenseNo separate packageSource on GitHubSoon

The repository

The full source lives in the izaias-personal-website monorepo. The design/ subdirectory is a Next.js 14 app that ships the portfolio, the case studies, and the design system documentation.

bash

cd design
npm install
npm run dev

The stack

The system is built on a small stack.

Next.js 14 with the App Router
TypeScript for the components
Tailwind CSS v4 for the layout
lucide-react for the icons
next/font/google for the typefaces
@vercel/analytics for the analytics

Importing a component

Every component is exported from its own file. There is no barrel file; the import paths are explicit on purpose.

tsx

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { DocEyebrow } from "@/components/design-system/doc-eyebrow"

Consuming tokens

Tokens are exposed through Tailwind's color utilities. The map is in app/globals.css under @theme inline.

tsx

<div className="bg-background text-foreground">
  <p className="text-muted-foreground">Helper text</p>
  <button className="bg-foreground text-background">Primary</button>
</div>

Using icons

All icons go through the SiteIcon wrapper, which enforces the 1.5 stroke and the tone system.

tsx

import { ArrowRight } from "lucide-react"
import SiteIcon from "@/components/site-icon"

<button>
  Read more <SiteIcon icon={ArrowRight} size="sm" />
</button>

What this isn't

This is not an npm install izaias-design-system setup. The system is the codebase; the codebase is the system. Thedownloads page has the snippets for the parts you'd want to copy.