Orion | Contacts List

By Sid Dani

## Page to Generate: Contacts List People and organizations with avatar, company, last interaction. Searchable directory with full sidebar. ## Flow Context Orion additional pages for complete app experience including settings, billing, contacts, and specialized views ## Available Page Links for Navigation Use these exact URLs for navigation links between pages in this flow: - "Orion Executive Dashboard": https://draft-2e684af5-3396-4184-a1a5-64720fad5b1b.preview.superdesign.dev - "Settings Hub": https://draft-f6fc5787-a91f-44f5-8220-97f0f329befc.preview.superdesign.dev - "Billing & Plans": https://draft-d108611f-627a-40c0-8eb0-2821809e4608.preview.superdesign.dev - "Contacts List" (current page): https://draft-a33feaa2-b1ee-4cb0-8eff-e9940f0227fe.preview.superdesign.dev - "Contact Detail": https://draft-7d1d1ad6-9e1f-4d2f-9b9a-605689d06fc6.preview.superdesign.dev - "Archive": https://draft-bcf0bb74-84e9-47a0-af22-e84364b2ddc0.preview.superdesign.dev - "Area Detail": https://draft-a7eb4d0e-3517-4cec-a118-2c81c263721f.preview.superdesign.dev - "Task List": https://draft-eea8951c-4159-4716-b34b-6d869f5bf99b.preview.superdesign.dev - "Calendar - Week View": https://draft-6e2d2701-2554-4be2-8263-ce033aa50ac0.preview.superdesign.dev - "Notifications Center": https://draft-e658ea1a-d163-4ef6-b45f-2cee81ac3dad.preview.superdesign.dev - "Pricing & Plans": https://draft-c789e7c4-668b-4bfe-8016-8addf857f42c.preview.superdesign.dev **Navigation Link Instructions:** 1. For <a> tags that navigate between pages in this flow, use the URLs above as href values 2. Mark the current page as "active" in navigation elements (add "active" class or similar styling) 3. The navigation should allow users to move between all pages in this flow 4. Keep all other links (external, social media, etc.) unchanged from the source ## CRITICAL: Shared UI Components - MUST BE IDENTICAL **ABSOLUTE RULES - NO EXCEPTIONS:** 1. **Navigation Bar**: Copy the EXACT same nav/header HTML. DO NOT add, remove, or modify ANY menu items. 2. **Sidebar Menu**: If source has sidebar, copy it EXACTLY. DO NOT add or remove ANY menu items. 3. **Footer**: Copy the EXACT same footer HTML. No modifications allowed. 4. **Logo & Branding**: Must be identical - same position, size, and content. 5. **Global Layout Structure**: Same container widths, padding, margins. **WHY THIS MATTERS:** These pages belong to the SAME application flow. Users expect consistent navigation across all pages. Adding or removing nav items breaks the user experience and creates confusion. ## Visual Consistency Requirements - Use the EXACT same color palette, typography, and spacing - Follow the same component styling patterns (buttons, cards, forms, etc.) - Maintain the same responsive behavior and layout grid - ONLY the main content area should change based on the page purpose ## What You CAN Change - Main content area (the unique part of each page) - Page-specific components within the content area - Content text and data ## What You CANNOT Change - Header/Navigation structure and items - Sidebar structure and menu items (if present) - Footer structure and content - Global CSS variables and theme colors - Common UI component styles ### Source Page HTML (PRESERVE ALL SHARED UI EXACTLY): ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Orion | Executive Dashboard</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&display=swap" rel="stylesheet"> <style> :root { --primary: #D4AF37; --bg: #F9F8F6; --text: #1A1A1A; --border: #1A1A1A; --easing: cubic-bezier(0.25, 0.46, 0.45, 0.94); } body { font-family: 'Inter', sans-serif; color: var(--text); background-color: var(--bg); } .serif { font-family: 'Playfair Display', serif; } .tracking-editorial { letter-spacing: 0.25em; } .btn-gold-slide { position: relative; overflow: hidden; border: 1px solid var(--border); transition: color 0.5s var(--easing); z-index: 1; } .btn-gold-slide::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary); transform: translateX(-101%); transition: transform 0.5s var(--easing); z-index: -1; } .btn-gold-slide:hover::after { transform: translateX(0); } .btn-gold-slide:hover { color: white; border-color: var(--primary); } .luxury-card { border-top: 1px solid var(--border); transition: all 0.5s var(--easing); } .luxury-card img { filter: grayscale(100%); transition: filter 1.5s var(--easing), transform 1.5s var(--easing); } .luxury-card:hover img { filter: grayscale(0%); transform: scale(1.05); } .grid-bg { background-image: linear-gradient(var(--border) 0.5px, transparent 0.5px), linear-gradient(90deg, var(--border) 0.5px, transparent 0.5px); background-size: 40px 40px; opacity: 0.03; } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); } @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-reveal { animation: slideInUp 1.2s var(--easing) forwards; } .delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.4s; } .delay-3 { animation-delay: 0.6s; } </style> </head> <body> <div class="min-h-screen flex flex-col bg-[#F9F8F6] selection:bg-[#D4AF37] selection:text-white">  <nav class="h-[80px] w-full border-b border-[#1A1A1A] flex items-center justify-between px-10 z-50 bg-[#F9F8F6]/95 backdrop-blur-sm sticky top-0"> <div class="flex items-center gap-2"> <span class="serif text-3xl font-black tracking-tighter">OR<span class="text-[#D4AF37]">I</span>ON</span> </div> <div class="flex-1 max-w-xl px-12"> <div class="relative flex items-center"> <iconify-icon icon="lucide:search" class="absolute left-0 text-lg opacity-40"></iconify-icon> <input type="text" placeholder="Search your knowledge archive..." class="w-full bg-transparent border-b border-[#1A1A1A]/20 pb-1 pl-8 focus:outline-none focus:border-[#D4AF37] serif italic text-lg transition-all duration-500"> </div> </div> <div class="flex items-center gap-8"> <button id="nav-notif-link" class="hover:text-[#D4AF37] transition-colors duration-500"> <iconify-icon icon="lucide:bell" class="text-xl"></iconify-icon> </button> <button id="nav-settings-link" class="hover:text-[#D4AF37] transition-colors duration-500"> <iconify-icon icon="lucide:settings" class="text-xl"></iconify-icon> </button> <div class="flex items-center gap-3 cursor-pointer group"> <div class="w-8 h-8 bg-[#1A1A1A] flex items-center justify-center text-[#F9F8F6] text-xs font-bold"> JS </div> <span class="uppercase text-[10px] tracking-[0.3em] font-medium hidden lg:block group-hover:text-[#D4AF37] transition-colors duration-500">Julian Sterling</span> </div> </div> </nav> <div class="flex flex-1 overflow-hidden">  <aside class="w-[280px] border-r border-[#1A1A1A] flex flex-col relative"> <div class="absolute inset-0 grid-bg pointer-events-none"></div> <div class="p-6 overflow-y-auto flex-1"> <div class="mb-10"> <h2 class="uppercase text-[11px] tracking-[0.4em] font-bold mb-6 opacity-40">Knowledge Base</h2>  <div class="space-y-8">  <div class="group cursor-pointer"> <div class="flex items-center justify-between mb-4"> <span class="serif text-xl italic">Projects</span> <span class="text-[10px] font-bold border border-[#1A1A1A] px-1.5 py-0.5">08</span> </div> <div class="luxury-card pt-4 opacity-70 group-hover:opacity-100 group-hover:border-[#D4AF37]"> <div class="w-full h-24 overflow-hidden mb-3"> <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=400" alt="Project thumbnail" class="w-full h-full object-cover"> </div> <p class="text-[10px] uppercase tracking-widest font-semibold">Current Focus</p> <p class="text-xs mt-1">Q4 Strategic Expansion</p> </div> </div>  <div class="group cursor-pointer"> <div class="flex items-center justify-between mb-4"> <span class="serif text-xl italic">Areas</span> <span class="text-[10px] font-bold border border-[#1A1A1A] px-1.5 py-0.5">14</span> </div> <div class="luxury-card pt-4 opacity-70 group-hover:opacity-100"> <ul class="space-y-2 text-[11px] uppercase tracking-[0.2em] font-medium"> <li class="hover:text-[#D4AF37] transition-colors">Financial Governance</li> <li class="hover:text-[#D4AF37] transition-colors">Design Directives</li> <li class="hover:text-[#D4AF37] transition-colors">Personal Brand</li> </ul> </div> </div>  <div class="group cursor-pointer"> <div class="flex items-center justify-between mb-4"> <span class="serif text-xl italic">Resources</span> <span class="text-[10px] font-bold border border-[#1A1A1A] px-1.5 py-0.5">42</span> </div> <div class="luxury-card pt-4 opacity-70 group-hover:opacity-100"> <div class="grid grid-cols-2 gap-2"> <div class="h-12 border border-[#1A1A1A]/10 flex items-center justify-center"> <iconify-icon icon="lucide:file-text" class="opacity-40"></iconify-icon> </div> <div class="h-12 border border-[#1A1A1A]/10 flex items-center justify-center"> <iconify-icon icon="lucide:library" class="opacity-40"></iconify-icon> </div> </div> </div> </div>  <div class="group cursor-pointer"> <div class="flex items-center justify-between mb-4"> <span class="serif text-xl italic">Archive</span> <span class="text-[10px] font-bold border border-[#1A1A1A] px-1.5 py-0.5">156</span> </div> <div class="luxury-card pt-2 opacity-30"></div> </div> </div> </div> </div> <div class="p-6 border-t border-[#1A1A1A]"> <button id="add-new-link" class="btn-gold-slide w-full py-4 uppercase text-[10px] tracking-[0.3em] font-bold flex items-center justify-center gap-2"> <iconify-icon icon="lucide:plus" class="text-sm"></iconify-icon> New Entry </button> </div> </aside>  <main class="flex-1 overflow-y-auto px-16 py-12 custom-scrollbar"> <header class="mb-16 animate-reveal"> <span class="uppercase text-[11px] tracking-[0.4em] font-bold opacity-40 mb-4 block">Monday / October 23, 2023</span> <h1 class="serif text-8xl font-medium leading-[0.9] -ml-1">The Daily Brief</h1> <div class="mt-8 flex items-center gap-12"> <div class="flex items-center gap-3"> <span class="w-10 h-[1px] bg-[#1A1A1A]"></span> <span class="serif italic text-xl">Curated for Julian Sterling</span> </div> <div class="flex items-center gap-6"> <div class="text-center"> <p class="text-[10px] uppercase tracking-widest opacity-40">Outlook</p> <p class="serif italic">High Clarity</p> </div> <div class="text-center"> <p class="text-[10px] uppercase tracking-widest opacity-40">Temp</p> <p class="serif italic">18° / London</p> </div> </div> </div> </header> <div class="grid grid-cols-12 gap-12">  <section class="col-span-8 animate-reveal delay-1"> <h3 class="uppercase text-[11px] tracking-[0.4em] font-bold mb-8 border-b border-[#1A1A1A] pb-4 flex justify-between items-center"> Appointments <iconify-icon icon="lucide:arrow-right" class="text-sm opacity-40 cursor-pointer hover:opacity-100"></iconify-icon> </h3> <div class="space-y-6"> <div class="flex items-start gap-8 group cursor-pointer"> <div class="w-24 shrink-0 text-right"> <p class="serif italic text-2xl">09:30</p> <p class="text-[10px] uppercase tracking-widest opacity-40">AM</p> </div> <div class="flex-1 luxury-card pt-2 group-hover:border-[#D4AF37] transition-all duration-500"> <h4 class="serif text-2xl mb-1">Board Review Meeting</h4> <p class="text-xs leading-relaxed opacity-60 max-w-lg">Reviewing the Q3 performance metrics and finalising the vision for international expansion into the APAC region.</p> </div> </div> <div class="flex items-start gap-8 group cursor-pointer"> <div class="w-24 shrink-0 text-right"> <p class="serif italic text-2xl">14:00</p> <p class="text-[10px] uppercase tracking-widest opacity-40">PM</p> </div> <div class="flex-1 luxury-card pt-2 group-hover:border-[#D4AF37] transition-all duration-500"> <h4 class="serif text-2xl mb-1">Design Critique: V3</h4> <p class="text-xs leading-relaxed opacity-60 max-w-lg">Iterative feedback loop for the luxury brand assets and the new digital interface components.</p> </div> </div> </div> </section>  <section class="col-span-4 animate-reveal delay-2"> <h3 class="uppercase text-[11px] tracking-[0.4em] font-bold mb-8 border-b border-[#1A1A1A] pb-4"> Directives </h3> <ul class="space-y-4"> <li class="flex items-start gap-4 group cursor-pointer"> <div class="w-4 h-4 border border-[#1A1A1A] mt-1 shrink-0 flex items-center justify-center transition-colors group-hover:bg-[#1A1A1A]"> <iconify-icon icon="lucide:check" class="text-white text-[10px] opacity-0 group-hover:opacity-100"></iconify-icon> </div> <div> <p class="serif text-lg leading-tight">Approve the creative budget for the seasonal campaign</p> <p class="text-[9px] uppercase tracking-widest font-bold mt-1 text-[#D4AF37]">High Priority</p> </div> </li> <li class="flex items-start gap-4 group cursor-pointer"> <div class="w-4 h-4 border border-[#1A1A1A] mt-1 shrink-0 flex items-center justify-center transition-colors group-hover:bg-[#1A1A1A]"> <iconify-icon icon="lucide:check" class="text-white text-[10px] opacity-0 group-hover:opacity-100"></iconify-icon> </div> <div> <p class="serif text-lg leading-tight">Draft executive summary for the investor relations deck</p> <p class="text-[9px] uppercase tracking-widest font-bold mt-1 opacity-40">Finance</p> </div> </li> <li class="flex items-start gap-4 group cursor-pointer"> <div class="w-4 h-4 border border-[#1A1A1A] mt-1 shrink-0 flex items-center justify-center transition-colors group-hover:bg-[#1A1A1A]"> <iconify-icon icon="lucide:check" class="text-white text-[10px] opacity-0 group-hover:opacity-100"></iconify-icon> </div> <div> <p class="serif text-lg leading-tight">Coordinate with the logistics team on international shipping</p> <p class="text-[9px] uppercase tracking-widest font-bold mt-1 opacity-40">Operations</p> </div> </li> </ul> </section>  <section class="col-span-12 mt-12 animate-reveal delay-3"> <div class="border border-[#1A1A1A] p-10 flex gap-12 items-center bg-white shadow-sm"> <div class="flex-1"> <span class="uppercase text-[10px] tracking-[0.4em] font-bold text-[#D4AF37] mb-2 block">Orion Intelligence Insight</span> <h2 class="serif text-4xl mb-6">Optimization Opportunity Identified</h2> <p class="text-sm leading-relaxed opacity-70 mb-8 max-w-2xl"> Based on your recent activities in the "Financial Governance" area, Orion suggests re-allocating assets from the Archive into the Q4 Projects folder to streamline the current audit process. Historical data indicates a 14% efficiency gain when resources are localized. </p> <button id="cta-insight-btn" class="btn-gold-slide px-10 py-3 uppercase text-[10px] tracking-[0.3em] font-bold"> Execute Reallocation </button> </div> <div class="w-1/3 aspect-[4/3] overflow-hidden"> <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=800" alt="Insight image" class="w-full h-full object-cover grayscale"> </div> </div> </section> </div> </main>  <aside class="w-16 border-l border-[#1A1A1A] flex flex-col items-center py-10 gap-10 hover:w-20 transition-all duration-700 bg-[#F9F8F6] z-40"> <div class="flex flex-col items-center gap-2 cursor-pointer group"> <iconify-icon icon="lucide:sparkles" class="text-xl text-[#D4AF37] group-hover:scale-110 transition-transform"></iconify-icon> </div> <div class="h-px w-8 bg-[#1A1A1A]/20"></div> <div class="flex flex-col items-center gap-1"> <span class="uppercase text-[10px] tracking-[0.5em] font-bold [writing-mode:vertical-lr] opacity-30">Orion Agent</span> </div> <div class="flex-1"></div> <button id="chat-expand-btn" class="mb-4 opacity-40 hover:opacity-100 transition-opacity"> <iconify-icon icon="lucide:chevron-left" class="text-lg"></iconify-icon> </button> </aside> </div> </div> </body> </html> ``` Generate the HTML for "Contacts List". The shared UI (nav, sidebar, footer) must be BYTE-FOR-BYTE identical to the source.

Use this prompt