# Reflexions Design System

> Brutalist precision meets architectural clarity through high-contrast monochrome surfaces and heavy-weight micro-grotesque typography.

**Source:** [https://reflexions.co](https://reflexions.co) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Reflexions operates on a strict monochrome foundation where `#1f1f1f` (Obsidian) and `#ffffff` (White) create a high-contrast, structural environment. The system rejects soft elevation, opting for 0px border radii and heavy 3px borders to define content boundaries. Typography is anchored by **halyard-micro**, utilizing extreme weights (900 for display, 300 for body) to create a rhythmic, almost technical hierarchy. Layouts are characterized by generous vertical spacing (up to 88px) and a "Surface-on-Surface" pattern where white cards with thick borders overlap photographic backgrounds.

## Signature DNA
1. **The 3px Structural Border** (Obsidian `#1f1f1f` borders applied to white surfaces, creating a "blueprint" aesthetic that defines every major content card and button.)
2. **Halyard-Micro Black** (The use of 64px / weight 900 typography for primary headlines, providing a massive, industrial anchor against the stark white canvas.)
3. **Zero-Radius Brutalism** (A total rejection of rounded corners—`0px` across all containers, cards, and primary buttons—signaling engineering precision.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--project-color` | `#1f1f1f` | Primary surface, text, borders, and button backgrounds | 115 | 1.0 | CSS Variable |
| `canvas-white` | `#ffffff` | Page background, button text, and card surfaces | 39 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `decorative-only` | `#1f1f1f` | Used for social icons and footer dividers | <5 | 1.0 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| halyard-micro | 300, 500, 900 | All headlines, body, and UI | Inter (Tight) | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-black}` | 64px | 79.75px | normal | 900 | Hero headlines | `div.text-4xl.font-black` |
| `{type.display-medium}` | 64px | 79.75px | normal | 500 | Secondary hero | `h1.font-medium.text-2xl` |
| `{type.heading-lg}` | 30px | 37.675px | normal | 500 | Section titles | `h3.text-lg.font-medium` |
| `{type.heading-md}` | 22px | 27.5px | normal | 500 | Card titles | `h3.text-base.font-medium` |
| `{type.heading-sm}` | 22px | 27.5px | normal | 300 | Sub-headers | `div.absolute.w-full` |
| `{type.body-strong}` | 18px | 22.55px | 0.5412px | 500 | UI Labels / Links | `span.font-medium.no-underline` |
| `{type.body-md}` | 18px | 27.06px | normal | 300 | Running text | `p` |
| `{type.body-sm}` | 18px | 22.55px | normal | 500 | Captions | `p.font-medium.text-sm` |

### Principles
1. **High-Contrast Weight Jumps:** Headlines skip directly from 900 weight to 300 weight for body text to maximize visual hierarchy.
2. **Micro-Grotesque Clarity:** Halyard-micro is used specifically for its legibility in technical and engineering contexts.
3. **Normal Tracking:** Letter spacing remains "normal" for most roles, except for interactive spans which use a slight expansion (+0.54px).

## Spacing
**Base unit:** 11px (observed as the primary increment)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 6px | 7 |
| `{space.sm}` | 11px | 20 |
| `{space.md}` | 22px | 30 |
| `{space.lg}` | 44px | 13 |
| `{space.xl}` | 66px | 8 |
| `{space.section}` | 88px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | All cards, buttons, and inputs | 116 occurrences |
| `{radius.pill}` | 9999px | Decorative avatars only (rare) | 2 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | All surfaces rely on 3px borders for depth | 0 shadow occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Read More, Learn More)
**Pages observed:** Homepage, Work sections
**Spec:** Background `#1f1f1f` / Text `#ffffff` / Border `3px #1f1f1f` / Radius `0px` / Padding `11px 16.5px` / Typography `18px 500`
**States observed:** Default: captured | Hover: not captured

#### Obsidian Surface
**Role:** Dark section backgrounds and footer
**Pages observed:** All pages
**Spec:** Background `#1f1f1f` / Text `#ffffff` / Border `0px` / Radius `0px` / Padding `0px`
**States observed:** Default: captured

### Tier 2: Patterns

#### Content Card
**Role:** Case study and news previews
**Pages observed:** Homepage
**Spec:** Background `#ffffff` / Text `#1f1f1f` / Border `3px #1f1f1f` / Radius `0px` / Padding `44px`
**States observed:** Default: captured

#### Section Header
**Role:** Defining new content areas
**Pages observed:** All pages
**Spec:** Typography `30px 500` / Border-top `3px #1f1f1f` (observed as a 22px wide accent bar)
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Navigation Bar
**Role:** Global site header
**Pages observed:** All pages
**Spec:** Background `transparent` / Text `#ffffff` / Height `auto` / Logo `White Square R`
**States observed:** Default: captured

#### Footer
**Role:** Global site footer
**Pages observed:** All pages
**Spec:** Background `#1f1f1f` / Text `#ffffff` / Border-top `1px #ffffff` (hairline)
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Section Gutter | 88px |
| Card Internal Padding | 44px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Content cards stack vertically; padding reduces from 44px to 22px. |
| Desktop | 1440px | Multi-column grid for client logos and news items. |

## Imagery & decoration
Reflexions uses high-contrast, desaturated photography or architectural shots. Decoration is limited to 3px horizontal bars and the "R" square logo. It avoids gradients, shadows, and rounded corners entirely.

## Do's
- Use `#1f1f1f` for all primary structural elements including borders.
- Set all border radii to `0px` to maintain the architectural feel.
- Use `halyard-micro` weight 900 for display headlines.
- Maintain a minimum of `44px` padding inside white content cards.
- Use 3px borders for interactive elements like buttons and cards.

## Don'ts
- **Wrong:** Using a rounded button. **Right:** 0px radius. **Reason:** Brand identity is built on brutalist, sharp edges.
- **Wrong:** Adding a drop shadow to a card. **Right:** 3px Obsidian border. **Reason:** Elevation is communicated through line weight, not light simulation.
- **Wrong:** Using a sub-brand color (e.g., Foley Blue) as the primary site background. **Right:** Use `#ffffff` or `#1f1f1f`. **Reason:** Saturated colors are reserved for project-specific content, not the system shell.
- Do not use weights between 500 and 900 for headlines.
- Do not use letter spacing on body text.

## Similar brands
- **Huge Inc** (Monochrome, heavy type)
- **Apercu** (Technical, grid-based layout)
- **Work & Co** (Structural, high-contrast UI)

## Quick start

### CSS Custom Properties
```css
:root {
  --project-color: #1f1f1f;
  --canvas-white: #ffffff;
  --font-main: "halyard-micro", sans-serif;
  --border-width-thick: 3px;
  --radius-none: 0px;
}
```

### Tailwind v4 Theme
```javascript
export const theme = {
  colors: {
    obsidian: '#1f1f1f',
    white: '#ffffff',
  },
  extend: {
    fontFamily: {
      sans: ['halyard-micro', 'sans-serif'],
    },
    borderWidth: {
      '3': '3px',
    },
    borderRadius: {
      'none': '0px',
    }
  }
}
```

## Agent prompt examples
- "Generate a hero section with a `#1f1f1f` background, a 64px halyard-micro weight 900 headline in `#ffffff`, and a primary button with a 3px white border and 0px radius."
- "Create a content card component with a `#ffffff` background, 3px `#1f1f1f` border, 44px internal padding, and 0px border radius."
- "Design a footer using `#1f1f1f` background and `#ffffff` text, featuring a 1px white top divider and social icons in white."

## Known gaps
- Hover states for buttons were not captured in the static evidence.
- Form input validation states (Success/Error) were not present in the analyzed pages.
- Mobile navigation menu transition was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Main Page | https://reflexions.co | 1440x900 | 2026-06-06 |
| Pricing | https://reflexions.co/pricing | 1440x900 | 2026-06-06 |
| About | https://reflexions.co/about | 1440x900 | 2026-06-06 |