Skip to content

ResourcesDownloads

Downloads

The downloads are the tokens and snippets from the live system. Copy the parts that fit; the design tokens ship with the code.

MIT licenseSource on GitHubSoonNo Figma library

The repository

The full source lives in the design/ folder of theizaias-personal-website monorepo. Theapp/globals.css file is the source of truth for tokens; thecomponents/ folder is the source of truth for components; theapp/designsystem/ folder is the source of truth for the documentation.

Source on GitHubSoon

The tokens, as code

Drop the snippet below into your globals.css to get the same warm-neutral palette and the same type scale. The motion and the spacing scale come from the same file.

:root {
  --background: #f6f3ef;
  --foreground: #1a1816;
  --card: #faf8f5;
  --muted: #ece8e2;
  --muted-foreground: #6f6860;
  --accent: #8a7d6e;
  --border: #ddd7ce;
  --destructive: hsl(0 72% 51%);
  --surface-elevated: #faf8f5;
  --surface-inset: #ede9e3;
  --line-subtle: rgba(26, 24, 22, 0.08);
  --line-strong: rgba(26, 24, 22, 0.16);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-surface-elevated: var(--surface-elevated);
  --color-surface-inset: var(--surface-inset);
  --font-sans: var(--font-dm-sans);
  --font-serif: var(--font-instrument-serif);
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

Icons

Icons are from Lucide and wrapped in theSiteIcon component, which enforces the 1.5 stroke and the tone system. The component is incomponents/site-icon.tsx.

The fonts

The two typefaces are Instrument Serif(display) and DM Sans(body). Both are licensed under the SIL Open Font License and available on Google Fonts. Install via next/font/google:

import { DM_Sans, Instrument_Serif } from "next/font/google"

const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-dm-sans" })
const instrumentSerif = Instrument_Serif({ subsets: ["latin"], weight: "400", variable: "--font-instrument-serif" })

License

The system is MIT-licensed. The fonts are OFL-licensed. The documentation is CC-BY 4.0. Use the parts that fit; cite the source.