# Fabricdata Design System

> High-contrast enterprise utility meets cinematic red accents, anchored by bold Apple-inspired typography on a stark white canvas.

**Source:** [https://fabricdata.com](https://fabricdata.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Fabricdata utilizes a "monochrome plus one" strategy, where a stark white background (`#ffffff`) and deep obsidian text (`#171a1f`) are punctuated by a high-voltage brand red (`#da344a`). The system relies heavily on the **SF Pro Display** family, using extreme weights (Bold 700 to Black 900) and tight negative letter-spacing (-2px) to create an authoritative, hardware-like aesthetic. Components are characterized by generous internal padding and a mix of sharp 0px corners for sections and soft 8px to 100px radii for interactive elements.

## Signature DNA
1. **The Crimson Emphasis** (Using `#da344a` for specific keywords within headings and primary CTAs to draw immediate focal points on a grayscale canvas.)
2. **Apple-Tier Typography** (Deployment of SF Pro Display Bold at 64px with -2px tracking, mimicking the density and authority of premium OS interfaces.)
3. **Pill-Shaped Utility** (Interactive elements like the "Get in touch" button and "Request a Demo" use 100px radii, contrasting against the sharp-edged layout containers.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and text on dark surfaces | 62 | 0.8 | Computed Style |
| `{color.ink}` | `#171a1f` | Primary headings and dark section backgrounds | 98 | 0.8 | Computed Style |
| `{color.text.primary}` | `#000000` | Standard body text and iconography | 293 | 0.8 | Computed Style |
| `{color.surface.soft}` | `#f3f3f3` | Subtle alternating section backgrounds | 25 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.brand.primary}` | `#da344a` | Brand red: used for heading highlights and primary CTAs | 57 | 0.8 | Computed Style |
| `{color.brand.secondary}` | `#495460` | Slate gray: used for secondary descriptive text | 47 | 0.8 | Computed Style |
| `{color.link}` | `#0000ee` | Standard blue for inline text links | 37 | 0.8 | Computed Style |
| `{color.accent.purple}` | `#a08cfb` | Decorative card background (Product section) | 7 | 0.6 | decorative_only |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| SF Pro Display Bold | 400, 700, 900 | Primary Headings | Inter Bold | Proprietary |
| SF Pro Display Medium| 400, 500, 700 | Sub-headings / UI | Inter Medium | Proprietary |
| SF Pro Display Regular| 400, 700 | Body Copy | Inter | Proprietary |
| Inter | 400, 700 | Secondary Body | Inter | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 64px | 71.68px | -2px | 400 | Hero H1 | `h1.framer-text` |
| `{type.display.lg}` | 48px | 55.2px | -2px | 700 | Section H2 | `h2.framer-text` |
| `{type.heading.md}` | 38px | 53.2px | -1.52px | 700 | Feature Headings | `h3.framer-text` |
| `{type.heading.sm}` | 24px | 33.6px | -0.96px | 700 | Card Titles | `h3.framer-text` |
| `{type.body.lg}` | 18px | 28.08px | normal | 400 | Intro Paragraphs | `p.framer-text` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Standard Body | `p.framer-text` |
| `{type.caption.caps}` | 10px | 10px | 0.88px | 400 | Overlines / Labels | `p.framer-text` |
| `{type.caption.tiny}` | 9px | 10.8px | 0.5px | 400 | Footer / Legal | `p.framer-text` |

### Principles
1. **Negative Tracking on Display:** All text above 32px must use negative letter-spacing (-1.5px to -2px) to maintain visual density.
2. **Chromatic Emphasis:** Headings often contain a single span of `{color.brand.primary}` to highlight the subject (e.g., "Media Companies").
3. **Weight Pairing:** Pair Bold (700) headings with Regular (400) body text; avoid using Medium (500) for long-form prose.

## Spacing
**Base unit:** 4px (Inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 10px | 5 |
| `{space.md}` | 20px | 25 |
| `{space.section.y}` | 86px | 2 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 461 occurrences |
| `{radius.sm}` | 8px | UI Cards / Inputs | 86 occurrences |
| `{radius.md}` | 16px | Feature Cards | 4 occurrences |
| `{radius.pill}` | 100px | Primary Buttons | 10 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.flat}` | none | Default state | 13 occurrences |
| `{shadow.card}` | `rgba(0, 0, 0, 0.25) 3px 4px 4px 0px` | Floating product cards | 8 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button (Pill)
**Role:** Main call to action (e.g., "Get in touch", "Request a Demo")
**Pages observed:** [fabricdata.com](https://fabricdata.com), [fabricdata.com/about](https://fabricdata.com/about)
**Spec:** 
- Background: `#da344a` (Brand Red)
- Text: `#ffffff` (White)
- Radius: `100px`
- Padding: `16px 20px`
- Typography: SF Pro Display Bold 18px
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

#### Surface Container
**Role:** Layout sections for content grouping
**Pages observed:** [fabricdata.com](https://fabricdata.com), [fabricdata.com/about](https://fabricdata.com/about)
**Spec:** 
- Background: `#ffffff` or `#171a1f`
- Radius: `0px`
- Padding: `86px 0px 103px` (Section vertical)
**States observed:** Default: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Product or service highlights
**Pages observed:** [fabricdata.com](https://fabricdata.com)
**Spec:** 
- Background: `rgba(0, 0, 0, 0)` (Transparent)
- Border: `0px`
- Radius: `8px`
- Shadow: `rgba(0, 0, 0, 0) 0px 1px 2px 0px`
**States observed:** Default: captured

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1200px (approx) |
| Section Padding | 86px (top), 103px (bottom) |
| Grid | 2-column (Hero), 3-column (Features) |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Headings scale to ~32px, 1-column stack, Hamburger menu |
| Desktop | 1440px | Full horizontal nav, multi-column grids |

## Imagery & decoration
Fabricdata uses clean, high-fidelity software screenshots and abstract data visualizations (line charts, node graphs). It avoids stock photography of people, opting for Robert Delf (CEO) portraiture only on the "About" page.

## Do's
- Use `#da344a` sparingly for high-impact emphasis.
- Apply `-2px` letter-spacing to all H1 and H2 display text.
- Ensure all primary buttons use the `100px` pill radius.
- Use `#f3f3f3` to separate white sections without introducing heavy borders.
- Maintain a minimum vertical section gap of `80px`.

## Don'ts
- **Wrong:** Using a generic red like `#ff0000`. **Right:** Use `#da344a`. **Reason:** The brand red is slightly desaturated and deeper to maintain professional enterprise tone.
- **Wrong:** Using rounded corners on section backgrounds. **Right:** Keep section edges at `0px`. **Reason:** The brand uses a strict "flat-stack" layout.
- **Wrong:** Setting display headings with positive letter-spacing. **Right:** Always use negative tracking. **Reason:** To maintain the "Apple-style" density.

## Similar brands
- Apple (Typography and spacing)
- Vercel (Monochrome utility)
- Stripe (High-fidelity software visualization)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-brand-red: #da344a;
  --color-ink: #171a1f;
  --color-canvas: #ffffff;
  --font-display: "SF Pro Display", "Inter", sans-serif;
  --radius-pill: 100px;
  --shadow-card: 3px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
```

## Agent prompt examples
- "Create a hero section with a 64px bold heading using SF Pro Display, tracking -2px, with the last word highlighted in #da344a."
- "Generate a primary CTA button with a 100px border radius, #da344a background, and 16px 20px padding."
- "Design a 3-column feature grid using 8px rounded cards on a #f3f3f3 background."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in token data.
- Success and Error semantic colors were not present on the analyzed marketing pages.
- Mobile-specific spacing tokens were not isolated from desktop values.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-----|----------|--------------|
| Homepage | [https://fabricdata.com](https://fabricdata.com) | 1440px | 2026-06-06 |
| About | [https://fabricdata.com/about](https://fabricdata.com/about) | 1440px | 2026-06-06 |
| Mobile | [https://fabricdata.com](https://fabricdata.com) | 390px | 2026-06-06 |