# Logicplum Design System

> Severe, academic minimalism on a warm stone canvas, anchored by high-contrast serif typography and wide-tracked sans-serif metadata.

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

## TL;DR
Logicplum employs a "monochrome-plus-warmth" palette, utilizing a deep ink (`#1f1f1d`) against a desaturated stone background (`#d8d5cc`). The system is typographically driven, pairing the classical elegance of **EB Garamond** for primary narrative and headers with the technical precision of **Inter** and **JetBrains Mono** for navigation and numbered lists. Layouts are defined by extreme horizontal rules and generous vertical padding (80px), creating a sense of institutional permanence. There are no rounded corners, no shadows, and no saturated accent colors; the brand relies entirely on spatial rhythm and typographic weight.

## Signature DNA
1. **The Institutional Rule** (1px horizontal dividers using `{colors.rule}` (#d8d5cc) or `{colors.rule-soft}` (#e8e5dc) that span the container to separate logical mandates.)
2. **The Metadata Track** (Use of **Inter** at 11px-12px with aggressive letter-spacing up to 2.42px for section labels and CTA links, creating a "stamped" technical feel.)
3. **Achromatic Hierarchy** (Total avoidance of hue; hierarchy is established solely through the transition from Ink (#1f1f1d) to Muted Ink (#6e6d68).)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| Logicplum (Parent) | #1f1f1d | Rule-based grids | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--ink` | `#1f1f1d` | Primary text, titles, active UI | 33 | 1 | `css_variable` |
| `--ink-soft` | `#2a2a28` | Secondary text | 1 | 0.9 | `css_variable` |
| `--ink-mute` | `#6e6d68` | Muted labels, secondary body | 16 | 1 | `css_variable` |
| `--canvas` | `#d8d5cc` | Page background (warm stone) | 3 | 1 | `computed_style` |
| `--rule` | `#d8d5cc` | Standard 1px divider | 3 | 1 | `css_variable` |
| `--rule-soft` | `#e8e5dc` | Subtle 1px divider | 1 | 1 | `css_variable` |

### Accent
No saturated accents captured in source. The system is strictly monochrome.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| EB Garamond | 400, 500 | Serif Display / Body | EB Garamond | Google Fonts |
| Inter | 400, 500 | Sans Metadata / Nav | Inter | Google Fonts |
| JetBrains Mono | 400 | Technical / Numbers | JetBrains Mono | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 19px | 28.5px | normal | 400 | Lead paragraphs | `p.lead` |
| `{type.header}` | 18px | 29.7px | normal | 400 | Section headers | `header` |
| `{type.body}` | 17px | 27.2px | normal | 400 | Standard prose | `p:nth-of-type(1)` |
| `{type.nav}` | 12px | 19.8px | 0.72px | 400 | Top navigation | `a` |
| `{type.cta}` | 12px | 19.8px | 1.44px | 400 | Inline text links | `a.cta-link` |
| `{type.meta}` | 11px | 18.15px | 2.42px | 500 | Hero labels | `div.hero-meta` |
| `{type.footer}` | 11px | 18.15px | 0.66px | 400 | Copyright/Legal | `footer` |
| `{type.mono}` | 10px | 15.5px | 0.5px | 400 | List numbering | `span.num` |

### Principles
1. **Serif for Narrative:** All long-form thought and "Mandates" must use EB Garamond.
2. **Wide-Tracked Sans for Utility:** Navigation and labels must use Inter with at least 0.66px tracking.
3. **Monospace for Indexing:** Use JetBrains Mono exclusively for numerical indexing (e.g., 01, 02).

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xxs}` | 4px | 6 |
| `{space.xs}` | 6px | 5 |
| `{space.sm}` | 8px | 9 |
| `{space.lg}` | 24px | 3 |
| `{space.xl}` | 36px | 4 |
| `{space.section}` | 80px | 2 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | All elements, buttons, containers | 49 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{flat}` | none | All surfaces | No shadows captured |

## Components

### Tier 1: Foundational

#### Horizontal Rule
**Role:** Logical section break.
**Pages observed:** https://logicplum.com
**Spec:** Border-top: 1px solid `#d8d5cc` (`--rule`)
**States observed:** Default: captured

#### Text Link (CTA)
**Role:** Primary navigation and page exits.
**Pages observed:** https://logicplum.com
**Spec:** Text: `#1f1f1d` / Typography: `{type.cta}` / Border-bottom: 1px solid `#1f1f1d`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Metadata Label
**Role:** Categorizing sections (e.g., "MANDATE", "ENGAGEMENT").
**Pages observed:** https://logicplum.com
**Spec:** Text: `#6e6d68` / Typography: `{type.meta}` / Text-transform: uppercase
**States observed:** Default: captured

#### Numbered List
**Role:** Sequential logic or system builds.
**Pages observed:** https://logicplum.com
**Spec:** Number: `{type.mono}` `#6e6d68` / Content: `{type.body}` `#1f1f1d` / Gap: 24px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Content Section
**Role:** Standard layout block.
**Pages observed:** https://logicplum.com
**Spec:** Background: transparent / Padding: 80px 0px / Border-bottom: 1px solid `#d8d5cc`
**States observed:** Default: captured

#### Navigation Bar
**Role:** Global site header.
**Pages observed:** https://logicplum.com
**Spec:** Height: auto / Padding: 36px 0px / Typography: `{type.nav}` / Text-transform: uppercase
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1440px (implied) |
| Section Padding | 80px vertical |
| Content Alignment | Left-aligned narrative, right-aligned metadata labels |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation stacks vertically; section padding reduced. |

## Imagery & decoration
The brand avoids photography and illustration. Decoration is limited to:
- **1px Rules:** Used to create a grid-like structure.
- **Typographic Scale:** Large serif headers against small mono numbers.
- **Negative Space:** High ratio of empty canvas to content.

## Do's
- Use `#1f1f1d` for all primary interactive text.
- Maintain 0px border radius on every UI element.
- Apply `letter-spacing: 2.42px` to all uppercase metadata labels.
- Use JetBrains Mono for any numerical data or indexing.
- Ensure horizontal rules span the full width of the content container.

## Don'ts
- **Wrong:** Using a blue accent for a "Submit" button. **Right:** Use an underlined text link in `#1f1f1d`. **Reason:** Logicplum is a monochrome parent brand; color is reserved for sub-brands (none currently defined).
- **Wrong:** Applying a 4px border radius to cards. **Right:** Keep corners at 0px. **Reason:** The brand DNA is strictly architectural and sharp.
- **Wrong:** Using Inter for long-form body copy. **Right:** Use EB Garamond. **Reason:** Serif is the narrative voice; sans-serif is for utility.

## Similar brands
- ElevenLabs (Typography-first, minimalist)
- Berenice (Academic, serif-heavy)
- Linear (Technical metadata precision)

## Quick start

```css
/* CSS Variables */
:root {
  --ink: #1f1f1d;
  --ink-mute: #6e6d68;
  --canvas: #d8d5cc;
  --rule: #d8d5cc;
  --rule-soft: #e8e5dc;
  --font-main: "EB Garamond", serif;
  --font-sans: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}
```

## Agent prompt examples
- "Generate a section header using EB Garamond 18px, followed by a 1px horizontal rule in #d8d5cc."
- "Create a metadata label in Inter, 11px, weight 500, with 2.42px letter spacing in color #6e6d68."
- "Design a list where numbers are 10px JetBrains Mono and content is 17px EB Garamond."

## Known gaps
- Hover and Active states for navigation links were not captured in the static crawl.
- Form input styles (text fields, checkboxes) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://logicplum.com | 1440x900 | 2026-06-06 |
| Mobile Home | https://logicplum.com | 390x844 | 2026-06-06 |