# 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;
}
```
Warm, Crisp Canvas
Art-filled creative canvas
Architectural blueprint on white…

Architectural blueprint on soft…
Warm canvas, playful 3D
Gallery Wall Precision

Architectural Digital Canvas. A…
High-contrast precision blueprint.

Crisp Paper, Bold Ink. Like a…
Architectural blueprint on white…
digital-first canvas
organized content on frosted glass
Sky-bound clarity

High-contrast geometric clarity
Digital Sandbox with Soft…

Crisp paper on a clean desk. A…

Playful blueprint on textured…
Artisanal precision on a calm…

Whimsical tech playground. Muted…
Subtle dynamism on a crisp canvas