fund-design-system

---
name: fund-design-system
description: An institutional, print-first fund design system for Claude Design, delivered as one CSS tokens file plus one small HTML preview per component. Use it to define an asset manager brand once and push it into Claude Design with design sync, so monthly reports, factsheets, websites and decks all come out on brand instead of looking AI generated. Swap the hex values and typeface for your own firm.
---

# Fund design system skill

A ready-to-use design system for building institutional asset-management deliverables in
Claude Design. It is modelled on a dense Brazilian fund report: deep navy for authority, a
single muted clay accent for emphasis, a humanist sans throughout, no serif, no red and
green, and nothing decorative. It is built to work as a printed US Letter PDF and as a
website, and to survive being printed in black and white.

## What is in here

```
SKILL.md                 this file
coldbrook-brand.md       the written brand spec, the source of truth
ds/
  colors_and_type.css    every colour and type value as CSS variables
  preview/               one self-contained HTML preview per component
  README.md              notes on the tokens and the @dsCard convention
```

Each preview file in `ds/preview/` starts with a `<!-- @dsCard group="..." name="..." -->`
comment on its second line. That marker is what makes it appear as a card in the Claude
Design "Design System" pane after a sync.

## How to use it

1. Copy this folder into your project's skills, for example `.claude/skills/fund-design-system/`,
   or into `~/.claude/skills/` to make it available everywhere.
2. In Claude Code, push the `ds/` folder into Claude Design by running the design sync skill:
   **`/design-sync`**. It uploads the tokens CSS and every `@dsCard` preview as a named
   Design System project.
3. On the Claude Design composer, open the **Design system** picker and select the project.
   It defaults to None and reverts after a page refresh, so re-select it if you reload.
4. Now build any artifact (a monthly report, a factsheet, a website, a deck) with that system
   selected, and it inherits the palette, the type and the components automatically.

## Make it your own

Open `ds/colors_and_type.css` and change the hex values and the typeface to your firm's brand,
then edit the preview components if you need different building blocks. Revise one component at
a time and run `/design-sync` again, so nothing else moves. Keep the "never do" rules from
`coldbrook-brand.md`: no rounded corners, no drop shadows, no gradients as decoration, no
three-up equal card grids, no icons, no centred body text, no pill tags. Separate regions with
a section head, a hairline rule and whitespace, never a box.

## Reference rule

When you build an artifact, you can attach a real fund report as a layout reference, but never
add it to the design system. Put reference pages in the individual artifact prompt with the
line: use the attached reference for structure, section order and information density only, do
not copy its colours, typefaces or visual style, all styling comes from this design system.

## Provenance

Extracted from a full build of a fictional asset manager, Coldbrook Capital, made entirely in
Claude Design. The walkthrough, the exact build prompts and a playable brand film are at
https://davidariasfinance.com/scripts/claude-design-fund/. Coldbrook Capital is fictional, a
design exercise.