Design System Inspired by Portix
1. Visual Theme & Atmosphere
The Portix design system embodies a modern, minimalist aesthetic with a bold accent strategy. It balances clean neutrality—dominated by deep blacks and whites—with carefully placed moments of vibrant color to guide attention and emotion. The design philosophy prioritizes clarity and directness, creating a sophisticated digital portfolio experience that speaks to contemporary design practices. The palette shifts from austere monochromacy in body content to strategic pops of coral-red and electric blue for interactive moments, establishing a visual language that feels both professional and creative.
Key Characteristics
- Minimalist foundation with high-contrast monochromatic base
- Bold, saturated accent colors for primary interactions and status
- Clean typography hierarchy with generous whitespace
- Soft geometric corners on interactive elements
- Muted background surfaces with crisp black text
- Strategic use of transparency and layering
- Modern, approachable aesthetic suited to creative professionals
2. Color Palette & Roles
Primary
- Primary Action (
#EA626F): Vibrant coral-red used for primary call-to-action buttons, project tags, and key interactive affordances
- Primary Text (
#000000): Deep black for primary heading and body text, establishing maximum contrast and readability
Accent Colors
- Electric Blue (
#0000EE): Bright, saturated blue for navigation links, underlines, and secondary interactions; appears in 372 implementations
- Cyan Highlight (
#0099FF): Light cyan-blue for accent moments and supporting interactive elements
- Subtle Overlay (
#FFFC): Near-transparent white for glass-morphic effects and floating overlays
Interactive
- Link Primary (
#0000EE): Default link color matching Electric Blue
- Button Base (
#EA626F): Primary button background, extends Primary Action palette
- Ghost Button Border (
#E0E0E0): Light neutral stroke for secondary button variants
Neutral Scale
- Dark Text (
#1A1A1A): Near-black for secondary headings and emphasized body copy
- Mid Gray (
#4D4D4D): Medium gray for tertiary text and disabled states
- Light Gray (
#666666): Lighter neutral for supporting captions and hints
- Surface Gray (
#B8B8B8): Light gray for subtle dividers and inactive UI elements
- Border Light (
#E0E0E0): Very light gray for borders, dividers, and card edges
Surface & Borders
- Background White (
#FFFFFF): Pure white for card surfaces and elevated containers
- Navigation Surface (
rgba(255, 255, 255, 0.8)): Semi-transparent white for navigation bar with backdrop blur effect
Semantic / Status
- Error / Danger (
#CF3848): Deep red for error states, alerts, and destructive actions
3. Typography Rules
Font Family
- Primary Font: Geist (available via Google Fonts or Geist font service); fallback to
system-ui, -apple-system, sans-serif
- Secondary Font: Inter (from Google Fonts); fallback to
ui-sans-serif, system-ui, sans-serif
- Display Font: Inter Display for specialized contexts; fallback to
display, serif, sans-serif
- System Font: sans-serif as fallback throughout
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|
| Display/H1 | Geist | 48px | 500 | 52.8px (1.1x) | 0px | Hero headlines, page titles |
| Heading 2/H2 | Geist | 32px | 500 | 35.2px (1.1x) | 0px | Section headings, primary content dividers |
| Heading 3/H3 | Inter | 26px | 500 | 28.6px (1.1x) | 0px | Subsection titles, card headers |
| Body Text | Inter Display | 12px | 400 | 19.2px (1.6x) | 0px | Paragraph copy, descriptions, descriptions |
| Navigation Link | sans-serif | 12px | 400 | normal | 0px | Top nav menu items, link text |
| Button Text | sans-serif | 12px | 400 | normal | 0px | Call-to-action text inside buttons |
| Caption/Small | Inter Display | 12px | 400 | 19.2px | 0px | Project labels, metadata, supplementary text |
Principles
- Generous Line Height: 1.1x on headings, 1.6x on body text promotes readability and breathing room
- Weight Modulation: 500-weight headings create clear hierarchy without excessive boldness
- Consistent Base Size: 12px for body, navigation, and button text establishes predictable scaling
- Minimal Letter Spacing: Default 0px maintains modern, compact feel while preserving legibility
- Vertical Rhythm: Multiples of base line-height maintain consistent visual flow
4. Component Stylings
Buttons
Primary Button
- Background Color:
#EA626F
- Text Color:
#FFFFFF
- Font: sans-serif, 12px, weight 400
- Padding:
8px 20px
- Border Radius:
21px
- Border: none
- Box Shadow: none
- Height: auto (minimum 36px)
- Hover State: Background
#D54A56, no shadow
- Active State: Background
#C23A46
- Disabled State: Background
#B8B8B8, Text #666666
Secondary Button
- Background Color:
#FFFFFF
- Text Color:
#000000
- Font: sans-serif, 12px, weight 400
- Padding:
8px 20px
- Border Radius:
21px
- Border:
1px solid #E0E0E0
- Box Shadow: none
- Height: auto (minimum 36px)
- Hover State: Background
#F5F5F5, Border #D0D0D0
- Active State: Background
#EFEFEF, Border #C0C0C0
Ghost Button
- Background Color: transparent
- Text Color:
#000000
- Font: sans-serif, 12px, weight 400
- Padding:
4px 8px
- Border Radius:
2px
- Border:
1px solid rgba(0, 0, 0, 0.1)
- Box Shadow: none
- Height: 24px
- Hover State: Background
rgba(0, 0, 0, 0.04), Border rgba(0, 0, 0, 0.15)
Icon Button
- Background Color:
rgba(0, 0, 0, 0.04)
- Text Color:
#475569 (icon color)
- Padding:
0px
- Border Radius:
21px
- Border:
1px solid rgba(0, 0, 0, 0.1)
- Height: 24px
- Width: 24px
- Hover State: Background
rgba(0, 0, 0, 0.08)
Cards & Containers
Project Card
- Background Color:
#FFFFFF
- Border:
1px solid #E0E0E0
- Border Radius:
8px
- Padding:
24px
- Box Shadow: none
- Hover State: Border
#D0D0D0, slight scale increase (transform: scale(1.02))
Featured Work Container
- Background Color:
#FFFFFF
- Padding:
40px
- Border:
1px solid #E0E0E0
- Border Radius:
8px
- Text Color:
#000000
- Hover State: Border
#B8B8B8
Tag/Badge (Category Label)
- Background Color:
#EA626F
- Text Color:
#FFFFFF
- Font: sans-serif, 12px, weight 400
- Padding:
4px 12px
- Border Radius:
2px
- Border: none
- Height: auto
Inputs & Forms
Text Input
- Background Color:
#FFFFFF
- Border:
1px solid #E0E0E0
- Border Radius:
4px
- Padding:
12px
- Text Color:
#000000
- Font: sans-serif, 12px, weight 400
- Focus State: Border
#0000EE, outline none
- Placeholder Color:
#B8B8B8
Form Label
- Color:
#1A1A1A
- Font: sans-serif, 12px, weight 400
- Margin Bottom:
8px
Navigation
Navigation Bar
- Background Color:
rgba(255, 255, 255, 0.8) (with backdrop blur)
- Padding:
20px
- Height: 84px
- Width: full (1440px container)
- Border: none
- Position: sticky/fixed top
- Box Shadow: none
- Text Color:
#000000
- Font: sans-serif, 12px, weight 400
Navigation Link
- Text Color:
#0000EE (default state)
- Text Color:
#EA626F (active state)
- Font: sans-serif, 12px, weight 400
- Padding:
4px
- Background: transparent
- Border: none
- Hover State: Text
#6B5EEE
- Underline: applied on hover
Logo Container
- Background Color:
#1A1A1A
- Border Radius:
50%
- Width: 32px
- Height: 32px
- Display: flex, centered
Links
Inline Link
- Text Color:
#0000EE
- Font: sans-serif, 12px, weight 400
- Text Decoration: none (underline on hover)
- Padding:
4px
- Background: transparent
- Cursor: pointer
- Hover State: Text
#6B5EEE, text-decoration underline
CTA Link with Icon
- Text Color:
#0000EE
- Font: sans-serif, 12px, weight 400
- Icon: arrow-right or similar
- Padding:
5px 5px 5px 8px
- Gap between text and icon: 4px
5. Layout Principles
Spacing System
The design uses a modular spacing scale based on 4px increments:
- 4px: Micro gaps, compact button/icon spacing
- 8px: Small padding, nested element gaps
- 12px: Standard gap between related elements
- 20px: Standard padding for cards and containers
- 24px: Comfortable padding for larger content blocks
- 40px: Section padding, container insets
- 100px: Large vertical spacing between major sections
- 120px: Hero section padding, prominent spacing
- 200px: Maximum breathing room, full-width section margins
Usage Context:
- Micro interactions: 4px gaps
- Component internals: 8px–12px
- Card/container padding: 20px–24px
- Section separation: 40px–100px
- Full-page layouts: 120px–200px top/bottom margins
Grid & Container
- Max Width: 1440px (desktop container)
- Column Strategy: 12-column responsive grid
- Gutter Width: 12px–20px depending on breakpoint
- Section Padding: 40px–120px horizontal on desktop
- Section Pattern: Container → Row → Column nesting with consistent spacing
Whitespace Philosophy
The design prioritizes generous whitespace to create breathing room and visual hierarchy. Content is never cramped; vertical rhythm drives legibility. Sections are separated by substantial gaps (100px+) to create visual stops and guide the eye. Cards float in whitespace rather than filling containers edge-to-edge.
Border Radius Scale
- 2px: Small interactive elements (badges, ghost buttons, image corners), minimal emphasis
- 4px: Standard form inputs, small cards
- 8px: Medium cards, minor container elements
- 21px: Primary buttons, large interactive affordances, pill-shaped components
- 22px: Image containers, featured media elements
- 50%: Avatar circles, circular icons
6. Depth & Elevation
| Level | Treatment | Use |
|---|
| Surface (L0) | No shadow, background: #FFFFFF, border: 1px solid #E0E0E0 | Base cards, form inputs, standard containers |
| Raised (L1) | box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08) | Hovered cards, floating menus |
| Elevated (L2) | box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12) | Modal overlays, dropdowns, elevated panels |
| Modal (L3) | box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.16) | Full-screen modals, critical overlays |
Shadow Philosophy: The design system uses subtle, understated shadows to create gentle elevation rather than dramatic depth. Shadows grow softly with elevation to maintain the minimalist aesthetic. Most interactive elements rely on border, color, and transparency rather than shadow for definition. Shadows appear primarily on hover states and modal contexts to preserve the clean, flat appearance of the base design.
7. Do's and Don'ts
Do
- Use
#EA626F sparingly for primary actions and key affordances; it commands attention
- Maintain 1.1x line height on all headings; this is non-negotiable for the design's visual rhythm
- Apply consistent 21px border radius to all pill-shaped buttons and major interactive components
- Stack vertical sections with 100px+ spacing; this breathing room is integral to the aesthetic
- Use the neutral scale (
#000000, #1A1A1A, #B8B8B8) for the majority of UI; it's the foundation
- Leverage
#0000EE for all navigation links and secondary interactions; it's the system's electric blue
- Apply subtle borders (
#E0E0E0) to cards and containers instead of heavy shadows
- Use Geist for all headings; its 500 weight creates proper hierarchy without boldness
- Test hover states with increased opacity and slight color shifts; no hard color jumps
- Group related actions with consistent 12px gaps
Don't
- Overuse
#EA626F; restrict to primary CTAs and essential status indicators
- Apply shadows to cards by default; reserve shadows for hover and elevated contexts only
- Mix font weights arbitrarily; stick to 400 (body) and 500 (headings) throughout
- Create border radius smaller than 2px; this breaks the minimalist aesthetic
- Use the error color
#CF3848 casually; reserve it strictly for error and destructive states
- Combine multiple accent colors (
#0000EE, #0099FF, #EA626F) in a single interaction; choose one
- Add line-height below 1.1x on headings or below 1.6x on body text
- Use colors outside the defined palette; consistency is critical
- Create button states with dramatic shadow increases; maintain subtle layering
- Leave sections without clear vertical spacing; whitespace is intentional and structural
8. Responsive Behavior
Breakpoints
| Breakpoint Name | Width | Key Changes |
|---|
| Mobile | 320px–599px | Single-column layout, 20px horizontal padding, stacked cards, 40px section spacing, touch targets 44px minimum |
| Tablet | 600px–1023px | 2-column grid, 24px horizontal padding, 60px section spacing, cards full-width with gutters |
| Desktop | 1024px–1440px | Multi-column grid (12-col), 40px horizontal padding, 100px+ section spacing, max-width containers |
| Wide (4K) | 1441px+ | 120px horizontal padding, 200px section spacing, centered max-width 1440px container |
Touch Targets
- Minimum Height: 44px for all interactive elements on mobile and tablet
- Minimum Width: 44px for buttons and clickable areas on touch devices
- Padding/Spacing: At least 8px around touch targets to prevent accidental activation
- Icons: 24px–32px on mobile, 32px–48px on desktop
- Link Text: Minimum 12px font with 4px padding on all sides
Collapsing Strategy
- Navigation: Collapses to hamburger menu at 600px breakpoint; drawer slides from left or top
- Grid Layout: 2-column → 1-column at tablet breakpoint; cards stack vertically
- Hero Section: Padding reduces from 120px to 60px to 40px across breakpoints
- Typography: Display/H1 reduces from 48px (desktop) to 36px (tablet) to 28px (mobile)
- Spacing: Section gaps scale down by 20–30% at each breakpoint to maintain proportion
- Images: Scale to 100% width on mobile; maintain aspect ratio with object-fit cover
- Containers: Max-width inherited by child elements; full-width on mobile with side gutters
9. Agent Prompt Guide
Quick Color Reference
- Primary CTA: Coral Red (
#EA626F) — use for main buttons, project tags, availability badges
- Secondary CTA: Electric Blue (
#0000EE) — use for all navigation links, underlines, secondary interactions
- Error State: Deep Red (
#CF3848) — use strictly for errors, validation failures, destructive actions
- Text Headings: Deep Black (
#000000) — use for all H1, H2, H3 titles
- Text Body: Deep Black (
#000000) — use for paragraph copy and descriptions
- Secondary Text: Dark Gray (
#1A1A1A) — use for emphasized secondary content
- Background: Pure White (
#FFFFFF) — use for card surfaces and elevated containers
- Navigation Background: White with 80% opacity (
rgba(255, 255, 255, 0.8)) — apply backdrop blur
- Borders: Light Gray (
#E0E0E0) — use for card borders, dividers, input borders
- Disabled/Inactive: Surface Gray (
#B8B8B8) — use for disabled states and tertiary UI
Iteration Guide
- Start with Neutrals: 90% of UI should use
#000000, #FFFFFF, and #E0E0E0; reserve colored palette for interactions only
- Button Hierarchy: Primary = Coral (
#EA626F), Secondary = White + Border, Ghost = Transparent + Light Border; never mix these
- Typography Lock: All headings Geist 500-weight, all body Inter Display 12px 400-weight; no exceptions
- Spacing Multiples: Use only
4px, 8px, 12px, 20px, 24px, 40px, 100px, 120px, 200px; never arbitrary values
- Border Radius Standard: 2px for badges/small elements, 8px for cards, 21px for buttons; apply consistently
- Link Styling: Always
#0000EE base, underline on hover, 12px sans-serif, 4px padding
- Card Pattern: White background +
#E0E0E0 border + 20px padding + no shadow (default) + soft shadow on hover
- Shadow Restraint: Use shadows sparingly; only on hover states (L1:
0px 2px 8px rgba(0, 0, 0, 0.08)) or modals
- Line Height Rule: Headings 1.1x, body 1.6x, links normal; this drives readability and visual rhythm
- Responsive Collapse: At 600px shift to mobile grid, reduce headings to 36px, increase touch targets to 44px minimum, stack cards full-width
