Content Sections Design Spec

Design specifications for Projects, Work Experience, Events, and Blogs sections — extending the Kinetic Orange brutalist aesthetic. Based on design research from Awwwards, Brutalist Websites, and award-winning portfolios.

Research Summary

Sources Analyzed

Brutalist Websites collection (brutalistwebsites.com)
Awwwards portfolio category winners
Obys Agency — Award-winning Ukrainian design studio (16 Awwwards)
Brittany Chiang — Developer portfolio with 100k+ GitHub stars
Adham Dannaway — Product designer with iconic designer/coder split
Muzli's Top 100 Portfolios 2025 — Creative direction trends

Key Patterns Discovered

Pattern	Description	Source
Index Numbers	Leading orange numbers (01, 02, 03) create visual hierarchy	Obys, Brittany Chiang
Sticky Timeline	Date/year column stays visible while content scrolls	Multiple developer portfolios
Tech Tags as Pills	Monospace pill-shaped tags for skills/technologies	Brittany Chiang, industry standard
Hover Reveal	Content translates/reveals on hover, arrows animate	Obys, brutalist galleries
Dark Mode Default	Black backgrounds with high-contrast accents (2025 trend)	Behance Design Trends 2025
Magazine Grid	Featured + stacked secondary items for writing	Editorial design patterns
Horizontal Scroll	Events/timeline carousels for temporal content	Event websites (Us by Night)

Shared Design System

Typography (Matching Kinetic Orange)

Element	Font	Size	Weight	Case	Tracking
Section Header	Space Mono	12px	Bold	UPPERCASE	widest
Card Title	Archivo Black	5-7vw	Black	UPPERCASE	-0.04em
Card Subtitle	Space Mono	14px	Regular	UPPERCASE	normal
Body Text	Inter	16-18px	Regular	Sentence	normal
Metadata	Space Mono	12px	Regular	UPPERCASE	-0.02em
Tag/Pill	Space Mono	10px	Regular	UPPERCASE	normal
Code Block	Space Mono	14px	Regular	—	-0.02em

Color System

Context	Color	Hex	Usage
Primary Background	Black	#000000	Projects, Experience sections
Inverted Background	Kinetic Orange	#FF4D00	Events section (contrast)
Light Background	White	#FFFFFF	Blogs, CTA sections
Accent	Kinetic Orange	#FF4D00	Index numbers, links, code syntax
Text on Dark	White	#FFFFFF	Primary text
Text on Light	Black	#000000	Primary text
Muted Text	White/60% or Black/60%	—	Subtitles, metadata
Borders	White/20% or Black	—	Card separators
Hover State	White/5%	—	Card backgrounds

Interaction Patterns

Based on research from award-winning portfolios:

Card Hover: Background shifts to white/5%, content translates +16px right (Obys pattern)
Arrow Reveal: Starts opacity-0, rotated -45deg → opacity-100, rotate-0 on hover
Image Hover: scale(1) → scale(1.05), transition 500ms ease-out
Button Hover: scale(1) → scale(1.1), maintain color
Link Hover: Color shifts to #FF4D00, optional underline
Focus States: ring-2 ring-kinetic-orange ring-offset-2 ring-offset-black

1. PROJECTS

Inspiration

Obys Agency: Large project titles with hover video reveals
Brittany Chiang: Clean grid with thumbnail images, tech tags
Adham Dannaway: Featured work with category labels

Homepage Section

A grid showcase of featured projects with large imagery and bold titles.

┌──────────────────────────────────────────────────────────────┐
│ [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]          │ │
│ └─────────────────────────┘ └─────────────────────────────┘ │
│ ┌───────────────────────────────────────────────────────────┐│
│ │                                                           ││
│ │  03  FEATURED PROJECT (FULL WIDTH)                   →    ││
│ │      Longer description with impact metrics               ││
│ │      [Tag] [Tag] [Tag]                                    ││
│ │                                                           ││
│ └───────────────────────────────────────────────────────────┘│
└──────────────────────────────────────────────────────────────┘

Spec

Background: #000000
Section Header: "SELECTED PROJECTS" — Space Mono, #FF4D00, tracking-widest, 12px
View All Link: Space Mono, white, hover → #FF4D00 with arrow animation
Grid: 2 columns desktop (gap-8), 1 column mobile

Project Card:

/* Container */
border-bottom: 1px solid rgba(255,255,255,0.1);
padding: 32px 0;
transition: background 300ms;

/* Hover State */
&:hover {
  background: rgba(255,255,255,0.05);
}

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

&:hover img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Index */
font-family: 'Space Mono';
color: #FF4D00;
font-size: 14px;

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

&:hover .title {
  transform: translateX(16px);
}

/* Tags */
display: flex;
gap: 8px;
flex-wrap: wrap;

.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;
}

Projects Inner Page (`/projects`)

┌──────────────────────────────────────────────────────────────┐
│                         PROJECTS                             │
│           Building products that ship.                       │
├──────────────────────────────────────────────────────────────┤
│ [ALL] [WEB] [MOBILE] [AI] [OPEN SOURCE]                      │
├──────────────────────────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐              │
│ │   IMAGE     │ │   IMAGE     │ │   IMAGE     │              │
│ ├─────────────┤ ├─────────────┤ ├─────────────┤              │
│ │ 01 TITLE    │ │ 02 TITLE    │ │ 03 TITLE    │              │
│ │ [Tags]      │ │ [Tags]      │ │ [Tags]      │              │
│ └─────────────┘ └─────────────┘ └─────────────┘              │
└──────────────────────────────────────────────────────────────┘

Spec

Hero: Archivo Black, 12vw, white, centered
Subhead: Inter, 18px, white/60%, centered, max-w-md
Filter Bar:
- Horizontal scroll on mobile
- Pills: bg-transparent, border-white/20, hover → bg-white text-black
- Active: bg-white text-black
Grid: 3 columns desktop, 2 tablet, 1 mobile, gap-8

Project Detail Page (`/projects/[slug]`)

Based on Brittany Chiang's clean project pages:

┌──────────────────────────────────────────────────────────────┐
│ ← BACK TO PROJECTS                        [GITHUB] [LIVE ↗]  │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│                    PROJECT TITLE                             │
│                 Brief one-line description                   │
│                                                              │
│ [React] [TypeScript] [Cloudflare] [PostgreSQL]    Year: 2024 │
├──────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │                                                          │ │
│ │                   HERO IMAGE/VIDEO                       │ │
│ │                   (full-bleed, 16:9)                     │ │
│ │                                                          │ │
│ └──────────────────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  [Project description in Inter, 18px, max-w-3xl,             │
│   line-height 1.8. Tell the story of why this project        │
│   exists, problems it solves, and your role.]                │
│                                                              │
├──────────────────────────────────────────────────────────────┤
│  KEY FEATURES                                                │
│  ┌────────────────┐ ┌────────────────┐ ┌────────────────┐   │
│  │ 01             │ │ 02             │ │ 03             │   │
│  │ FEATURE NAME   │ │ FEATURE NAME   │ │ FEATURE NAME   │   │
│  │ Description    │ │ Description    │ │ Description    │   │
│  └────────────────┘ └────────────────┘ └────────────────┘   │
├──────────────────────────────────────────────────────────────┤
│  [Screenshot gallery - masonry or 2-column grid]             │
├──────────────────────────────────────────────────────────────┤
│  ← PREV PROJECT                           NEXT PROJECT →     │
└──────────────────────────────────────────────────────────────┘

2. WORK EXPERIENCE

Inspiration

Brittany Chiang: Sticky dates, clean timeline, tech tags, expandable details
Obys: Large company names, service categories
Award portfolios: Year markers as anchors

Homepage Section

Already implemented as Experience component — vertical list with index numbers.

Experience Inner Page (`/experience`)

Timeline-style with sticky year markers (based on Brittany Chiang pattern):

┌──────────────────────────────────────────────────────────────┐
│                        EXPERIENCE                            │
│             The journey so far.                              │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌─────────┬────────────────────────────────────────────────┐│
│  │ 2024 —  │                                                ││
│  │ Present │  01  CASPER STUDIOS                            ││
│  │         │      Lead Software Engineer                    ││
│  │ (sticky)│                                                ││
│  │         │      [React] [Node.js] [AWS] [Architecture]    ││
│  │         │                                                ││
│  │         │      • Led architecture redesign reducing      ││
│  │         │        load times by 40%                       ││
│  │         │      • Built real-time collaboration features  ││
│  │         │      • Mentored team of 5 engineers            ││
│  │         │                                                ││
│  ├─────────┼────────────────────────────────────────────────┤│
│  │ 2023    │                                                ││
│  │         │  02  DUB                                       ││
│  │ (sticky)│      Senior Software Engineer                  ││
│  │         │      ...                                       ││
│  └─────────┴────────────────────────────────────────────────┘│
└──────────────────────────────────────────────────────────────┘

Spec

Background: #000000
Hero: Archivo Black, 12vw, white

Timeline Layout:

.timeline {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0;
}

.year-column {
  position: sticky;
  top: 100px;
  height: fit-content;
  font-family: 'Space Mono';
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  padding-right: 32px;
  border-right: 2px solid #FF4D00;
}

.content-column {
  padding-left: 32px;
}

.experience-card {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 48px 0;
}

.experience-card:hover {
  background: rgba(255,255,255,0.02);
}

/* Index */
.index {
  font-family: 'Space Mono';
  color: #FF4D00;
  font-size: 18px;
  margin-bottom: 8px;
}

/* Company */
.company {
  font-family: 'Archivo Black';
  font-size: clamp(32px, 6vw, 64px);
  text-transform: uppercase;
  color: white;
  line-height: 0.9;
}

/* Role */
.role {
  font-family: 'Space Mono';
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  margin-top: 8px;
}

/* Achievements */
.achievements {
  font-family: 'Inter';
  font-size: 16px;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
  margin-top: 24px;
}

.achievements li {
  padding-left: 16px;
  position: relative;
}

.achievements li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #FF4D00;
}

3. EVENTS

Inspiration

Us by Night: Festival aesthetic, bold typography, divided sections
Théâtre St-Gervais: Calendar integration, show dates
Indiecon: Split-screen navigation, brutalist hover effects

Homepage Section

Horizontal scroll carousel (inverted color scheme for variety):

┌──────────────────────────────────────────────────────────────┐
│ [EVENTS & TALKS]                                 [VIEW ALL →]│
├──────────────────────────────────────────────────────────────┤
│ ←─────────────────────────────────────────────────────────→  │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────┐ │
│ │ ┌─────────┐ │ │ ┌─────────┐ │ │ ┌─────────┐ │ │         │ │
│ │ │  MAR    │ │ │ │  APR    │ │ │ │  MAY    │ │ │         │ │
│ │ │  15     │ │ │ │  02     │ │ │ │  20     │ │ │         │ │
│ │ └─────────┘ │ │ └─────────┘ │ │ └─────────┘ │ │         │ │
│ │ EVENT NAME  │ │ EVENT NAME  │ │ EVENT NAME  │ │         │ │
│ │ Location    │ │ Location    │ │ Location    │ │         │ │
│ │ [UPCOMING]  │ │ [PAST]      │ │ [PAST]      │ │         │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────┘ │
└──────────────────────────────────────────────────────────────┘

Spec

Background: #FF4D00 (inverted for visual contrast)
Section Header: "EVENTS & TALKS" — Space Mono, #000000, tracking-widest

Scroll Container:

.events-scroll {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 24px 0;
  
  /* Hide scrollbar */
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}

Event Card:

.event-card {
  flex-shrink: 0;
  width: 320px;
  border: 2px solid #000000;
  background: transparent;
  scroll-snap-align: start;
  transition: background 300ms;
}

.event-card:hover {
  background: rgba(0,0,0,0.1);
}

/* Date Block */
.date-block {
  width: 80px;
  height: 80px;
  background: #000000;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono';
}

.date-block .month {
  font-size: 12px;
  text-transform: uppercase;
}

.date-block .day {
  font-size: 32px;
  font-weight: bold;
}

/* Title */
.event-title {
  font-family: 'Archivo Black';
  font-size: 24px;
  text-transform: uppercase;
  color: #000000;
}

/* Location */
.event-location {
  font-family: 'Space Mono';
  font-size: 12px;
  color: rgba(0,0,0,0.6);
}

/* Status Badge */
.badge-upcoming {
  background: #000000;
  color: #FFFFFF;
  padding: 4px 12px;
  font-family: 'Space Mono';
  font-size: 10px;
  text-transform: uppercase;
}

.badge-past {
  background: transparent;
  border: 1px solid #000000;
  color: #000000;
}

Events Inner Page (`/events`)

┌──────────────────────────────────────────────────────────────┐
│                      EVENTS & TALKS                          │
│          Conferences, meetups, and workshops.                │
├──────────────────────────────────────────────────────────────┤
│ ═══════════════════ UPCOMING ═══════════════════════════════ │
├──────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ ┌────────────┐                                           │ │
│ │ │  MAR 15    │  REACT CONF 2026                          │ │
│ │ │  2026      │  Las Vegas, NV                            │ │
│ │ │            │                                           │ │
│ │ │ [REGISTER] │  Talk: "Shipping AI Features Fast"        │ │
│ │ └────────────┘                                      →    │ │
│ └──────────────────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────────────────┤
│ ═══════════════════ PAST ════════════════════════════════════│
├──────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ NOV 10, 2025 │ CLOUDFLARE CONNECT     │ [VIDEO] [SLIDES] │ │
│ ├──────────────────────────────────────────────────────────┤ │
│ │ SEP 22, 2025 │ JSCONF ASIA            │ [VIDEO]          │ │
│ └──────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘

Spec

Background: #FF4D00
Section Dividers: Full-width bars, bg-black text-white, "UPCOMING" / "PAST"

4. BLOGS

Inspiration

Editorial design: Magazine-style featured + stack layouts
Dark mode with neon (2025 trend): High contrast for code
JetBrains Mono / Space Mono: Technical credibility in code blocks

Homepage Section

Magazine-style layout with featured article:

┌──────────────────────────────────────────────────────────────┐
│ [WRITING]                                        [VIEW ALL →]│
├──────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────┬─────────────────────────┐
│ │                                  │ 02                      │
│ │  01                              │ SECOND POST TITLE       │
│ │  FEATURED POST TITLE             │ A shorter intro...      │
│ │                                  │ 5 min read • Jan 15     │
│ │  A brief excerpt that introduces ├─────────────────────────┤
│ │  the topic and hooks the reader. │ 03                      │
│ │                                  │ THIRD POST TITLE        │
│ │  12 min read • Feb 1, 2026       │ Quick description...    │
│ │                                  │ 3 min read • Jan 08     │
│ └──────────────────────────────────┴─────────────────────────┘
└──────────────────────────────────────────────────────────────┘

Spec

Background: #FFFFFF
Section Header: "WRITING" — Space Mono, #000000

Featured Post:

.featured-post {
  border: 2px solid #000000;
  padding: 32px;
  transition: all 300ms;
}

.featured-post:hover {
  background: #000000;
  color: #FFFFFF;
}

.featured-post:hover .title {
  color: #FF4D00;
}

.featured-post .index {
  font-family: 'Space Mono';
  color: #FF4D00;
  font-size: 14px;
}

.featured-post .title {
  font-family: 'Archivo Black';
  font-size: clamp(28px, 6vw, 56px);
  text-transform: uppercase;
  color: #000000;
  line-height: 0.9;
  margin: 16px 0;
}

.featured-post .excerpt {
  font-family: 'Inter';
  font-size: 18px;
  color: rgba(0,0,0,0.7);
  line-height: 1.6;
  max-height: 4.8em; /* 3 lines */
  overflow: hidden;
}

.featured-post .meta {
  font-family: 'Space Mono';
  font-size: 12px;
  color: rgba(0,0,0,0.5);
  margin-top: 16px;
}

Stack Posts:

.stack-post {
  border-bottom: 2px solid #000000;
  padding: 24px 0;
  transition: transform 300ms;
}

.stack-post:hover {
  transform: translateX(8px);
}

.stack-post .title {
  font-family: 'Archivo Black';
  font-size: 24px;
  text-transform: uppercase;
}

Blog Post Page (`/blog/[slug]`)

Based on developer blog best practices:

┌──────────────────────────────────────────────────────────────┐
│ ← BACK TO WRITING                                            │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│                    BLOG POST TITLE                           │
│                                                              │
│ [Engineering] [AI]                                           │
│                                                              │
│ Sean Urgel • Feb 1, 2026 • 12 min read                       │
├──────────────────────────────────────────────────────────────┤
│                          ↓                                   │
│  ┌───────────────────────────────────────────────────────┐   │
│  │                    ARTICLE BODY                       │   │
│  │                    (max-w-3xl mx-auto)                │   │
│  │                                                       │   │
│  │  ## Heading 2                                         │   │
│  │                                                       │   │
│  │  Paragraph text in Inter, 18px, line-height 1.8.      │   │
│  │  Links are #FF4D00 with underline on hover.           │   │
│  │                                                       │   │
│  │  > Blockquote with left border                        │   │
│  │                                                       │   │
│  │  ```typescript                                        │   │
│  │  const ship = async () => {                           │   │
│  │    await deploy();                                    │   │
│  │  };                                                   │   │
│  │  ```                                                  │   │
│  │                                                       │   │
│  └───────────────────────────────────────────────────────┘   │
├──────────────────────────────────────────────────────────────┤
│  SHARE: [Twitter] [LinkedIn] [Copy Link]                     │
├──────────────────────────────────────────────────────────────┤
│  ← PREV POST                               NEXT POST →       │
└──────────────────────────────────────────────────────────────┘

Article Typography

/* Article Container */
.article {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px;
}

/* Headings */
h1 {
  font-family: 'Archivo Black';
  font-size: clamp(36px, 10vw, 72px);
  text-transform: uppercase;
  line-height: 0.9;
  margin-bottom: 24px;
}

h2 {
  font-family: 'Archivo Black';
  font-size: 28px;
  text-transform: uppercase;
  margin-top: 48px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #000000;
}

h3 {
  font-family: 'Archivo Black';
  font-size: 22px;
  text-transform: uppercase;
  margin-top: 32px;
  margin-bottom: 12px;
}

/* Paragraph */
p {
  font-family: 'Inter';
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 24px;
}

/* Links */
a {
  color: #FF4D00;
  text-decoration: none;
  transition: text-decoration 200ms;
}

a:hover {
  text-decoration: underline;
}

/* Code Inline */
code {
  font-family: 'Space Mono';
  font-size: 0.9em;
  background: rgba(0,0,0,0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Code Block */
pre {
  background: #000000;
  color: #FFFFFF;
  font-family: 'Space Mono';
  font-size: 14px;
  padding: 24px;
  overflow-x: auto;
  margin: 32px 0;
  border: 2px solid #000000;
}

pre code {
  background: transparent;
  padding: 0;
}

/* Syntax Highlighting */
.token.keyword { color: #FF4D00; }
.token.string { color: #FFFFFF; }
.token.comment { color: rgba(255,255,255,0.5); }
.token.function { color: #FF4D00; }

/* Blockquote */
blockquote {
  border-left: 4px solid #FF4D00;
  padding-left: 24px;
  margin: 32px 0;
  font-style: italic;
  color: rgba(0,0,0,0.8);
}

/* Images */
img {
  width: 100%;
  border: 2px solid #000000;
  margin: 32px 0;
}

/* Lists */
ul, ol {
  padding-left: 24px;
  margin-bottom: 24px;
}

li {
  margin-bottom: 8px;
}

li::marker {
  color: #FF4D00;
}

Component Summary

Section	Homepage Component	Inner Page	Detail Page
Projects	`ProjectsGrid`	`/projects`	`/projects/[slug]`
Experience	`Experience` (exists)	`/experience`	—
Events	`EventsCarousel`	`/events`	—
Blogs	`BlogsFeatured`	`/blog`	`/blog/[slug]`

Implementation Notes

Animation Library

Consider using Framer Motion for:

Page transitions (fade + translateY)
Scroll-triggered reveals
Hover state animations
Stagger effects for lists

Responsive Breakpoints

Breakpoint	Width	Adjustments
Mobile	< 768px	Single column, font sizes × 0.6
Tablet	768px-1024px	2 columns where applicable
Desktop	> 1024px	Full layouts as specified

Accessibility

All interactive elements: focus-visible:ring-2 focus-visible:ring-kinetic-orange focus-visible:ring-offset-2
Reduced motion: @media (prefers-reduced-motion: reduce) — disable marquees, use instant transitions
Color contrast: Orange on black = 4.5:1+ (WCAG AA compliant)
Semantic HTML: Use proper heading hierarchy, landmark regions

SEO Considerations

Each inner page needs unique <title> and <meta description>
Projects/Blogs need Open Graph images
Structured data for blog posts (Article schema)

Design Rules

MUST:

Keep all Archivo Black headers UPPERCASE
Use 2px borders consistently
Maintain three-color system (Orange, Black, White)
Include index numbers (01, 02, 03) for lists
Use Space Mono for all metadata/labels

DO NOT:

Introduce gradients or drop shadows
Use rounded corners (except pills/buttons)
Add colors outside the defined palette
Use lowercase for display typography
Mix border weights inconsistently

Written by

Sean Stuart Urgel

Senior Software Engineer @ Casper Studios

Research Summary​

Sources Analyzed​

Key Patterns Discovered​

Shared Design System​

Typography (Matching Kinetic Orange)​

Color System​

Interaction Patterns​

1. PROJECTS​

Inspiration​

Homepage Section​

Spec​

Projects Inner Page (/projects)​

Spec​

Project Detail Page (/projects/[slug])​

2. WORK EXPERIENCE​

Inspiration​

Homepage Section​

Experience Inner Page (/experience)​

Spec​

3. EVENTS​

Inspiration​

Homepage Section​

Spec​

Events Inner Page (/events)​

Spec​

4. BLOGS​

Inspiration​

Homepage Section​

Spec​

Blog Post Page (/blog/[slug])​

Article Typography​

Component Summary​

Implementation Notes​

Animation Library​

Responsive Breakpoints​

Accessibility​

SEO Considerations​

Design Rules​

Written by

Research Summary

Sources Analyzed

Key Patterns Discovered

Shared Design System

Typography (Matching Kinetic Orange)

Color System

Interaction Patterns

1. PROJECTS

Inspiration

Homepage Section

Spec

Projects Inner Page (`/projects`)

Spec

Project Detail Page (`/projects/[slug]`)

2. WORK EXPERIENCE

Inspiration

Homepage Section

Experience Inner Page (`/experience`)

Spec

3. EVENTS

Inspiration

Homepage Section

Spec

Events Inner Page (`/events`)

Spec

4. BLOGS

Inspiration

Homepage Section

Spec

Blog Post Page (`/blog/[slug]`)

Article Typography

Component Summary

Implementation Notes

Animation Library

Responsive Breakpoints

Accessibility

SEO Considerations

Design Rules