Nev Flynn

# Nev Flynn — Style Reference
> Softly rounded digital canvas

**Theme:** light

Nev Flynn's design aesthetic is that of a playful digital canvas, characterized by soft, rounded cards floating on a clean, near-white background. Typography is primarily functional and understated, reserving boldness for key headings. Color is introduced sparingly, often as subtle accent panels or within images, creating a gentle visual energy rather than overt branding. The overall impression is approachable and organized, like a well-structured personal portfolio.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas Bloom | `#f7f2f2` | `--color-canvas-bloom` | Page backgrounds, subtle card shadows |
| Surface White | `#ffffff` | `--color-surface-white` | Card backgrounds, general surface elements |
| Ink Black | `#000000` | `--color-ink-black` | Primary text, strong borders, icons |
| Storm Gray | `#0d1117` | `--color-storm-gray` | Secondary text, input borders, nav links |
| Muted Sage | `#8a949e` | `--color-muted-sage` | Muted helper text, tertiary body copy |
| Sky Card | `#98d0ff` | `--color-sky-card` | Card background for visual distinction |

## Tokens — Typography

### -apple-system — -apple-system — detected in extracted data but not described by AI · `--font-apple-system`
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.2
- **Role:** -apple-system — detected in extracted data but not described by AI

### Moranga Bold — 'Moranga Bold' carries signature headings, using a medium weight to emphasize content rather than shout. The letter spacing tightens as font size increases, enhancing its presence without feeling bulky. · `--font-moranga-bold`
- **Substitute:** Georgia
- **Weights:** 400
- **Sizes:** 24px, 40px
- **Line height:** 1.00, 1.33
- **Letter spacing:** -0.48px at 40px, -0.24px at 24px
- **Role:** 'Moranga Bold' carries signature headings, using a medium weight to emphasize content rather than shout. The letter spacing tightens as font size increases, enhancing its presence without feeling bulky.

### Silka Medium — Used for navigation and some body content, providing a clear, readable geometric sans-serif that balances modernism with legibility. Its normal weight feels light even for body copy. · `--font-silka-medium`
- **Substitute:** Inter
- **Weights:** 400
- **Sizes:** 14px
- **Line height:** 1.20, 1.71
- **Letter spacing:** 0.25px
- **Role:** Used for navigation and some body content, providing a clear, readable geometric sans-serif that balances modernism with legibility. Its normal weight feels light even for body copy.

### Silka Regular — Predominant for body text and input fields, offering a highly readable, neutral baseline. The subtle letter spacing variation ensures optimal legibility across smaller text sizes. · `--font-silka-regular`
- **Substitute:** Inter
- **Weights:** 400
- **Sizes:** 15px, 16px
- **Line height:** 1.20, 1.47, 1.73
- **Letter spacing:** 0.24px at 15px, 0.53px at 16px
- **Role:** Predominant for body text and input fields, offering a highly readable, neutral baseline. The subtle letter spacing variation ensures optimal legibility across smaller text sizes.

### Arial — Arial — detected in extracted data but not described by AI · `--font-arial`
- **Weights:** 400
- **Sizes:** 13px
- **Line height:** 1.2
- **Role:** Arial — detected in extracted data but not described by AI

### Helvetica Neue — Helvetica Neue — detected in extracted data but not described by AI · `--font-helvetica-neue`
- **Weights:** 400
- **Sizes:** 12px
- **Line height:** 1.67
- **Role:** Helvetica Neue — detected in extracted data but not described by AI

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 44 | 44px | `--spacing-44` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 32px |
| buttons | 18px |
| navItems | 18px |
| roundElements | 50px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| subtle | `rgb(240, 242, 248) 0px 0px 0px 2px` | `--shadow-subtle` |

### Layout

- **Section gap:** 40px
- **Card padding:** 36-44px
- **Element gap:** 4px

## Components

### Pill Navigation Item
**Role:** Navigation links (e.g., 'All', 'About')

Ghost button style with 18px radius, no background, and 0px vertical / 12px horizontal padding. Text color is Storm Gray (#0d1117) unless active, then text color is Ink Black (#000000).

### Outlined Switch-like Button
**Role:** Toggle buttons (e.g., 'Toggle Lockdown')

Bordered button with 18px radius and a 2px Canvas Bloom (#f7f2f2) boxShadow inset, making it appear slightly recessed. Text is Ink Black (#000000) with Arial font. Padding is 0px vertical and 12px horizontal.

### Standard Content Card
**Role:** General information containers

Surface White (#ffffff) background with 32px border radius. Features a 2px inset border that appears like a subtle shadow due to Canvas Bloom (#f7f2f2) box-shadow. Padding can vary from 36px/42px/44px.

### Accent Content Card (Sky Card)
**Role:** Visually distinct information containers

Sky Card (#98d0ff) background with 32px border radius. Features a 2px inset border, no visible shadow. Has no internal padding, suggesting full-bleed content or image display.

### Underlined Input Field
**Role:** Form inputs

Transparent background with a 1px Storm Gray (#0d1117) bottom border. No border radius. Text uses Silka Regular, with 12px vertical padding on both top and bottom.

### Nev Logo Mark
**Role:** Brand identifier with gradient

Text 'nev' in Moranga Bold font, rendered with a horizontal gradient from #c679c4 to #ffb005.

## Do's and Don'ts

### Do
- Apply 32px border-radius to all card-like containers, strictly adhering to the soft, rounded aesthetic.
- Use Canvas Bloom (#f7f2f2) as the primary page background color to establish the system's light theme.
- Utilize Ink Black (#000000) for primary text and significant borders, ensuring strong legibility and definition.
- Employ Storm Gray (#0d1117) for secondary text and subtle navigational elements to create visual hierarchy.
- Implement the 2px inset Canvas Bloom (#f7f2f2) box-shadow for cards that require a soft, elevated look.
- Maintain a clear visual hierarchy by limiting saturated colors to accent cards or embedded imagery, keeping most UI achromatic.
- Ensure headings use Moranga Bold weight 400 with tight letter-spacing to convey authority through restraint.

### Don't
- Do not introduce sharp corners or small radii; the system relies on generous rounding (18px, 32px, 50px).
- Avoid using strong, saturated colors for primary UI elements like buttons or backgrounds, as they would clash with the understated palette.
- Do not deviate from the specified font families; '-apple-system' or 'Arial' are fallback systems, but 'Moranga Bold' and 'Silka' are brand-defining.
- Never use hard shadows or aggressive elevation effects; the design's lightness comes from subtle inset shadows and flat surfaces.
- Do not introduce complex gradients for functional UI elements; gradients are reserved for brand elements like the logo.
- Avoid overly dense layouts or small element gaps, as the design prioritizes comfortable spacing and clear separation.
- Do not use dark backgrounds for main content areas; the theme is predominantly light and airy.

## Imagery

Imagery primarily consists of contained, full-bleed product screenshots or abstract graphics within cards, often featuring pastel color palettes. Some hero images feature 3D-like emoji characters or flat illustrations. Photography is minimal, appearing within product context. Icons are typically filled and monochromatic (Ink Black or white), with a consistent stroke weight where outlined. The density is moderate, with images serving both decorative and explanatory roles within the card grid.

## Agent Prompt Guide

**Quick Color Reference**
text: #000000
background: #f7f2f2
border: #000000
accent: #98d0ff
primary action: no distinct CTA color

**3-5 Example Component Prompts**
1. Create a Standard Content Card: background Surface White (#ffffff), 32px border radius, with 36px vertical and 42px horizontal padding. Include an Ink Black (#000000) heading using Moranga Bold at 24px and Storm Gray (#0d1117) body text using Silka Regular at 15px. Apply the 2px Canvas Bloom (#f7f2f2) inset box-shadow.
2. Design a Pill Navigation Item: Text 'Projects' in Silka Medium, weight 400. Text color Storm Gray (#0d1117). Border radius 18px. Padding 0px vertical, 12px horizontal. No background color.
3. Implement an Accent Content Card (Sky Card): background Sky Card (#98d0ff), 32px border-radius, no padding. This card will contain a full-bleed image.
4. Create an Outlined Switch-like Button: Text 'Toggle Lockdown' in Arial, weight 400. Text color Ink Black (#000000). Border radius 18px. Padding 0px vertical, 12px horizontal. Apply a boxShadow of rgb(240, 242, 248) 0px 0px 0px 2px inset.

## Similar Brands

- **Figma** — Use of soft, rounded UI elements on a light background, emphasizing clean visual hierarchy.
- **Linear** — Minimalist aesthetic focused on content within card-like structures and understated typography.
- **Read.cv** — Personal portfolio site with a card-based layout and a focus on clean typography and spacious presentation.
- **Notion** — White interface with soft borders and minimal chromatic accents, relying on clear surface separation.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-bloom: #f7f2f2;
  --color-surface-white: #ffffff;
  --color-ink-black: #000000;
  --color-storm-gray: #0d1117;
  --color-muted-sage: #8a949e;
  --color-sky-card: #98d0ff;

  /* Typography — Font Families */
  --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-moranga-bold: 'Moranga Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-silka-medium: 'Silka Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-silka-regular: 'Silka Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-xs: 12px;
  --leading-xs: 1.67;
  --text-sm: 13px;
  --leading-sm: 1.2;
  --text-sm-2: 14px;
  --leading-sm-2: 1.2;
  --text-base: 15px;
  --leading-base: 1.73;
  --text-base-2: 16px;
  --leading-base-2: 1.2;
  --text-2xl: 24px;
  --leading-2xl: 1.33;
  --text-4xl: 40px;
  --leading-4xl: 0.65;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-44: 44px;

  /* Layout */
  --section-gap: 40px;
  --card-padding: 36-44px;
  --element-gap: 4px;

  /* Border Radius */
  --radius-sm: 1.5px;
  --radius-2xl: 18px;
  --radius-2xl-2: 23px;
  --radius-3xl: 32px;
  --radius-3xl-2: 40px;
  --radius-full: 50px;

  /* Named Radii */
  --radius-cards: 32px;
  --radius-buttons: 18px;
  --radius-navitems: 18px;
  --radius-roundelements: 50px;

  /* Shadows */
  --shadow-subtle: rgb(240, 242, 248) 0px 0px 0px 2px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-bloom: #f7f2f2;
  --color-surface-white: #ffffff;
  --color-ink-black: #000000;
  --color-storm-gray: #0d1117;
  --color-muted-sage: #8a949e;
  --color-sky-card: #98d0ff;

  /* Typography */
  --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-moranga-bold: 'Moranga Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-silka-medium: 'Silka Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-silka-regular: 'Silka Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-xs: 12px;
  --leading-xs: 1.67;
  --text-sm: 13px;
  --leading-sm: 1.2;
  --text-sm-2: 14px;
  --leading-sm-2: 1.2;
  --text-base: 15px;
  --leading-base: 1.73;
  --text-base-2: 16px;
  --leading-base-2: 1.2;
  --text-2xl: 24px;
  --leading-2xl: 1.33;
  --text-4xl: 40px;
  --leading-4xl: 0.65;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-44: 44px;

  /* Border Radius */
  --radius-sm: 1.5px;
  --radius-2xl: 18px;
  --radius-2xl-2: 23px;
  --radius-3xl: 32px;
  --radius-3xl-2: 40px;
  --radius-full: 50px;

  /* Shadows */
  --shadow-subtle: rgb(240, 242, 248) 0px 0px 0px 2px;
}
```