{"id":"81afaa5c-73ac-4ef4-9a99-296da325ea6c","name":"Perplexity AI","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","colors":[{"name":"Inkwell","hex":"#000000","role":"Primary text, interactive icons, active states – commands immediate attention against the subtle backgrounds.","group":"neutral","cssVariable":"--color-inkwell"},{"name":"Paper White","hex":"#FFFFFF","role":"Main page background, pristine canvas for content. The brightest neutral.","group":"neutral","cssVariable":"--color-paper-white"},{"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","cssVariable":"--color-parchment"},{"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","cssVariable":"--color-graphite"},{"name":"Faded Stone","hex":"#92918B","role":"Placeholder text, subtle contextual information, providing low-contrast visual guiding.","group":"neutral","cssVariable":"--color-faded-stone"},{"name":"Dusk Gray","hex":"#72706B","role":"Tertiary text, inactive icons, divider lines – defines softer visual cues and non-critical information.","group":"neutral","cssVariable":"--color-dusk-gray"}],"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"}],"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."]}}