# Fabric — Design System
> An AI-powered workspace for thinking, collaborating, and organizing projects.
- **Canonical:** https://uiuxskills.com/library/fabric
- **Source:** https://fabric.so
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:14.246Z

---

---
version: alpha
name: Fabric
description: An AI-powered workspace for personal knowledge management, collaboration, and publishing.
tone: Modern, intelligent, clean, and professional.
color-scheme: light
colors:
  primary: "#0000EE"
  secondary: "#19154E"
  surface: "#FFFFFF"
  surface-container: "#EDEDED"
  on-surface: "#666666"
  on-primary: "#FFFFFF"
  outline: "#EDEDED"
  error: "#C71585"
  accent: "#0A0A0A"
  focus-ring: "#0099FF"
typography:
  display-lg:
    fontFamily: GT Alpina Light
    fontSize: 80px
  display-md:
    fontFamily: GT Alpina Light
    fontSize: 52px
  headline-lg:
    fontFamily: GT Alpina Light
    fontSize: 36px
  body-md:
    fontFamily: Inter
    fontSize: 18px
  body-sm:
    fontFamily: Inter
    fontSize: 14px
  label-md:
    fontFamily: Inter
    fontSize: 16px
  label-sm:
    fontFamily: Inter
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.secondary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.full}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 500ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.1)
  md: 0 4px 6px rgba(0,0,0,0.1)
  lg: 0 10px 20px rgba(0,0,0,0.1)
---

## Overview

Fabric is a modern, minimalist workspace designed for tech-savvy professionals, researchers, and creatives. It emphasizes a clean, serif-led aesthetic that balances academic elegance with high-utility AI features, resulting in a professional and highly intelligent user experience.

## Colors

The color strategy focuses on high-contrast utility balanced by a neutral, airy background palette.

*   Primary (#0000EE): Used for primary interactive elements and brand highlights.
*   Secondary (#19154E): Used for deep-toned accents and secondary UI elements.
*   Surface (#FFFFFF): The primary background color for the workspace.
*   Surface-container (#EDEDED): Used for secondary containers and subtle UI backgrounds.
*   On-surface (#666666): Standard text color for body copy.
*   On-primary (inferred) (#FFFFFF): Text color for primary buttons.
*   Outline (#EDEDED): Border color for sections and UI components.
*   Error (#C71585): Semantic color for error states.
*   Accent (#0A0A0A): Used for high-contrast UI elements like primary buttons.
*   Focus-ring (#0099FF): Focus state color for links and interactive elements.

## Typography

The typography pairs a sophisticated serif for headlines with a clean, functional sans-serif for UI and body text to ensure readability and academic character.

*   Display-lg: GT Alpina Light, used for hero headlines.
*   Display-md: GT Alpina Light, used for section headers.
*   Headline-lg (inferred): GT Alpina Light, used for secondary section headers.
*   Body-md: Inter, used for standard body copy.
*   Body-sm (inferred): Inter, used for captions or metadata.
*   Label-md (inferred): Inter, used for button and navigation labels.
*   Label-sm (inferred): Inter, used for small UI labels.

## Layout

The site utilizes a centered, max-width container approach with a 10px base unit, creating a generous and airy rhythm. The page pattern follows a logical flow: nav, hero, social-proof, features, use-cases, and footer. The hero composition features a centered headline and subhead with a single primary CTA, often flanked by floating UI elements. The design is mobile-first, with navigation collapsing into a menu on smaller screens.

## Elevation & Depth

Elevation is used sparingly to differentiate cards from the background, utilizing soft, subtle shadows to maintain a clean, flat aesthetic.
*   elevation.sm: Subtle card lift.
*   elevation.md: Standard dropdown or popover depth.
*   elevation.lg: Modal or drawer overlay.

## Shapes

The brand maintains a consistent 8px border-radius for interactive components, creating a friendly, approachable feel without being overly rounded. This scale is applied predictably across buttons, inputs, and cards to unify the interface.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.accent}` with `{typography.label-md}`, transitioning to `{colors.primary}` on hover. Use these for main calls to action; secondary buttons should utilize the `{colors.surface-container}` background to maintain hierarchy.

### Card
Cards use `{colors.surface}` with a `{rounded.md}` radius and `{colors.outline}` border. These are the primary containers for content blocks and should remain flat unless elevated using `{elevation.sm}` for specific interactive focus.

### Input Field
Input fields feature a `{rounded.sm}` radius and `{colors.outline}` border. Upon interaction, the border should shift to `{colors.focus-ring}` to provide clear visual feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.primary}` for text that is not a link or CTA. |
| Apply `{typography.display-lg}` for hero headlines only. | Avoid mixing `{typography.display-lg}` with body text styles. |
| Use `{colors.surface-container}` for secondary UI backgrounds. | Never use `{colors.accent}` for secondary buttons. |
| Maintain consistent `{spacing.md}` between content blocks. | Do not apply `{elevation.lg}` to flat UI elements. |
| Use `{rounded.md}` for all card components. | Avoid using `{rounded.full}` on standard content cards. |
| Apply `{typography.body-md}` for primary paragraph text. | Do not use `{colors.error}` for non-destructive actions. |
| Use `{colors.focus-ring}` for input focus states. | Avoid using default browser focus outlines. |
| Use `{colors.outline}` for subtle component borders. | Do not use high-contrast black borders for UI containers. |

## Content Style

CTA labels are imperative, action-oriented, and concise (e.g., "Try for $0", "Learn more"). The tone is direct, benefit-focused, and human-centric, ensuring the user understands the value proposition immediately.

Copy density is kept low through the use of short, scannable paragraphs and frequent, purposeful lists to break up complex information.

## Imagery & Icons

The imagery style is mixed, utilizing a combination of high-fidelity product screenshots and clean, abstract UI illustrations. Icons are simple, stroke-based, and rounded, maintaining a minimal aesthetic that aligns with the overall workspace design.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Fabric, a minimal, intelligent AI workspace brand. Match its clean, serif-led, professional tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name (`{colors.primary}`, `{typography.body-md}`, `{rounded.md}`) — never hardcode hex values, font sizes, or pixel radii.
2. Use only the component variants defined under `components:`. Do not invent new button styles, card variants, or badge types the spec does not list.
3. Follow the Layout section: centered max-width container, mobile-first, navigation collapses on small screens, single breakpoint at 768px when unspecified.
4. Apply the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. Tokens marked "(inferred)" in the spec are visual approximations. If an authoritative source (theme file, Storybook) is available, defer to it over the inferred value.

## Output contract

**Must:**
- Use all tokens by name for color, type, spacing, radius, elevation, and motion.
- Render all interactive components with hover, focus, and disabled states as defined (e.g., `button-primary-hover`, `input-field-focus`).
- Apply the canonical spacing scale (`{spacing.xs}` through `{spacing.2xl}`) for all padding and gaps.
- Use `{colors.focus-ring}` for focus states; never fall back to default browser outlines.
- Keep CTA copy imperative and concise per the Content Style section.

**Must NOT:**
- Introduce colors, fonts, radii, or elevation levels not present in the spec.
- Use generic utility defaults (e.g., `text-gray-500`, `rounded-md` as a literal string) when a brand token exists.
- Apply `{colors.primary}` to non-link, non-CTA text; apply `{colors.error}` to non-destructive actions; apply `{rounded.full}` to standard content cards.
- Add emoji, filler copy, or marketing language.
- Rewrite, replace, or invent page copy, headings, labels, or navigation items.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for secondary containers, use `{colors.surface-container}`; for body text, use `{colors.on-surface}`.
- Use `{typography.display-lg}` only for hero headlines; use `{typography.display-md}` for section headers — never mix display styles with body text.
- Apply `{elevation.sm}` only to interactively focused cards; reserve `{elevation.lg}` for modals and drawers only.