# Design System

> Machina design system quick reference. Use when discussing design tokens, surfaces, card backgrounds, depth, elevation, typography tokens, color tokens, DaisyUI theming, or applying visual styling to UI components.

- **Type:** Skill
- **Install:** `agentstack add skill-zarpay-rails-template-design-system`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [zarpay](https://agentstack.voostack.com/s/zarpay)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [zarpay](https://github.com/zarpay)
- **Source:** https://github.com/zarpay/rails-template/tree/main/files/.claude/skills/design-system

## Install

```sh
agentstack add skill-zarpay-rails-template-design-system
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Machina Design System — Quick Reference

The shared visual language for Machina apps. Each app picks its
own brand gem and theme name but inherits the surface, shape, typography, and
spacing rules below.

## Hierarchy of Styling (strict order)

1. **DaisyUI semantic classes** — `btn-primary`, `bg-base-200`, `card`, `badge-success`
2. **Tailwind utilities** — `flex`, `gap-4`, `text-sm`, `p-6`
3. **Design system classes from `main.css`** — `.f-display`, `.f-mono`, `.nav-item`
4. **Add to `main.css`** — new patterns go here, then use the class
5. **Never** — inline styles, per-page style blocks, `!important` in HTML, hardcoded hex

## Surfaces — Core Rules

### Dark Mode (Pantheon Blue-Gray)
Depth = surface lightness. **NO shadows.**
- `base-100` (#0F131A) — Page background (deepest void)
- `base-200` (#171B21) — Cards, containers
- `base-300` (#1E2228) — Elevated elements, borders
- `neutral`  (#2C333B) — Highest elevation (popovers, nav)

### Light Mode (Warm Marble)
Depth = shadow. White cards on warm marble.
- `base-100` (#F5F0E8) — Page background (warm marble, NOT #FFF)
- `base-200` (#FFFFFF) — Cards, elevated surfaces (WHITE)
- `base-300` (#EFEBE0) — Warm dividers, borders
- `neutral`  (#E5DFD3) — Muted background areas

**KEY RULE:** Cards are `bg-base-200` (full opacity). In light mode this is
white on warm marble; in dark mode it's a slightly lighter surface. Never use
`bg-base-200/40` — the opacity destroys the depth hierarchy.

## Shapes (Wall / Arch / Tessera)

- **Wall**    (8px / `rounded-box`)  — Containers, cards
- **Arch**    (pill / `rounded-full`) — Interactive: buttons, inputs, badges
- **Tessera** (4px / `rounded`)       — Atomic elements

## Typography

- **Display:** Cormorant Garamond (`.f-display`) — headings, headlines
- **Body:**    DM Sans                            — paragraphs, UI text
- **Mono:**    JetBrains Mono (`.f-mono`)         — code, data, timestamps
- **Stats:**   JetBrains Mono 700, 28px min, lining tabular figures

## App brand

Each Machina app declares its own gem (accent color) and `-dark` /
`-light` DaisyUI theme names. Fill in the brand block in this app's
`main.css` and update this skill to reflect the gem chosen for APPNAME.

## Seven Principles

Firmitas (reliable), Utilitas (purposeful), Venustas (proportioned beauty),
Symmetria (mathematical 4px grid spacing), Harmonia (family coherence), Techne
(obsessive precision), Telos (serves the user's goal).

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [zarpay](https://github.com/zarpay)
- **Source:** [zarpay/rails-template](https://github.com/zarpay/rails-template)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-zarpay-rails-template-design-system
- Seller: https://agentstack.voostack.com/s/zarpay
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.