{"id":"81afaa5c-73ac-4ef4-9a99-296da325ea6c","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/81afaa5c-73ac-4ef4-9a99-296da325ea6c","originalSiteUrl":"https://perplexity.ai","capturedAt":"2026-04-11T16:07:53.579Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Perplexity AI","summary":"Ivory Desk, Graphite Tools — a pristine, brightly lit workspace filled with essential gray instruments.","description":"This system projects an academic, almost clinical, aesthetic through a severely limited palette of desaturated off-whites and dark grays, creating an atmosphere of focused utilitarianism. The meticulous use of varying gray tones defines clear information hierarchy and interaction states without relying on strong color accents. Sharp corners mix with extreme pill-shaped elements, establishing a visual tension between precise structure and approachable interaction, characteristic of AI tools balancing complexity with user-friendliness.","tags":["minimal","utilitarian","typographic","monochromatic","compact","clean","informational","app-like"],"industry":"ai","colorScheme":"light","colors":[{"name":"Inkwell","hex":"#000000","role":"Primary text, interactive icons, active states – commands immediate attention against the subtle backgrounds.","group":"neutral"},{"name":"Paper White","hex":"#FFFFFF","role":"Main page background, pristine canvas for content. The brightest neutral.","group":"neutral"},{"name":"Parchment","hex":"#FAF8F5","role":"Interactive element backgrounds like search bars and buttons in inactive states, providing a soft contrast to the main background.","group":"neutral"},{"name":"Graphite","hex":"#27251","role":"Secondary text, subtle backgrounds for elevated elements, and borders for input fields – registers as dark but softer than pure black.","group":"neutral"},{"name":"Faded Stone","hex":"#92918B","role":"Placeholder text, subtle contextual information, providing low-contrast visual guiding.","group":"neutral"},{"name":"Dusk Gray","hex":"#72706B","role":"Tertiary text, inactive icons, divider lines – defines softer visual cues and non-critical information.","group":"neutral"}],"typography":[{"role":"All text elements, including body, navigation, and headings. Its use across all types creates a cohesive, restrained tone. The custom font contributes to a distinctive feel, avoiding common system fonts for a unique subtle character.","sizes":"12px, 14px, 16px","family":"pplxSans","weight":"400, 500","lineHeight":"1.33, 1.43, 1.50, 2.00","substitute":"Inter","letterSpacing":"normal"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.5},{"role":"body-sm","size":14,"lineHeight":1.5},{"role":"body","size":16,"lineHeight":1.5}],"spacing":{"radius":{"cards":"16px","inputs":"8px","buttons":"9999px","navigation":"8px"},"elementGap":"8px","sectionGap":"32px","cardPadding":"12px"},"radius":{"cards":"16px","inputs":"8px","buttons":"9999px","navigation":"8px"},"shadows":{"philosophy":"This design systematically avoids strong shadows or complex elevation schemes. Instead, surface differentiation and hierarchy are established primarily through subtle color variations between closely related neutrals (Paper White, Parchment, Graphite). This approach maintains a flat, precise, and understated aesthetic, focusing user attention on content and interaction logic rather than visual depth effects."},"guidelines":{"do":["Prioritize Graphite (#27251E) for secondary text and subtle UI elements to maintain a restrained aesthetic.","Use Paper White (#FFFFFF) as the predominant background, with Parchment (#FAF8F5) for interactive surfaces to create depth without strong shadows.","Apply 9999px border-radius to all interactive buttons and tags for a distinctive pill shape.","Maintain 8px border-radius for input fields and active navigation items to denote interactive, contained elements.","Use Inkwell (#000000) exclusively for primary text and critical interactive icons for maximum clarity and contrast.","Ensure 4px vertical padding for list items and 8px for internal element gaps to maintain a compact density.","Use the `pplxSans` font at weight 400 for all body and informational text for consistent tone."],"dont":["Avoid chromatic colors; this system relies exclusively on shades of gray and off-white.","Do not use box-shadows that are anything other than extremely subtle; surface differentiation comes from color variants, not elevation.","Do not introduce square buttons or elements if they contain interactive copy or serve as primary actions; use the 9999px radius.","Do not vary font families; stick strictly to `pplxSans` (or 'Inter') for all typographic elements.","Do not use font weights other than 400 or 500.","Avoid large spacing values; the design emphasizes information density with 4px and 8px increments."]},"components":[{"name":"Search Input Field","role":""},{"name":"Sidebar Navigation Menu","role":""},{"name":"Try Computer Suggestion Cards","role":""},{"name":"Primary Navigation Item (Active)","role":"Indicates current selected item in the sidebar navigation."},{"name":"Primary Navigation Item (Inactive)","role":"Non-selected items in the sidebar navigation."},{"name":"Search Input Field","role":"Main input area for user queries."},{"name":"Pill Button (Default)","role":"General action button with a rounded style."},{"name":"Pill Button (Accent)","role":"Interactive elements within the search bar or filter tags."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text (Primary): #000000 (Inkwell)\n- Background (Page): #FFFFFF (Paper White)\n- Background (Surface/Active Nav): #FAF8F5 (Parchment)\n- Text (Secondary): #27251 (Graphite)\n- Border/Input Placeholder: #92918B (Faded Stone)\n\n### Example Component Prompts\n1. Create a `Primary Navigation Item (Active)`: Background Parchment (#FAF8F5), Text Inkwell (#000000), Border Radius 8px, Padding 4px vertical 12px horizontal. Use `pplxSans` 400 at 16px.\n2. Create a `Search Input Field`: Background Parchment (#FAF8F5), Border Radius 8px. Left padding 16px, Right padding 12px. Placeholder text Faded Stone (#92918B). Use `pplxSans` 400 at 16px.\n3. Create a `Pill Button (Accent)`: Background Graphite (#27251E), Text Paper White (#FDFBFA), Border Radius 9999px, Padding 0px. Use `pplxSans` 400 at 14px.\n4. Design a `Prompt Suggestion Card` with content 'Try Computer'. Background Paper White (#FFFFFF), Border Radius 16px, Padding 16px. Text Faded Stone (#92918B) `pplxSans` 400 at 14px."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775923655550-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775923655550-thumb.jpg"},"similarStyleIds":["2e67105f-9f9a-45b5-9281-29734e753bd6","7c4e9339-591c-46c3-ac3d-20c1b5b5a568","52a007ed-ad1b-46a6-bd44-b76f91df6d0c","dc541737-8bf2-4b31-b729-0352f696e82f","461da0f0-fde6-46bc-8137-7eca006260a8","ddd9ffaa-d831-4cb4-a5bf-a1efce421dca","64aadcc7-f884-41ea-9b0b-a90dfc10c9ec","626ae2de-c402-4805-b859-2c6adca41022","32845f27-6b24-48be-af25-8e664f826b30","3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc","225059ac-0450-49d3-b2b7-d0e98b7ae938","8d4a4e15-31f1-4509-8d13-7746f85c20d7","9fe9f106-44d2-45fc-9873-10c6ddcfa59b","f532c703-1179-465d-9933-7736df44d0ae","68d18deb-bb09-4258-8024-001af9c844c0","08c8700c-f278-42bc-812e-f60dc6ce996e","a6950b49-8ce4-4330-9499-26ca08061599","13d6fc89-eba2-4724-ac37-20f4f2e5efec","a1b78a21-a304-482b-8ce5-f612d95d44fe","5bfbe8b0-de0e-470f-b130-929f50437160"],"exports":{"designMdUrl":"/references/refero/81afaa5c-73ac-4ef4-9a99-296da325ea6c/design.md","tokensJsonUrl":"/references/refero/81afaa5c-73ac-4ef4-9a99-296da325ea6c/tokens.json","tailwindV4Url":"/references/refero/81afaa5c-73ac-4ef4-9a99-296da325ea6c/tailwind-v4.css","cssVariablesUrl":"/references/refero/81afaa5c-73ac-4ef4-9a99-296da325ea6c/tailwind-v4.css"}}