Contents

• globals.css — CSS custom properties for light & dark mode (shadcn/ui convention)
• tailwind.config.ts — Tailwind config wired to CSS variables
• tokens.json — machine-readable token reference (light + dark)
• assets/ — logo SVG
• images/ — headshots, open graph images

Tokens

All colors are defined as oklch CSS custom properties. Key values:

Token	Light	Dark
--primary	oklch(0.5183 0.137 249.921)	oklch(0.5183 0.137 249.921)
--accent	oklch(0.7415 0.135 58.279)	oklch(0.7415 0.135 58.279)
--background	oklch(1 0 0)	oklch(0.2134 0 0)
--foreground	oklch(0.2134 0 0)	oklch(1 0 0)
--radius	0.5rem	0.5rem
Font sans/serif	Open Sans	—
Font mono	Open Sans	—

See globals.css for the full token list.

The original hex palette is also preserved in tokens.json under color.palette for use outside of CSS contexts:

Key	Value
color.palette.primary.default	#156bb3
color.palette.primary.light	#3d8fd1
color.palette.primary.dark	#0e4f87
color.palette.accent.default	#ea944c
color.palette.accent.light	#f0b07a
color.palette.accent.dark	#c8712a

Usage

Install in a project:

bun add @amansanoj/brand

1. Import CSS variables

In your project's global stylesheet (e.g. app.css / globals.css):

@import '@amansanoj/brand/globals.css';

This sets all --token custom properties on :root (light) and .dark (dark mode).

2. Add the Tailwind config

In your project's tailwind.config.ts:

import type { Config } from 'tailwindcss'
import brand from '@amansanoj/brand/tailwind'

const config: Config = {
  ...brand,
  content: ['./src/**/*.{ts,tsx,svelte}'],
  theme: {
    ...brand.theme,
    extend: {
      ...brand.theme?.extend,
      // project-specific overrides here
    },
  },
}

export default config

All color utilities (bg-primary, text-foreground, border-border, etc.) will resolve to the CSS variables automatically.

3. Import assets

import headshot from '@amansanoj/brand/images/headshots/main.jpg'

Fonts

globals.css already imports Open Sans from Google Fonts. No additional <link> tags needed.