Design Research Workflow: From Base Style to Content Sections

A practical guide to using AI-powered design research for extending existing design systems. This document captures a real workflow used to create consistent page designs for a portfolio website.

Overview
The Starting Point: Base Design Spec
The Design Research Process
Phase-by-Phase Breakdown
Research Findings
The Output: Content Sections Spec
Key Takeaways
Artifacts

Overview

The Challenge

We had an existing portfolio website with a strong visual identity ("Kinetic Orange" — a brutalist style with bold typography and high contrast). We needed to design four new content sections:

Projects — Showcase of work with detail pages
Work Experience — Career timeline
Events — Speaking engagements and conferences
Blogs — Writing and articles

The goal: Create designs that feel cohesive with the existing aesthetic while incorporating best practices from award-winning portfolios.

The Solution

Instead of designing from scratch or relying solely on intuition, we used a structured design research workflow powered by AI and web scraping tools. This process:

Started with our existing design spec as the foundation
Researched award-winning portfolios and design trends
Extracted specific patterns and techniques
Synthesized findings into actionable specifications

Tools Used

Tool	Purpose
Tavily MCP	Web search and content extraction
Cursor AI	Orchestration and document generation
Markdown	Documentation format

The Starting Point: Base Design Spec

Before any research, we documented our existing design language. This serves as the source of truth that all new designs must align with.

Artifact: `kinetic-orange.md`

# Kinetic Orange

## Summary

The 'Kinetic Orange' style is a digital-first brutalist aesthetic that uses 
heavy typography and motion to create a sense of urgency and technical 
sophistication. It relies on a three-color system (Orange, Black, White) 
and sharp geometric layouts.

## Style

High-impact brutalist theme. It pairs the heavy weight of 'Archivo Black' 
for display text with the technical precision of 'Space Mono' for metadata 
and labels. The primary color is a vibrant electric orange (#FF4D00). 
Visuals are defined by thick borders (2px+), skewed sections, and continuous 
marquee animations.

### Spec

- **Typography**: Headers in 'Archivo Black', uppercase, tracking -0.04em, 
  line-height 0.85-0.9. Metadata and UI labels in 'Space Mono', tracking -0.02em. 
  Body text in 'Inter'. 
- **Color Palette**: Brand Orange (#FF4D00), Solid Black (#000000), and 
  Pure White (#FFFFFF) for high-contrast accents.
- **Borders**: 2px solid #000000 for section dividers and buttons.
- **Motion**: Use linear marquees for text-heavy sections. Implement a 'spin' 
  animation for circular indicators (12s duration).
- **Interactions**: Hover states should include horizontal translations 
  (translate-x-4) and scale transforms (scale-110).

## Special Notes

MUST: Maintain extremely high contrast.
MUST: Use only uppercase for Archivo Black headers.
MUST: Ensure all borders are sharp (no rounded corners except for pill-shaped 
      buttons and navigation).
DO NOT: Use gradients, drop shadows, or soft pastels.
DO NOT: Use standard sans-serifs for headlines.

Why This Matters

Having this documented meant we could:

Give the AI clear constraints to work within
Ensure new designs don't drift from the established aesthetic
Provide concrete values (hex codes, font names, sizes) for consistency

The Design Research Process

The Workflow

┌─────────────────────────────────────────────────────────────────────┐
│                     DESIGN RESEARCH WORKFLOW                        │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   ┌─────────────┐    ┌─────────────┐    ┌─────────────┐            │
│   │   DEFINE    │───▶│   SEARCH    │───▶│   EXTRACT   │            │
│   │  Keywords   │    │  (Tavily)   │    │  (Tavily)   │            │
│   └─────────────┘    └─────────────┘    └─────────────┘            │
│         │                                      │                    │
│         │                                      ▼                    │
│         │                              ┌─────────────┐             │
│         │                              │   ANALYZE   │             │
│         │                              │  Patterns   │             │
│         │                              └─────────────┘             │
│         │                                      │                    │
│         ▼                                      ▼                    │
│   ┌─────────────┐                      ┌─────────────┐             │
│   │    BASE     │─────────────────────▶│  DOCUMENT   │             │
│   │ Design Spec │    (constraints)     │   Output    │             │
│   └─────────────┘                      └─────────────┘             │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Phase Summary

Phase	Action	Output
1. Define	Choose keywords for each content type	Search queries
2. Search	Find inspiration sites via `tavily_search`	URLs + images
3. Extract	Pull design details via `tavily_extract`	Raw content
4. Analyze	Identify patterns across sources	Pattern table
5. Document	Create spec aligned with base design	Final artifact

Phase-by-Phase Breakdown

Phase 1: Define Keywords

Before searching, we defined specific keywords for each content section. The key is combining aesthetic terms with industry/element terms.

Keyword Matrix:

Section	Aesthetic	Industry	Element	Style
Projects	brutalist, bold	portfolio, developer	project showcase, case study	dark mode, grid
Experience	minimal, timeline	career, portfolio	work history, resume	clean, sticky
Events	festival, bold	speaker, conference	schedule, calendar	energetic
Blogs	editorial, magazine	developer, writing	article, post	typography-focused

Query Templates Used:

"Awwwards [aesthetic] [industry] 2025 2026"
"best [industry] [element] design [style]"
"creative [element] design [aesthetic]"

Phase 2: Search for Inspiration

We ran multiple parallel searches to cast a wide net:

Search 1: Brutalist Portfolio Projects

tavily_search:
  query: "Awwwards brutalist portfolio project showcase dark mode 2025 2026"
  max_results: 10
  search_depth: "advanced"
  include_images: true

Search 2: Developer Portfolio Case Studies

tavily_search:
  query: "best developer portfolio case study page design bold typography 2025"
  max_results: 10
  search_depth: "advanced"
  include_images: true

Search 3: Timeline/Experience Design

tavily_search:
  query: "creative timeline design work experience section portfolio website"
  max_results: 10
  search_depth: "advanced"
  include_images: true

Search 4: Events/Speaking Pages

tavily_search:
  query: "speaker events page design conference schedule brutalist minimal"
  max_results: 10
  search_depth: "advanced"
  include_images: true

Search 5: Editorial Blog Design

tavily_search:
  query: "editorial blog design brutalist bold typography magazine layout 2025"
  max_results: 10
  search_depth: "advanced"
  include_images: true

Phase 3: Extract Design Details

From the search results, we identified high-quality sources and extracted detailed information:

Extraction 1: Brutalist Portfolio Sites

tavily_extract:
  urls: [
    "https://brutalistwebsites.com",
    "https://www.awwwards.com/websites/portfolio/",
    "https://muz.li/blog/top-100-most-creative-and-unique-portfolio-websites-of-2025/"
  ]
  extract_depth: "advanced"
  include_images: true
  query: "brutalist portfolio project showcase design style typography colors layout"

Extraction 2: Specific Award-Winning Portfolios

tavily_extract:
  urls: [
    "https://www.obys.agency",
    "https://adhamdannaway.com",
    "https://brittanychiang.com"
  ]
  extract_depth: "advanced"
  include_images: true
  query: "portfolio projects section case study layout typography colors design"

Phase 4: Analyze Patterns

From the extracted content, we identified recurring patterns:

Pattern	Description	Found In
Index Numbers	Leading numbers (01, 02, 03) create visual hierarchy	Obys, Brittany Chiang, multiple
Sticky Timeline	Date column stays visible while content scrolls	Developer portfolios
Tech Tags as Pills	Monospace pill-shaped tags for skills	Industry standard
Hover Reveal	Content translates/reveals on hover	Obys, brutalist galleries
Grayscale to Color	Images start grayscale, gain color on hover	Award-winning portfolios
Magazine Grid	Featured + stacked secondary items	Editorial design
Horizontal Scroll	Carousels for temporal content	Event websites
Dark Mode Default	Black backgrounds with high-contrast accents	2025 design trend

Phase 5: Document Output

Finally, we synthesized everything into a comprehensive spec that:

Maintains alignment with the base "Kinetic Orange" design
Incorporates proven patterns from research
Provides implementable CSS specifications
Includes ASCII wireframes for layout clarity

Research Findings

Sources That Influenced the Design

1. Obys Agency (obys.agency)

16 Awwwards Winner

Key learnings:

Large project titles with hover video reveals
Numbered sections (01, 02, 03) in accent color
Content translates on hover (+16px)
Minimal text, maximum visual impact

2. Brittany Chiang (brittanychiang.com)

100k+ GitHub Stars Portfolio

Key learnings:

Sticky date column in experience section
Tech tags as small pills
Clean grid for projects with thumbnails
Writing section integrated naturally

3. Adham Dannaway (adhamdannaway.com)

Designer/Developer Split

Key learnings:

Strong personal brand in hero
Featured work with category labels
Simple navigation structure

4. Brutalist Websites Collection

Curated Gallery

Key learnings:

Raw, unpolished aesthetic works
Typography as the hero
Deliberate "chaos" within structure

5. Behance Design Trends 2025

Industry Forecast

Key learnings:

Dark mode with neon accents trending
Variable/dynamic typography
Micro-interactions expected

Pattern Frequency Analysis

                    Pattern Frequency in Sources
    ┌────────────────────────────────────────────────────┐
    │ Index Numbers        ████████████████████  90%     │
    │ Dark Mode            ████████████████████  85%     │
    │ Hover Animations     ███████████████████   80%     │
    │ Tech/Skill Tags      ██████████████████    75%     │
    │ Sticky Elements      ███████████████       65%     │
    │ Magazine Layout      ██████████████        60%     │
    │ Horizontal Scroll    ██████████            45%     │
    │ Grayscale Images     ████████              35%     │
    └────────────────────────────────────────────────────┘

The Output: Content Sections Spec

The final deliverable is a comprehensive design specification document covering all four content sections.

Document Structure

docs/design/content-sections.md
├── Research Summary
│   ├── Sources Analyzed
│   └── Key Patterns Discovered
├── Shared Design System
│   ├── Typography Hierarchy
│   ├── Color System
│   └── Interaction Patterns
├── 1. PROJECTS
│   ├── Homepage Section (wireframe + spec)
│   ├── Projects Inner Page (/projects)
│   └── Project Detail Page (/projects/[slug])
├── 2. WORK EXPERIENCE
│   ├── Homepage Section (existing)
│   └── Experience Inner Page (/experience)
├── 3. EVENTS
│   ├── Homepage Section (wireframe + spec)
│   └── Events Inner Page (/events)
├── 4. BLOGS
│   ├── Homepage Section (wireframe + spec)
│   ├── Blog Index Page (/blog)
│   └── Blog Post Page (/blog/[slug])
├── Component Summary
├── Implementation Notes
└── Design Rules (MUST/DO NOT)

Sample Output: Projects Section Spec

/* Project Card - From content-sections.md */

.project-card {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 32px 0;
  transition: background 300ms;
}

.project-card:hover {
  background: rgba(255,255,255,0.05);
}

/* Image */
.project-image {
  aspect-ratio: 16/10;
  filter: grayscale(100%);
  transition: filter 500ms, transform 500ms;
}

.project-card:hover .project-image {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Index Number */
.project-index {
  font-family: 'Space Mono';
  color: #FF4D00;
  font-size: 14px;
}

/* Title */
.project-title {
  font-family: 'Archivo Black';
  font-size: clamp(24px, 5vw, 48px);
  text-transform: uppercase;
  color: white;
  transition: transform 300ms;
}

.project-card:hover .project-title {
  transform: translateX(16px);
}

/* Tags */
.project-tag {
  padding: 4px 12px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 9999px;
  font-family: 'Space Mono';
  font-size: 10px;
  text-transform: uppercase;
}

Sample Output: Wireframe

┌──────────────────────────────────────────────────────────────┐
│ [SELECTED PROJECTS]                              [VIEW ALL →]│
├──────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────┐ ┌─────────────────────────────┐ │
│ │                         │ │                             │ │
│ │    PROJECT IMAGE        │ │       PROJECT IMAGE         │ │
│ │    (grayscale → color)  │ │       (grayscale → color)   │ │
│ │                         │ │                             │ │
│ ├─────────────────────────┤ ├─────────────────────────────┤ │
│ │ 01 PROJECT TITLE        │ │ 02 PROJECT TITLE            │ │
│ │ Brief description...    │ │ Brief description...        │ │
│ │ [React] [TypeScript]    │ │ [Next.js] [Vercel]          │ │
│ └─────────────────────────┘ └─────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘

Key Takeaways

1. Start with Documentation

Before any research, document your existing design system:

Colors (with hex values)
Typography (font names, sizes, weights)
Spacing patterns
Interaction behaviors
Hard rules (MUST/DO NOT)

This gives the research process clear boundaries.

2. Search with Intent

Don't just search "good portfolios." Be specific:

Combine aesthetic terms with industry terms
Include the current year for fresh results
Use award sites (Awwwards, FWA) as quality filters
Run multiple parallel searches to cover angles

3. Extract, Don't Just Browse

Use extraction tools to pull actual content from sites:

Gets you specific details (colors, fonts, layouts)
Creates a record you can reference later
Enables pattern analysis across sources

4. Look for Patterns, Not Copies

The goal isn't to copy any single site. It's to identify:

What techniques appear repeatedly?
Why do certain patterns work?
How can patterns adapt to your constraints?

5. Synthesize with Constraints

When creating the final spec:

Filter everything through your base design rules
Adapt patterns to your color system and typography
Document specific values, not vague descriptions
Include wireframes for spatial clarity

6. Make it Implementable

A design spec should include:

Actual CSS (or CSS-ready values)
Responsive breakpoints
Accessibility considerations
Clear component boundaries

Artifacts

File 1: Base Design Spec

Path: docs/design/kinetic-orange.md Purpose: Defines the existing visual identity Created: Before research

File 2: Content Sections Spec

Path: docs/design/content-sections.md Purpose: Complete design spec for new sections Created: After research synthesis

File 3: This Document

Path: docs/design/design-research-workflow.md Purpose: Learning documentation for team Created: To capture the process

Appendix: Tavily MCP Commands Reference

tavily_search

Discovers websites matching your criteria.

tavily_search:
  query: "your search query"
  max_results: 10           # Number of results (default: 10)
  search_depth: "advanced"  # "basic" | "advanced"
  include_images: true      # Include image URLs
  time_range: "year"        # "day" | "week" | "month" | "year"

tavily_extract

Pulls content from specific URLs.

tavily_extract:
  urls: ["https://example.com", "https://another.com"]
  extract_depth: "advanced"  # "basic" | "advanced"
  include_images: true       # Include images from pages
  query: "focus keywords"    # Helps rank relevant content

tavily_crawl

Explores site structure (useful for larger research).

tavily_crawl:
  url: "https://example.com"
  max_depth: 2              # How deep to crawl
  limit: 50                 # Max pages to process

Conclusion

This workflow transforms design research from a subjective, time-consuming process into a structured, evidence-based practice. By combining:

Documented constraints (base design spec)
Systematic research (Tavily searches + extractions)
Pattern analysis (identifying what works)
Synthesized output (actionable specifications)

...we create designs that are both creatively informed and practically implementable.

The key insight: Research doesn't replace design intuition — it informs it. The patterns we discovered didn't dictate our designs; they provided a vocabulary of proven techniques we could adapt to our unique aesthetic.

Document created: February 2026 Workflow tested on: Portfolio website content sections Tools: Cursor AI, Tavily MCP, Markdown

Written by

Sean Stuart Urgel

Senior Software Engineer @ Casper Studios

Table of Contents​

Overview​

The Challenge​

The Solution​

Tools Used​

The Starting Point: Base Design Spec​

Artifact: kinetic-orange.md​

Why This Matters​

The Design Research Process​

The Workflow​

Phase Summary​

Phase-by-Phase Breakdown​

Phase 1: Define Keywords​

Phase 2: Search for Inspiration​

Phase 3: Extract Design Details​

Phase 4: Analyze Patterns​

Phase 5: Document Output​

Research Findings​

Sources That Influenced the Design​

1. Obys Agency (obys.agency)​

2. Brittany Chiang (brittanychiang.com)​

3. Adham Dannaway (adhamdannaway.com)​

4. Brutalist Websites Collection​

5. Behance Design Trends 2025​

Pattern Frequency Analysis​

The Output: Content Sections Spec​

Document Structure​

Sample Output: Projects Section Spec​

Sample Output: Wireframe​

Key Takeaways​

1. Start with Documentation​

2. Search with Intent​

3. Extract, Don't Just Browse​

4. Look for Patterns, Not Copies​

5. Synthesize with Constraints​

6. Make it Implementable​

Artifacts​

File 1: Base Design Spec​

File 2: Content Sections Spec​

File 3: This Document​

Appendix: Tavily MCP Commands Reference​

tavily_search​

tavily_extract​

tavily_crawl​

Conclusion​

Written by

Table of Contents

Overview

The Challenge

The Solution

Tools Used

The Starting Point: Base Design Spec

Artifact: `kinetic-orange.md`

Why This Matters

The Design Research Process

The Workflow

Phase Summary

Phase-by-Phase Breakdown

Phase 1: Define Keywords

Phase 2: Search for Inspiration

Phase 3: Extract Design Details

Phase 4: Analyze Patterns

Phase 5: Document Output

Research Findings

Sources That Influenced the Design

1. Obys Agency (obys.agency)

2. Brittany Chiang (brittanychiang.com)

3. Adham Dannaway (adhamdannaway.com)

4. Brutalist Websites Collection

5. Behance Design Trends 2025

Pattern Frequency Analysis

The Output: Content Sections Spec

Document Structure

Sample Output: Projects Section Spec

Sample Output: Wireframe

Key Takeaways

1. Start with Documentation

2. Search with Intent

3. Extract, Don't Just Browse

4. Look for Patterns, Not Copies

5. Synthesize with Constraints

6. Make it Implementable

Artifacts

File 1: Base Design Spec

File 2: Content Sections Spec

File 3: This Document

Appendix: Tavily MCP Commands Reference

tavily_search

tavily_extract

tavily_crawl

Conclusion