# Faberconnect Design System

> High-contrast utility meets industrial teal accents, anchored by a strict monochrome foundation and Roboto-driven clarity.

**Source:** https://faberconnect.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Faberconnect utilizes a high-contrast monochrome palette (#ffffff, #000000, #171717) to establish a professional, utility-first atmosphere for the construction tech space. The system is punctuated by a single functional accent, "Faber Teal" (#5b9d9d), used for primary actions, feature backgrounds, and iconography. Typography relies on `ui-sans-serif` for structural headings and `Roboto` for data-heavy body content and inputs. Layouts are spacious, utilizing a 96px section rhythm and cards with a 16px border radius, creating a modern SaaS feel that remains grounded in industrial reliability.

## Signature DNA
1. **Faber Teal Accents** (#5b9d9d used as a primary surface and text accent against a strictly neutral #ffffff and #171717 background).
2. **Industrial Typography Pairing** (The use of `ui-sans-serif` for display paired with `Roboto` for functional UI elements like inputs and buttons).
3. **Softened Utility Geometry** (A 16px border radius on primary content cards and 9999px pill shapes for primary CTAs, contrasting with sharp 0px edges on foundational section containers).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary surface, button text | 43 | 1.0 | Computed |
| `{color.black}` | `#000000` | Primary text, border, logo | 45 | 0.8 | Computed |
| `{color.neutral.900}` | `#171717` | Dark section backgrounds, primary headings | 42 | 0.8 | Computed |
| `{color.neutral.600}` | `#525252` | Secondary body text | 19 | 0.8 | Computed |
| `{color.neutral.200}` | `#e5e5e5` | Default dividers and card borders | 6 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.teal.primary}` | `#5b9d9d` | Primary CTA background, feature cards, icons | 15 | 0.8 | Computed |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{color.ring}` | `#3b82f6` | Focus ring color |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| `ui-sans-serif` | 300, 400, 600 | Headings, Navigation, Body | Inter | System |
| `Roboto` | 400 | Functional UI, Inputs, Buttons | Roboto | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.h2.lg}` | 36px | 40px | -0.9px | 400 | Main section headers | `h2.mt-2.text-3xl` |
| `{text.h2.md}` | 30px | 36px | normal | 400 | Secondary headers | `h2.mt-6.text-3xl` |
| `{text.subheading}` | 18px | 28px | normal | 600 | Feature titles | `h3.text-lg.font-semibold` |
| `{text.body.lg}` | 18px | 32px | normal | 400 | Hero/Intro prose | `p.mt-6.text-lg` |
| `{text.body.md}` | 16px | 24px | normal | 400 | Default body copy | `div.absolute.inset-y...` |
| `{text.body.strong}` | 16px | 28px | normal | 600 | Bold inline emphasis | `dt.inline.font-semibold` |
| `{text.input}` | 16px | 23px | 0.15px | 400 | Form field text | `div.MuiInputBase-root` |
| `{text.button}` | 14px | 20px | normal | 400 | CTA labels | `button.inline-flex` |

### Principles
1. **Tight Display Tracking:** Larger headings (36px) use negative letter spacing (-0.9px) to maintain visual density.
2. **Functional Roboto:** All interactive inputs and specific button roles switch to Roboto for increased legibility in technical contexts.
3. **Lightweight Prose:** Hero descriptions often utilize a 300 weight to provide contrast against bold 600 weight subheadings.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 21 |
| `{space.sm}` | 16px | 5 |
| `{space.md}` | 24px | 25 |
| `{space.lg}` | 32px | 9 |
| `{space.section}` | 96px | 3 |
| `{space.hero}` | 128px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, full-width bands | 107 occurrences |
| `{radius.input}` | 6px | Form fields, small buttons | 4 occurrences |
| `{radius.card}` | 16px | Content cards, testimonial blocks | 22 occurrences |
| `{radius.pill}` | 9999px | Primary CTAs, tags | 5 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.sm}` | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | Small cards, buttons | Card component |
| `{shadow.md}` | `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px` | Hovered cards, floating UI | Card component |
| `{shadow.lg}` | `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` | High-impact hero imagery | Card component |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Get started")
**Pages observed:** https://faberconnect.com
**Spec:** Background: `#5b9d9d` | Text: `#ffffff` | Radius: `9999px` | Padding: `10px 14px` | Typography: `14px Roboto`
**States observed:** Default captured | Hover not captured

#### Input Field
**Role:** Form data entry
**Pages observed:** https://faberconnect.com
**Spec:** Background: `#ffffff` | Border: `1px #e5e5e5` | Radius: `6px` | Typography: `16px Roboto`
**States observed:** Default captured | Focus captured (uses `--tw-ring-color` #3b82f6)

### Tier 2: Patterns

#### Feature Card (Teal)
**Role:** Highlighting key platform benefits
**Pages observed:** https://faberconnect.com
**Spec:** Background: `#5b9d9d` | Text: `#ffffff` | Radius: `8px` | Padding: `24px`
**States observed:** Default captured

#### Testimonial Card
**Role:** Social proof blocks
**Pages observed:** https://faberconnect.com
**Spec:** Background: `#ffffff` | Border: `1px #e5e7eb` | Radius: `16px` | Shadow: `{shadow.md}`
**States observed:** Default captured

### Tier 3: Surface-specific

#### Dark Section Container
**Role:** High-contrast content bands
**Pages observed:** https://faberconnect.com
**Spec:** Background: `#171717` | Text: `#ffffff` | Radius: `0px` | Padding: `96px 0px`
**States observed:** Default captured

#### Icon Plate
**Role:** Decorative feature indicators
**Pages observed:** https://faberconnect.com
**Spec:** Background: `rgba(0, 0, 0, 0)` | Border: `1px #e5e5e5` | Radius: `16px` | Padding: `32px`
**States observed:** Default captured

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1280px |
| Section Gap | 96px |
| Grid Columns | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding-x reduces to 16px; 1-column stack |
| Desktop | 1440px | Multi-column grids (3-up or 4-up); horizontal navigation |

## Imagery & decoration
Faberconnect uses high-fidelity product screenshots (mobile app and desktop dashboard) with significant drop shadows (`{shadow.lg}`) to create depth. Decorative elements include thin line-art icons and a subtle "Powered by AI" badge with a gradient-like teal border.

## Do's
- Use `#5b9d9d` for all primary action buttons.
- Maintain a `96px` vertical gap between major content sections.
- Apply a `16px` border radius to all white content cards.
- Use `Roboto` specifically for form inputs and technical UI labels.
- Ensure all text on `#171717` backgrounds is `#ffffff` for maximum contrast.

## Don'ts
- **Wrong:** Using `#3b82f6` (ring color) as a button background. **Right:** Use `#5b9d9d`. **Reason:** Blue is reserved for focus states, not brand actions.
- Do not use a border radius on full-width section background containers.
- Do not use `#000000` for long-form body text; use `#525252` for better readability.
- Do not mix `ui-sans-serif` and `Roboto` within the same text block.

## Quick start

```css
/* CSS Variables */
:root {
  --color-teal-primary: #5b9d9d;
  --color-neutral-900: #171717;
  --color-neutral-600: #525252;
  --color-neutral-200: #e5e5e5;
  --radius-card: 16px;
  --radius-pill: 9999px;
  --space-section: 96px;
}
```

## Agent prompt examples
- "Create a primary CTA button using Faber Teal #5b9d9d, white text, and a pill-shaped radius."
- "Design a content card with a 16px border radius, white background, and the medium elevation shadow."
- "Build a dark section container using #171717 background with 96px vertical padding."

## Known gaps
- Hover and active states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific typography scale for headings was not fully mapped in the provided evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|----------|--------------|
| Main Homepage | https://faberconnect.com | 1440px | 2026-06-06 |
| Mobile Homepage | https://faberconnect.com | 390px | 2026-06-06 |