EmberDocs UI/UX Mockups Guide

Created: December 2025
Style: Developer Dark Theme
Status: Ready for Implementation

Overview

Complete set of 5 application UI mockups based on the Mockup 2 (Developer Dark) landing page aesthetic. Each mockup is a functional HTML file showcasing core application screens with dark theme, technical precision, and developer-friendly design.

Mockup Files

1. Documentation Page (`ui-mockup-01-documentation-page.html`)

The core EmberDocs reading experience

Layout:

Header: Sticky navigation with logo, nav links, and search trigger (⌘K)
3-column grid: Sidebar navigation (280px) + Content area (fluid, max 900px) + Table of Contents (240px)
Responsive: Sidebar and TOC hide on smaller screens

Key Features:

Breadcrumb navigation
Reading time and last updated metadata
Syntax-highlighted code blocks with copy buttons
Callout boxes for tips/warnings
Previous/Next navigation cards
Active state indicators in sidebar and TOC

Components Used:

Navigation lists with nested items
Code blocks with header and language indicator
Inline code styling
Gradient logo mark
Responsive grid layout

Implementation Notes:

// React component structure
<Layout>
  <Header sticky />
  <Grid columns={3}>
    <Sidebar />
    <Content>
      <Breadcrumbs />
      <Article />
      <NavigationFooter />
    </Content>
    <TableOfContents />
  </Grid>
</Layout>

Use for:

All documentation pages
Guide articles
API reference pages
Tutorial content

2. Search Modal (`ui-mockup-02-search-modal.html`)

⌘K instant search experience

Layout:

Full-screen backdrop with blur effect
Centered modal (max 640px)
Search input header
Scrollable results area
Keyboard shortcuts footer

Key Features:

Instant search with highlighted matches
Grouped results by section (Pages, Code Examples)
Result previews with breadcrumbs
Keyboard navigation indicators (↑↓ ↵ ESC)
Recent searches when empty
No results state
FlexSearch branding badge

States Included:

Active Search: Results with highlights
Empty/Recent: Recent search history (commented)
No Results: Empty state message (commented)

Components Used:

Search input with icon
Result cards with icons
Keyboard shortcut badges
Section headers
Breadcrumb pills

Implementation Notes:

// Search modal component
<SearchModal trigger="⌘K">
  <SearchInput autofocus />
  <SearchResults>
    <Section title="Pages" />
    <Section title="Code" />
  </SearchResults>
  <SearchFooter shortcuts />
</SearchModal>

Performance Target: <50ms search response time

3. Mobile Navigation (`ui-mockup-03-mobile-navigation.html`)

Mobile-first navigation experience

Layout:

Fixed header with hamburger menu
Slide-in navigation drawer (280px)
Content area with bottom nav
Bottom sheet TOC drawer
Floating TOC toggle button

Key Features:

Hamburger menu with smooth slide-in
Expandable/collapsible nav sections
Active page indicators
Bottom navigation for prev/next
Swipeable TOC drawer
Backdrop overlay with blur

Interactive Elements:

Touch-optimized tap targets (44px minimum)
Swipe gestures for drawers
Collapsible navigation groups
Fixed bottom navigation

Components Used:

Drawer navigation
Bottom sheet
Floating action button
Mobile header
Backdrop overlay

Implementation Notes:

// Mobile navigation structure
<MobileLayout>
  <MobileHeader>
    <HamburgerMenu />
    <Logo />
    <SearchButton />
  </MobileHeader>
  
  <NavigationDrawer side="left" />
  <Content />
  <TOCDrawer side="bottom" />
  <FloatingTOCButton />
  <BottomNavigation />
</MobileLayout>

Breakpoint: <768px

4. Version Switcher (`ui-mockup-04-version-switcher.html`)

Git-native version management UI

Layout:

Version trigger button in header
Centered modal (max 600px)
Scrollable version list
Comparison tools section

Key Features:

Current version highlighted
Version badges (Latest, Stable, Beta, Deprecated)
Inline changelog previews
Release dates and metadata
Quick actions (View, Switch, Try)
Version comparison tools

Version States:

Latest/Stable: Green badge, checkmark
Beta: Amber badge, preview features
Deprecated: Red badge, warning

Components Used:

Version cards with metadata
Badge system
Expandable changelogs
Action buttons
Comparison grid

Implementation Notes:

// Version switcher
<VersionModal>
  <VersionList>
    <VersionCard 
      version="2.1.0"
      badge="Latest"
      changelog={changes}
      active
    />
    <VersionCard version="2.0.5" />
    <VersionCard version="2.2.0-beta.1" badge="Beta" />
  </VersionList>
  <ComparisonTools />
</VersionModal>

Data Source: Git tags (automatic detection)

5. Component Library (`ui-mockup-05-component-library.html`)

Complete design system reference

Sections:

Color Palette - Brand and semantic colors
Buttons - 3 variants × 3 sizes
Form Inputs - Text inputs with states
Cards - Container components
Badges - Status indicators
Alerts - 4 notification types
Code Display - Inline and block code
Loading States - Spinners and skeletons
Toggle Switch - On/off controls
Navigation Items - Sidebar styles

Purpose:

Developer reference
Design consistency
Implementation guide
Component showcase

Use for:

Building new screens
Maintaining consistency
Onboarding developers
QA visual testing

Design System

Color System

:root {
  /* Brand */
  --purple: #8B5CF6;
  --amber: #F59E0B;
  
  /* Dark Theme */
  --bg: #0F172A;
  --surface: #1E293B;
  --surface-hover: #334155;
  --border: #334155;
  
  /* Text */
  --text: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-tertiary: #94A3B8;
}

Typography

Font Families:

UI: Inter (400, 500, 600, 700)
Code: JetBrains Mono (400, 500)

Type Scale:

Hero:  42px / 700
H1:    28-30px / 700
H2:    24px / 600
H3:    18-20px / 600
Body:  16px / 400
Small: 14px / 400
Tiny:  12px / 400

Spacing

8px base scale:

4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px

Common patterns:

Section spacing: 48-64px
Component spacing: 16-24px
Element spacing: 8-12px

Border Radius

Small:   4px  (badges, inline code)
Default: 8px  (buttons, inputs, cards)
Large:   12px (modals, major containers)
Round:   50%  (avatars, toggle switches)

Shadows

/* Elevation levels */
sm:   0 1px 2px rgba(0,0,0,0.05)
base: 0 1px 3px rgba(0,0,0,0.1)
md:   0 4px 6px rgba(0,0,0,0.1)
lg:   0 10px 15px rgba(0,0,0,0.1)
xl:   0 20px 25px rgba(0,0,0,0.1)

Component Specifications

Buttons

Variants:

Primary: Purple background, white text
Secondary: Transparent, purple border
Ghost: Transparent, no border

Sizes:

Small: 8px × 16px padding, 14px font
Default: 12px × 24px padding, 16px font
Large: 16px × 32px padding, 18px font

States:

Hover: Lift 1px, add shadow
Active: No lift, slight scale down
Focus: Purple ring

Input Fields

Default:

12px × 16px padding
16px font size
2px border (solid)
8px border radius

Focus State:

Purple border
3px purple glow (box-shadow)

Icons:

Left icon: 40px left padding
Right icon: 40px right padding
Icon size: 20px

Cards

Structure:

24px padding
12px border radius
1px border

Hover:

Lift 2px
Purple border
Add shadow

Code Blocks

Header:

Language label (left)
Copy button (right)
Dark background overlay
12px padding

Content:

16px padding
JetBrains Mono 14px
Line height 1.6
Syntax highlighting

Syntax Colors:

Comment: --text-tertiary
Keyword: --purple
String: #10B981
Function: --amber

Responsive Breakpoints

/* Mobile first */
sm:  640px   /* Large phones */
md:  768px   /* Tablets */
lg:  1024px  /* Laptops */
xl:  1280px  /* Desktops */

Layout Changes:

Desktop (>1200px):

3-column docs layout
Visible sidebar + TOC
Fixed header

Tablet (768-1200px):

2-column layout
Hide TOC
Keep sidebar

Mobile (<768px):

Single column
Hamburger menu
Bottom navigation
Bottom sheet TOC

Interactions & Animations

Hover Effects

transition: all 0.2s ease-out;

/* Lift on hover */
transform: translateY(-2px);

/* Color transitions */
transition: color 0.2s, background 0.2s;

Modal Animations

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Drawer Slides

/* Navigation drawer */
transform: translateX(-100%);
transition: transform 0.3s ease;

/* Active state */
transform: translateX(0);

Accessibility

Keyboard Navigation

Global:

⌘K / Ctrl+K - Open search
ESC - Close modals/drawers
Tab - Navigate focusable elements

Search Modal:

↑↓ - Navigate results
Enter - Select result
ESC - Close

Navigation:

Tab - Move between links
Enter - Activate link
Space - Toggle expanded sections

Focus Indicators

All interactive elements have visible focus states:

Purple outline ring
2px solid or 3px glow
High contrast

Screen Readers

Semantic HTML (<nav>, <main>, <article>)
ARIA labels on icons
Proper heading hierarchy
Skip navigation links

Color Contrast

All text meets WCAG 2.1 Level AA:

Normal text: 4.5:1 minimum
Large text: 3:1 minimum
UI components: 3:1 minimum

Tested combinations:

Text on background: 16.23:1 ✓
Secondary text: 4.67:1 ✓
Tertiary text: 3.52:1 ✓

Implementation Roadmap

Phase 1: Core Components (Week 1-2)

Phase 2: Layout (Week 3-4)

Phase 3: Features (Week 5-6)

Phase 4: Polish (Week 7-8)

Technology Stack

Frontend Framework:

Next.js 16+ (App Router)
React 18+
TypeScript 5+

Styling:

Tailwind CSS 3+ (or CSS-in-JS)
CSS Custom Properties
Framer Motion (animations)

Components:

Radix UI (unstyled primitives)
Lucide React (icons)
cmdk (search interface)

Code Highlighting:

Shiki (syntax highlighting)
rehype-pretty-code (integration)

File Structure

/components
  /ui
    Button.tsx
    Input.tsx
    Card.tsx
    Badge.tsx
    Alert.tsx
    CodeBlock.tsx
  /layout
    Header.tsx
    Sidebar.tsx
    Content.tsx
    TOC.tsx
    Footer.tsx
  /features
    SearchModal.tsx
    VersionSwitcher.tsx
    MobileNav.tsx
    
/styles
  globals.css
  variables.css
  
/lib
  /constants
    colors.ts
    typography.ts
    spacing.ts

Usage Examples

Basic Page Layout

import { Layout, Sidebar, Content, TOC } from '@/components/layout';

export default function DocPage() {
  return (
    <Layout>
      <Sidebar items={navigation} />
      <Content>
        <Breadcrumbs />
        <Article />
        <NavigationFooter />
      </Content>
      <TOC headings={headings} />
    </Layout>
  );
}

Search Integration

import { SearchModal } from '@/components/features';

export function Header() {
  return (
    <header>
      <Logo />
      <SearchModal 
        trigger="⌘K"
        index={searchIndex}
        onSelect={navigateToResult}
      />
    </header>
  );
}

Version Switcher

import { VersionSwitcher } from '@/components/features';

export function VersionBadge() {
  return (
    <VersionSwitcher
      current="2.1.0"
      versions={allVersions}
      onSwitch={handleVersionChange}
    />
  );
}

Testing

Visual Regression

Chromatic snapshots
Percy integration
Screenshot comparisons

Accessibility

axe-core automated testing
Keyboard navigation testing
Screen reader testing

Responsive

Mobile viewports (375px, 414px)
Tablet viewports (768px, 1024px)
Desktop viewports (1280px, 1920px)

Performance

Lighthouse scores: 100/100/100/100
Core Web Vitals
Bundle size monitoring

Next Steps

Review mockups - Open all HTML files in browser
Choose implementation approach - Tailwind vs CSS-in-JS
Set up component library - Storybook or similar
Begin with design tokens - Colors, typography, spacing
Build core components - Buttons, inputs, cards first
Implement layouts - Header, sidebar, content grid
Add features - Search, version switcher, mobile nav
Polish & test - Animations, accessibility, performance

Questions? Reference the mockup HTML files or ask for clarification on any component!

Uh oh!

FilesExpand file tree

UI-MOCKUPS-GUIDE.md

Latest commit

History

UI-MOCKUPS-GUIDE.md

File metadata and controls

EmberDocs UI/UX Mockups Guide

Overview

Mockup Files

1. Documentation Page (ui-mockup-01-documentation-page.html)

2. Search Modal (ui-mockup-02-search-modal.html)

3. Mobile Navigation (ui-mockup-03-mobile-navigation.html)

4. Version Switcher (ui-mockup-04-version-switcher.html)

5. Component Library (ui-mockup-05-component-library.html)

Design System

Color System

Typography

Spacing

Border Radius

Shadows

Component Specifications

Buttons

Input Fields

Cards

Code Blocks

Responsive Breakpoints

Interactions & Animations

Hover Effects

Modal Animations

Drawer Slides

Accessibility

Keyboard Navigation

Focus Indicators

Screen Readers

Color Contrast

Implementation Roadmap

Phase 1: Core Components (Week 1-2)

Phase 2: Layout (Week 3-4)

Phase 3: Features (Week 5-6)

Phase 4: Polish (Week 7-8)

Technology Stack

File Structure

Usage Examples

Basic Page Layout

Search Integration

Version Switcher

Testing

Visual Regression

Accessibility

Responsive

Performance

Next Steps

1. Documentation Page (`ui-mockup-01-documentation-page.html`)

2. Search Modal (`ui-mockup-02-search-modal.html`)

3. Mobile Navigation (`ui-mockup-03-mobile-navigation.html`)

4. Version Switcher (`ui-mockup-04-version-switcher.html`)

5. Component Library (`ui-mockup-05-component-library.html`)