# Felicityanddesign Design System

> High-contrast monochrome canvas utilizing stark black surfaces and Poppins-anchored typography.

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

## TL;DR
Felicityanddesign operates on a strict achromatic foundation, prioritizing a deep black background (`#000000`) that forces all content into high-contrast visibility. Typography is the primary structural element, pairing the geometric sans-serif **Poppins** for bold display headers with **Open Sans** for functional body text. The color palette is restricted to white (`#ffffff`) and a mid-tone gray (`#666666`), used primarily for secondary text and borders. Geometry is sharp and uncompromising, with a universal border-radius of `0px` across all observed components.

## Signature DNA
1. **Achromatic Void** (The system uses a pure black `#000000` surface across all analyzed pages, creating a "dark mode by default" environment where white and gray text are the only navigational cues.)
2. **Geometric Sans Pairing** (The interplay between Poppins at weight 700 for display and Open Sans at weight 500 for body creates a modern, development-centric aesthetic.)
3. **Hard-Edge Minimalism** (A strict `0px` radius policy is applied to all surfaces and containers, rejecting the rounded trends of contemporary SaaS.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.surface}` | `#000000` | Primary page background and surface fill | 3 | 0.6 | computed_style |
| `{color.text-primary}` | `#ffffff` | Primary headings and high-emphasis text | 9 | 0.6 | computed_style |
| `{color.text-secondary}` | `#666666` | Secondary body text and metadata | 9 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent-gray}` | `#666666` | Observed as a dominant achromatic primary | 9 | 0.6 | resolved_primary |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 300, 700 | Display and Headings | Poppins (Google Fonts) | OFL |
| Open Sans | 500 | Body and UI Labels | Open Sans (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 48px | 52.8px | normal | 700 | Page Hero H1 | `h1` |
| `{type.body-md}` | 14px | 23.8px | normal | 500 | Standard body text | `article#post-10` |
| `{type.body-light}` | 14px | 23.8px | normal | 300 | De-emphasized body | `p` |
| `{type.label}` | 14px | 0px | normal | 500 | Image captions/wraps | `span.et_pb_image_wrap` |
| `{type.nav}` | 14px | 23.8px | normal | 500 | Navigation links | `https://felicityanddesign.com` |
| `{type.footer}` | 14px | 23.8px | normal | 300 | Footer metadata | `https://felicityanddesign.com/about` |
| `{type.subhead}` | 14px | 23.8px | normal | 700 | Small headings | `https://felicityanddesign.com/pricing` |
| `{type.link}` | 14px | 23.8px | normal | 500 | Inline hyperlinks | `a` |

### Principles
1. **High Contrast Only**: Text must be either `#ffffff` or `#666666` against the `#000000` background to maintain a minimum 5.7:1 contrast ratio.
2. **Weight as Hierarchy**: Use Poppins 700 for structural anchors and Open Sans 500 for narrative flow.
3. **Normal Tracking**: No custom letter-spacing is observed; the system relies on the natural metrics of Poppins and Open Sans.

## Spacing
**Base unit:** 10px
| Token | Value | Occurrences |
|---|---|---|
| `{spacing.base}` | 10px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | All containers, buttons, and images | `radii: 0px` (18 occurrences) |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elevation.flat}` | none | All surfaces sit on a single plane | `shadow: none` |

## Components
### Tier 1: Foundational
#### Surface
**Role:** Primary content container
**Pages observed:** All
**Spec:** Background: `#000000` | Text: `#666666` | Radius: `0px` | Shadow: `none`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns
#### Typography Block
**Role:** Standard text layout
**Pages observed:** All
**Spec:** Font: `Open Sans` | Size: `14px` | Line-height: `23.8px` | Color: `#666666`
**States observed:** Default: captured

#### Display Header
**Role:** Page titling
**Pages observed:** All
**Spec:** Font: `Poppins` | Size: `48px` | Weight: `700` | Color: `#ffffff`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | Not captured in source |
| Content Alignment | Center-aligned observed in screenshots |
| Section Padding | 10px (base unit) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked typography, centered alignment maintained |
| Desktop | 1440px | Wide-set display headers |

## Imagery & decoration
The brand avoids photographic backgrounds, opting for a solid `#000000` canvas. Decoration is limited to typographic scale and the occasional use of a horizontal rule (implied by layout structure).

## Do's
- Use `#ffffff` for all H1 and primary headings to ensure maximum visibility.
- Apply `0px` border-radius to every UI element without exception.
- Set body text to `Open Sans` at `14px` with a `23.8px` line height.
- Maintain the `#000000` background for all primary page sections.
- Use `Poppins 700` for all display-level messaging.

## Don'ts
- **Wrong:** Using a rounded button. **Right:** Square edges (`0px`). **Reason:** Brand DNA is strictly geometric and hard-edged.
- **Wrong:** Introducing a vibrant primary color like blue or red. **Right:** Use `#666666`. **Reason:** This is a monochrome parent system.
- **Wrong:** Using a sub-brand accent color as a background fill. **Right:** Keep background `#000000`. **Reason:** Parent brand identity is defined by the "achromatic void."
- Do not use shadows or blurs for depth.
- Do not use letter-spacing other than `normal`.

## Similar brands
- Vercel (Geist-driven minimalism)
- Standard Projects
- Minimalissimo

## Quick start

```css
:root {
  --color-surface: #000000;
  --color-text-primary: #ffffff;
  --color-text-secondary: #666666;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --radius-none: 0px;
  --spacing-base: 10px;
}
```

## Agent prompt examples
- "Create a hero section with a `#000000` background, a `48px` Poppins Bold header in `#ffffff`, and a `14px` Open Sans description in `#666666`."
- "Design a card component with a `1px` border of `#666666`, `0px` border-radius, and no box-shadow."
- "Generate a navigation bar using Open Sans 500 at `14px` with `#ffffff` text on a `#000000` background."

## Known gaps
- Hover and Active states for interactive elements were not captured in the source.
- Maximum container widths for ultra-wide displays are not defined.
- Button component specifics (padding/border-width) were not explicitly detailed in the component evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://felicityanddesign.com | 1440px | 2026-06-06 |
| Pricing | https://felicityanddesign.com/pricing | 1440px | 2026-06-06 |
| About | https://felicityanddesign.com/about | 390px | 2026-06-06 |