Design System Inspired by Morph

Morph's design system embodies a cutting-edge, developer-focused aesthetic with a bold dark theme optimized for extended viewing and reduced eye strain. The visual language combines deep charcoal backgrounds with vibrant lime-green accents that evoke energy, precision, and technological sophistication. The system emphasizes clarity through high contrast, clean geometry, and purposeful use of negative space. A sophisticated interplay of monospace and geometric sans-serif typefaces reinforces the brand's technical credentials while maintaining accessibility. The overall atmosphere is premium yet approachable—conveying power and innovation without coldness, grounded in practical usability for complex AI engineering workflows.

Key Characteristics

• Deep dark backgrounds (#0A0A0A, #111827) with strategic lime-green accents (#99D52A, #80EE64)

• High-contrast, legible hierarchy supporting developer workflows

• Minimal, geometric component design with subtle depth through layered shadows

• Monospace and structured typography reinforcing technical authenticity

• Generous whitespace and breathing room between sections

• Subtle gradient glows and accent lighting emphasizing key interactions

• Premium feel through restrained color palette and intentional elevation

### Buttons

#### Primary Button (Brand CTA)

• Background: #99D52A

• Text Color: #FAFAFA

• Font: Goga Font, 16px, weight 400

• Padding: 10px 24px

• Border Radius: 8px

• Border: None

• Height: 44px

• Box Shadow: None

• Hover State: Background #80EE64, opacity 0.9

• Active State: Background #99D52A, opacity 0.8

• Disabled State: Background #7A8A7A, cursor not-allowed

#### Secondary Button (Outlined)

• Background: Transparent

• Text Color: #99D52A

• Font: Goga Font, 16px, weight 400

• Padding: 10px 24px

• Border Radius: 8px

• Border: 1px solid #99D52A

• Height: 44px

• Box Shadow: None

• Hover State: Background rgba(153, 213, 42, 0.1)

• Active State: Background rgba(153, 213, 42, 0.2)

#### Tertiary Button (Ghost)

• Background: Transparent

• Text Color: #FAFAFA

• Font: Instrument Sans, 16px, weight 400

• Padding: 0px 12px

• Border Radius: 8px

• Border: 1px solid #404040

• Height: 32px

• Box Shadow: None

• Hover State: Background rgba(255, 255, 255, 0.08), border #80EE64

• Active State: Background rgba(153, 213, 42, 0.15)

#### Text Link Button

• Background: Transparent

• Text Color: #FAFAFA

• Font: Instrument Sans, 16px, weight 400

• Padding: 6px 8px

• Border Radius: 10px

• Border: None

• Height: Auto

• Box Shadow: None

• Hover State: Text Color #80EE64, background rgba(153, 213, 42, 0.08)

• Underline: On hover, text-decoration underline

### Cards & Containers

#### Default Card

• Background: Transparent or rgba(0, 0, 0, 0.3)

• Text Color: #FFFFFF

• Font: Goga Font, 16px, weight 400

• Padding: 32px

• Border Radius: 12px

• Border: 1px solid rgba(255, 255, 255, 0.08)

• Box Shadow: rgba(0, 0, 0, 0.08) 0px 12px 32px -4px, rgba(0, 0, 0, 0.08) 0px 4px 8px -2px

• Hover State: Border rgba(255, 255, 255, 0.16), shadow elevated

#### Premium Card (Glowing)

• Background: rgba(0, 0, 0, 0.4)

• Text Color: #FFFFFF

• Font: Goga Font, 16px, weight 400

• Padding: 40px

• Border Radius: 12px

• Border: 1px solid rgba(153, 213, 42, 0.2)

• Box Shadow: rgba(150, 255, 31, 0.08) 0px 100px 191px 0px, rgba(150, 255, 31, 0.05) 0px 36px 70px 0px, rgba(150, 255, 31, 0.04) 0px 18px 34px 0px, rgba(150, 255, 31, 0.03) 0px 9px 17px 0px

• Hover State: Border rgba(153, 213, 42, 0.4), shadow intensified

### Inputs & Forms

#### Text Input

• Background: rgba(0, 0, 0, 0.2)

• Text Color: #E5E5E5

• Font: Goga Font, 18px, weight 400

• Padding: 12px 16px

• Border Radius: 8px

• Border: 1px solid rgba(255, 255, 255, 0.08)

• Height: 44px

• Line Height: 28px

• Box Shadow: None

• Focus State: Border #99D52A, box-shadow 0 0 0 3px rgba(153, 213, 42, 0.1)

• Placeholder Color: rgba(250, 250, 250, 0.4)

#### Input Label

• Font: Instrument Sans, 12px, weight 600

• Color: #FAFAFA

• Margin Bottom: 8px

• Display: Block

### Navigation

#### Nav Link (Horizontal Menu)

• Background: Transparent

• Text Color: #FAFAFA

• Font: Instrument Sans, 16px, weight 400

• Padding: 6px 12px

• Border Radius: 6px

• Border: None

• Height: Auto

• Line Height: 24px

• Box Shadow: None

• Hover State: Background rgba(255, 255, 255, 0.08), color #80EE64

• Active State: Background rgba(153, 213, 42, 0.15), color #99D52A, font-weight 600

#### Nav Header Logo

• Font: GeistPixelCircle, 18px, weight 600

• Color: #FFFFFF

• Hover State: Color #80EE64

#### Top Navigation Bar

• Background: rgba(0, 0, 0, 0.4) with backdrop filter blur 8px

• Height: 64px

• Padding: 16px 32px

• Border Bottom: 1px solid rgba(255, 255, 255, 0.08)

• Box Shadow: rgba(0, 0, 0, 0.08) 0px 12px 32px -4px, rgba(0, 0, 0, 0.08) 0px 4px 8px -2px

### Spacing System

Base Unit: 4px

Scale:

• 4px — Micro gaps, icon spacing, tight inline spacing

• 8px — Small padding, tight component spacing

• 12px — Component padding, form field margins

• 16px — Standard padding, section margins

• 20px — Medium margins, subsection spacing

• 24px — Gap between feature blocks, moderate section spacing

• 32px — Large section margins, major container padding

• 40px — Premium component padding, featured sections

• 48px — Major gap between content sections

• 80px — Hero section spacing, page-level margins

• 96px — Large section dividers

• 128px — Maximum spacing between major page sections

Context:

• Micro spacing (4px–8px): Icon padding, compact lists, tight layouts

• Comfortable spacing (16px–24px): Default UI component spacing, readable lists

• Generous spacing (32px–48px): Section dividers, feature blocks, breathing room

• Premium spacing (80px–128px): Hero sections, page-level hierarchy

### Grid & Container

Max Width: 1280px for content areas; 100vw for full-bleed hero sections

Column Strategy: 12-column fluid grid on desktop; 2–4 columns on tablet; single column on mobile

Section Pattern:

• Full-width hero with centered max-width content (1280px)

• Alternating left–right content blocks with 96px vertical spacing

• 3–4 column card grids on desktop, 2 columns on tablet, 1 on mobile

• Sidebar layouts use 2-column split: 70% content, 30% sidebar (desktop only)

### Whitespace Philosophy

Whitespace is treated as an active design element rather than passive emptiness. Generous margins between sections (48px–96px) create visual hierarchy and reduce cognitive load. Vertical rhythm is maintained through consistent spacing multiples. Negative space around text prevents crowding and improves readability. Compact components (32px height buttons) contrast with open layouts to guide focus.

### Border Radius Scale

• Sharp: 0px — Text inputs without focus, technical dividers

• Subtle: 6px — Small UI elements, compact components

• Standard: 8px — Buttons, small cards, form inputs

• Rounded: 10px–12px — Large cards, prominent containers, soft appearance

• Pill: 9999px — Circular badges, fully rounded buttons, avatar containers

### Breakpoints

| Name | Width | Key Changes |

|------|-------|-------------|

| Mobile | <640px | Single-column layout, 16px horizontal padding, 24px vertical spacing, 1x button height, collapsed navigation |

| Tablet | 640px–1024px | 2-column grids, 24px horizontal padding, 32px vertical spacing, hero text scales to 36px |

| Desktop | 1024px–1280px | 3–4 column grids, 40px horizontal padding, 48px vertical spacing, max-width containers 1280px |

| Wide | >1280px | 4–6 column grids, full spacing scale, sidebar layouts enabled, multi-column hero sections |

### Touch Targets

• Minimum Interactive Size: 44px × 44px for all buttons and clickable elements

• Comfortable Touch Area: 48px–56px for primary actions on mobile

• Spacing Between Targets: 8px minimum to prevent accidental taps

• Mobile Button Padding: 10px 24px (yields 44px height on single-line text)

• Desktop Button Padding: 10px 24px (standard across all sizes)

• Link Hit Area: 32px × 32px minimum for navigation links

• Form Inputs: 44px height minimum on mobile, 40px–44px on desktop

### Collapsing Strategy

• Hero Section: Full-width bleed on all sizes; text scales from 60px (desktop) → 48px (tablet) → 32px (mobile)

• Card Grids: 4 columns (desktop) → 2 columns (tablet) → 1 column (mobile) with 24px gap shrinking to 16px on mobile

• Navigation: Horizontal menu on desktop (desktop > 1024px); hamburger collapse on tablet/mobile with slide-out drawer

• Sidebar: Hidden on tablet/mobile; sticky on desktop (right side, 30% width)

• Two-Column Content: Split layout (desktop) → stacked vertically (tablet/mobile) with images flowing full-width

• Padding Reduction: 40px (desktop) → 24px (tablet) → 16px (mobile) on major containers

• Typography Scaling: Scale down 1 step on tablet (e.g., h1: 60px → 48px), 2 steps on mobile (h1: 60px → 36px)

• Spacing Compression: Reduce 48px gaps to 32px on tablet, 24px on mobile; maintain 16px minimum

### Quick Color Reference

• Primary CTA: Lime Accent (#99D52A)

• Secondary Highlight: Bright Lime (#80EE64)

• Tertiary Interactive: Blue Accent (#3B82F6)

• Background Primary: Deep Black (#0A0A0A)

• Background Secondary: Charcoal Dark (#111827)

• Container Surface: Surface (#27272A)

• Body Text: Off-White (#FAFAFA)

• Heading Text: Pure White (#FFFFFF)

• Border Subtle: rgba(255, 255, 255, 0.08)

• Disabled / Muted: Muted Olive (#7A8A7A)

### Iteration Guide

1. All interactive elements use lime green (#99D52A for fills, #80EE64 for hover) — no exceptions for brand consistency

2. Dark theme foundation: Set root background to #0A0A0A or #111827; all text defaults to #FAFAFA or #FFFFFF

3. Typography starts with 5 weights only: Use the hierarchy table above; display = GeistPixelCircle 48–60px, UI = Instrument Sans 12–16px, interactive = Goga Font 16–18px

4. Spacing follows the 4px scale: Always use multiples (4px, 8px, 16px, 24px, 32px, 48px, 80px, 128px); no arbitrary values

5. Elevation via layered shadows: Never use single drop shadows; apply the 6-level shadow system with multiple rgba layers

6. Border radius: `8px` standard, 12px for cards/containers, 9999px for badges only; text inputs stay 0px to emphasize technical nature

7. Hover states are mandatory: Every button, link, and card must respond with background color shift or text color change; use #80EE64 or rgba(153, 213, 42, 0.1) for feedback

8. Mobile first responsive: Start with single-column, 16px padding, 32px spacing; expand to grids only above 640px; breakpoints at 640px, 1024px, 1280px

9. Contrast check: Verify all text meets WCAG AA (4.5:1 for body, 3:1 for large text) before shipping; default check: #FAFAFA on #0A0A0A ✓

10. Minimal borders: Use 1px solid rgba(255, 255, 255, 0.08) for card/container edges; avoid #404040 except on ghost buttons; add rgba(153, 213, 42, 0.2) on hover for brand emphasis