Logan Liffick

# Logan Liffick — Style Reference
> monochromatic scholarly text

**Theme:** light

**Site:** https://loganliffick.com

This design system crafts a focused, almost monastic experience, presenting information with absolute clarity and minimal visual distraction. The stark contrast between near-black text and a pale, subtle background establishes a high-readability environment, reminiscent of a printed page. Its singular typeface, 'Inter', used across varying weights and sizes, lends a consistent and understated professionalism, while the precise, controlled spacing dictates a calm, unhurried rhythm to content consumption.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Text Black | `#171717` | `--color-text-black` | Primary text, headings, strong emphasis, link default state. Defines the foundational monochromatic palette and achieves a formal, high-contrast readability. |
| Subtle Gray | `#525252` | `--color-subtle-gray` | Secondary text, body copy, less prominent headings, small buttons, navigation items. Provides relief from the stark black and marks less critical information or interactive elements. |
| Paper White | `#FFFFFF` | `--color-paper-white` | Page background, primary surface. Serves as a clean, spacious canvas for all content, reflecting an academic or editorial aesthetic. |

## Tokens — Typography

### Inter
- **Substitute:** system-ui
- **Weights:** 400, 500
- **Sizes:** 14px, 16px, 18px
- **Line height:** 1.43, 1.5, 1.56, 1.63
- **Letter spacing:** normal
- **Role:** Primary typeface for all content including body, headings, navigation, and interactive elements. Its legibility across weights and sizes ensures a consistent, serious tone without overt styling. Weight 500 signals importance for headings, while 400 maintains readability for long-form text.

### ui-monospace
- **Substitute:** monospace
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.63
- **Letter spacing:** normal
- **Role:** Used sparingly for unique interactive elements or code-like displays, providing a distinct, technical counterpoint to the primary Inter typeface. Default for Ghost Buttons.

## Tokens — Type Scale

Major Second (1.125) from 18px base.

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 14px | 1.56 | — |
| body-sm | 16px | 1.56 | — |
| body | 18px | 1.56 | — |

## Tokens — Spacing

- **Section gap:** 64-80px
- **Card padding:** 12-24px
- **Element gap:** 2-8px

## Tokens — Radius

- **Default:** 2px
- **subtle:** 2px

## Layout

The page adheres to a centered, max-width content model, with ample surrounding white space, resembling a document or resumé. The sections stack vertically, each introduced by a clear heading. There's a consistent rhythm of vertical spacing between content blocks, giving a sense of calm progression. The footer is minimal, also centered, with text links.

## Imagery

The site is entirely text-dominant, eschewing photography, illustrations, or graphics. There are no visual elements beyond typography and subtle interactive indicators. This creates an atmosphere of pure information delivery, focusing the user's attention solely on the written content.

## Components

### Profile Header

### About Section

### Footer

### Header Title
*Main page title or identity.*

Text 'Logan Liffick' in Inter weight 500, size 18px, color #171717.

### Header Subtitle
*Secondary title or descriptive role.*

Text 'Design Engineer' in Inter weight 400, size 16px, color #525252.

### Section Heading
*Introduces content sections.*

Text in Inter weight 500, size 16px, color #171717. Followed by a 24px vertical space.

### Body Text Paragraph
*Standard informational text.*

Text in Inter weight 400, size 16px, lineHeight 1.63, color #525252. Paragraphs are separated by standard line height.

### Ghost Link Button
*Interactive text links, like footer navigation or inline references.*

Text 'Github' in Inter weight 400, size 16px, lineHeight 1.63, color #525252 with an implicit 2px border radius. On hover, text color and text decoration might change.

### Monospace Link Button
*Interactive text links, often in footer, with a distinct monospace style.*

Text 'Email' in ui-monospace weight 400, size 16px, lineHeight 1.63, color #525252 with an implicit 2px border radius. Background is transparent.

## Guidelines

### Do

- Prioritize Inter weight 500 for all headings to maintain a subtle, yet clear hierarchy.
- Use #171717 for primary text and #525252 for secondary text to establish a muted, monochromatic contrast.
- Employ 1.63 lineHeight for all body text sections to ensure comfortable reading distance.
- Maintain a consistent 2px border radius on all interactive elements like links and buttons.
- Apply 64px `marginBottom` for major section breaks and 40px `paddingTop`/`paddingBottom` for internal section spacing, creating a spacious flow.

### Don't

- Avoid introducing additional typefaces; the design maintains strict reliance on Inter and ui-monospace.
- Do not use highly saturated or vivid colors; the palette is deliberately achromatic with minimal contrast.
- Refrain from complex shadows or gradients; flat design and direct light are preferred.
- Do not deviate from the 2px border radius; sharp corners or excessive rounding are not part of this aesthetic.
- Avoid dense information blocks; use generous vertical spacing (64px `marginBottom`, 40px `paddingTop`/`paddingBottom`) to create visual pauses.

## Agent Prompt Guide

**Quick Color Reference:**
- Text: #171717
- Secondary Text: #525252
- Background: #FFFFFF

**Example Component Prompts:**
- Create a main header: Text 'Logan Liffick' in Inter weight 500, size 18px, color #171717. Below it, 'Design Engineer' in Inter weight 400, size 16px, color #525252.
- Design a section with a heading and two paragraphs: Heading 'About' in Inter weight 500, size 16px, color #171717, followed by a 24px vertical space. Two paragraphs of body text (Inter weight 400, size 16px, lineHeight 1.63, color #525252), separated by the default line height.
- Build a footer containing two ghost link buttons: 'Github' in Inter weight 400, size 16px, lineHeight 1.63, color #525252; 'Email' in ui-monospace weight 400, size 16px, lineHeight 1.63, color #525252. Both should implicitly have a 2px border radius. Elements separated by 12px horizontal padding and 6px vertical padding.