BONES Design System

{
  "name": "Button",
  "category": "Action",
  "description": "The system's one interactive primitive. Square, monospace, uppercase. Renders as an anchor when `href` is set, a native button otherwise.",
  "keywords": [
    "button",
    "cta",
    "action",
    "link",
    "submit"
  ],
  "props": [
    {
      "name": "variant",
      "type": "'solid' | 'accent' | 'outline' | 'ghost'",
      "description": "Visual weight. solid inverts to the foreground; accent fills with lime; outline is a hairline; ghost is text-only until hover.",
      "default": "'solid'"
    },
    {
      "name": "size",
      "type": "'sm' | 'md'",
      "description": "Padding and type scale.",
      "default": "'md'"
    },
    {
      "name": "href",
      "type": "string",
      "description": "When provided, renders an <a> instead of a <button>."
    },
    {
      "name": "disabled",
      "type": "boolean",
      "description": "Disables the native button.",
      "default": "false"
    },
    {
      "name": "children",
      "type": "ReactNode",
      "description": "Button label.",
      "required": true
    }
  ],
  "examples": [
    {
      "label": "Primary",
      "code": "<Button>See the work</Button>"
    },
    {
      "label": "Accent",
      "code": "<Button variant=\"accent\">Get in touch</Button>"
    },
    {
      "label": "Outline, small",
      "code": "<Button variant=\"outline\" size=\"sm\">Résumé ↓</Button>"
    },
    {
      "label": "As link",
      "code": "<Button variant=\"ghost\" href=\"/work/\">All work →</Button>"
    }
  ],
  "accessibility": [
    "Renders a native <button> or <a> — full keyboard and screen-reader support for free.",
    "Visible focus ring uses the accent token with a surface-colored offset.",
    "Disabled state sets the native disabled attribute, not just styling."
  ]
}

{
  "name": "Tag",
  "category": "Display",
  "description": "Small monospace chip for disciplines, statuses, and categories. The only component that uses the 2px corner radius; everything else is square.",
  "keywords": [
    "tag",
    "chip",
    "badge",
    "label",
    "pill"
  ],
  "props": [
    {
      "name": "children",
      "type": "ReactNode",
      "description": "Tag label.",
      "required": true
    },
    {
      "name": "dot",
      "type": "boolean",
      "description": "Draw a small accent dot before the label.",
      "default": "false"
    }
  ],
  "examples": [
    {
      "label": "Plain",
      "code": "<Tag>Design systems</Tag>"
    },
    {
      "label": "With status dot",
      "code": "<Tag dot>Shipping</Tag>"
    }
  ],
  "accessibility": [
    "Non-interactive by default — purely presentational, so it carries no ARIA role.",
    "The accent dot is aria-hidden; meaning lives in the text label."
  ]
}

{
  "name": "Card",
  "category": "Container",
  "description": "A lifted surface bounded by a hairline — the system's core container. Optional indexed eyebrow, label, and title; becomes a link when `href` is set.",
  "keywords": [
    "card",
    "surface",
    "panel",
    "container",
    "tile"
  ],
  "props": [
    {
      "name": "index",
      "type": "string",
      "description": "Two-digit eyebrow, e.g. \"01\", rendered in the accent color."
    },
    {
      "name": "label",
      "type": "string",
      "description": "Uppercase mono label above the title."
    },
    {
      "name": "title",
      "type": "ReactNode",
      "description": "Mono heading."
    },
    {
      "name": "children",
      "type": "ReactNode",
      "description": "Card body."
    },
    {
      "name": "href",
      "type": "string",
      "description": "Turns the whole card into a link with a hover border."
    }
  ],
  "examples": [
    {
      "label": "Titled",
      "code": "<Card index=\"01\" label=\"Case study\" title=\"Unmarked Apparel\">Brand, storefront, and admin — solo.</Card>"
    },
    {
      "label": "As link",
      "code": "<Card href=\"/work/spabreaks/\" title=\"Spabreaks.com\" />"
    }
  ],
  "accessibility": [
    "When `href` is set the entire card is a single anchor — one focus stop, one predictable target.",
    "Hover and focus both shift the border to the foreground token for a clear affordance."
  ]
}

{
  "name": "Field",
  "category": "Data entry",
  "description": "Labeled text input. Mono label above a square field, accent focus ring, optional hint. Generates and links an id from the label when none is given.",
  "keywords": [
    "field",
    "input",
    "text",
    "form",
    "label"
  ],
  "props": [
    {
      "name": "label",
      "type": "string",
      "description": "Mono label, also the accessible name.",
      "required": true
    },
    {
      "name": "id",
      "type": "string",
      "description": "Field id; defaults to a slug of the label."
    },
    {
      "name": "hint",
      "type": "string",
      "description": "Helper or error text below the field."
    },
    {
      "name": "placeholder",
      "type": "string",
      "description": "Native placeholder, shown in the faint token."
    }
  ],
  "examples": [
    {
      "label": "Basic",
      "code": "<Field label=\"Email\" placeholder=\"you@studio.com\" />"
    },
    {
      "label": "With hint",
      "code": "<Field label=\"Project\" hint=\"One line is plenty.\" />"
    }
  ],
  "accessibility": [
    "The <label> is linked to the input via htmlFor/id — clicking the label focuses the field.",
    "An id is derived from the label when omitted, so the association never silently breaks.",
    "Focus shows both a border shift and an accent ring."
  ]
}