{"id":"cf8cd07d-bff0-41dc-ab70-fa85750f6168","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/cf8cd07d-bff0-41dc-ab70-fa85750f6168","originalSiteUrl":"https://www.florafauna.ai","capturedAt":"2026-04-30T00:30:12.284Z","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":"FLORA","summary":"Midnight command center","description":"FLORA evokes a midnight command center atmosphere, blending stark functionality with subtle creative flair. It uses a predominantly dark theme with surfaces ranging from pure black to dark charcoal, accented by bright white text and subtle gray borders. Typography plays a central role, leveraging custom fonts with precise letter-spacing to create a crisp, almost whispered authority. Interactive elements are sparse, using ghost button styles and a singular vivid green accent for 'New' tags and hints of activation, maintaining a focus on content over heavy UI.","industry":"ai","colorScheme":"dark","colors":[{"name":"Absolute Zero","hex":"#000000","role":"Page backgrounds, primary text for inverted states, primary borders, image borders — defines the core dark canvas","group":"neutral"},{"name":"Deep Charcoal","hex":"#191919","role":"Card surfaces, elevated backgrounds, and subtly darker button backgrounds — creates surface hierarchy on the dark canvas","group":"neutral"},{"name":"Off White","hex":"#eeeeee","role":"Primary text, headings, input text, ghost button borders, and iconography — high contrast against dark backgrounds","group":"neutral"},{"name":"Medium Gray","hex":"#606060","role":"Muted headings, secondary text, and fill for less prominent icons — provides a lower contrast textual element","group":"neutral"},{"name":"Light Gray","hex":"#b4b4b4","role":"Muted helper text, secondary borders, and subtle background elements — for granular text and subtle visual separation","group":"neutral"},{"name":"Ash Gray","hex":"#7b7b7b","role":"Tertiary text, link text, ghost button borders, and decorative elements — lower prominence text and structural lines","group":"neutral"},{"name":"Dark Charcoal Outline","hex":"#303030","role":"Subtle card backgrounds and decorative strokes — adds a slight depth without strong contrast","group":"neutral"},{"name":"Soft Gray","hex":"#bfbfbf","role":"Helper text and decorative borders — for very light cues against dark backgrounds","group":"neutral"},{"name":"Onyx Faint","hex":"#050505","role":"Subtle button borders and icon outlines — for minimal distinction on dark surfaces","group":"neutral"},{"name":"Vivid Green","hex":"#71d083","role":"Green outline accent for tags, dividers, and focused UI edges.","group":"brand"}],"typography":[{"role":"Primary workhorse font for body text, interactive elements, and navigation. Its precise tracking and custom features give a modern, technical precision, feeling both sharp and readable.","sizes":"8px, 11px, 12px, 14px, 15px, 16px, 20px, 22px, 30px, 60px, 80px","family":"Geist","weight":"400, 500, 600","weights":[400,500,600],"lineHeight":"1.00, 1.10, 1.20, 1.37, 1.40, 1.50","substitute":"Inter","letterSpacing":"-0.0300em","fontFeatureSettings":"\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\""},{"role":"Used for specific body text elements requiring either lighter or bolder emphasis. Its variable nature allows for nuanced brand expression where needed.","sizes":"14px","family":"Geist Variable","weight":"400, 700","weights":[400,700],"lineHeight":"1.00","substitute":"Inter","letterSpacing":"0.0290em"},{"role":"Used for prominent section headings. Its robust weight and tight tracking command attention without being overly loud, providing a confident, clear statement in a dark UI.","sizes":"22px","family":"Satoshi","weight":"700","weights":[700],"lineHeight":"1.15","substitute":"Montserrat","letterSpacing":"-0.0300em"},{"role":"Distinctive display font for hero sections and key marketing headlines. The italic style and unique name suggest a bespoke, artistic touch that counters the functional aesthetic of Geist, conveying creativity.","sizes":"42px","family":"Redaction 50 Italic","weight":"400","weights":[400],"lineHeight":"1.00","substitute":"PT Serif Italic","letterSpacing":"-0.0240em"},{"role":"Companion display font for major headlines, offering a more stable counterpart to the italic version. The extremely tight letter-spacing gives a compressed, impactful feel.","sizes":"42px","family":"Redaction 10 Regular","weight":"400","weights":[400],"lineHeight":"1.10","substitute":"PT Serif","letterSpacing":"-0.0360em"},{"role":"Fallback and utilitarian text for lists and general UI elements. Ensures basic readability where custom fonts are not critical.","sizes":"12px","family":"sans-serif","weight":"400","weights":[400],"lineHeight":"1.20","substitute":"system-ui","letterSpacing":"normal"}],"typeScale":[{"role":"heading","size":20,"lineHeight":1.2,"letterSpacing":-0.025},{"role":"heading-lg","size":22,"lineHeight":1.15,"letterSpacing":-0.03},{"role":"display-sm","size":30,"lineHeight":1.2,"letterSpacing":-0.03},{"role":"display","size":42,"lineHeight":1.1,"letterSpacing":-0.036},{"role":"display-lg","size":60,"lineHeight":1.1,"letterSpacing":-0.03},{"role":"display-xl","size":80,"lineHeight":1.1,"letterSpacing":-0.03}],"spacing":{"radius":{"pill":"999px","cards":"10px","input":"12px","buttons":"9999px","default":"10px"},"elementGap":"4px","sectionGap":"48px","cardPadding":"24px","pageMaxWidth":"1200px"},"radius":{"pill":"999px","cards":"10px","input":"12px","buttons":"9999px","default":"10px"},"shadows":{"surfaces":[{"hex":"#000000","name":"Canvas","level":0,"purpose":"The foundational background for the entire page, providing a deep, immersive dark theme."},{"hex":"#191919","name":"Base Card","level":1,"purpose":"Used for standard cards and major content blocks, offering a slightly lighter dark surface for visual hierarchy."},{"hex":"#303030","name":"Elevated Card","level":2,"purpose":"For cards requiring more distinction or visual lift, creating a subtle third dimension without shadows."}]},"guidelines":{"do":["Prioritize Absolute Zero (#000000) for page backgrounds and Deep Charcoal (#191919) for card surfaces to maintain the dominant dark theme.","Use Off White (#eeeeee) for all primary text, headings, and essential UI elements for readability and high contrast.","Apply Geist as the primary typeface for body text and interactive elements, leveraging its custom features for precise control like 'blwf', 'cv03', 'cv04', 'cv09', 'cv11'.","Maintain a compact horizontal padding of 14px for buttons and 10px or 12px for interactive elements to create a dense, functional feel.","Utilize a 9999px border-radius for all primary buttons and tags to create a distinct pill shape.","Reserve Vivid Green (#71d083) exclusively for 'New' tags and subtle, functional accents, avoiding overuse to preserve its impact.","Employ a base unit of 4px for all spacing decisions, creating a compact and consistent element distribution."],"dont":["Avoid using bright or overly saturated colors for large surface areas; color should primarily serve as functional highlight or subtle accent.","Do not introduce heavy box shadows or strong elevation effects; maintain the predominantly flat, dark aesthetic.","Do not vary line-heights significantly for body text; keep type compact and precise.","Never use generic sans-serif fonts where Geist is specified; the unique letter-spacing and features of Geist are integral to the brand identity.","Avoid wide padding on cards or sections, as the design prioritizes a compact, information-dense layout.","Do not use dark text colors on mid-tone gray backgrounds, as contrast will be insufficient for this dark theme.","Do not use bold weights indiscriminately; the system mostly relies on lighter or regular weights, with specific heavier weights for structured data or distinct headings."]},"components":[{"name":"Ghost Navigation Button","role":"Navigational elements in the header and sub-menus."},{"name":"Outlined Pill Button (Dense)","role":"Compact secondary actions and filters."},{"name":"Outlined Rounded Button (Compact)","role":"Informational or tertiary actions."},{"name":"Primary CTA Button","role":"Main call to action, stand-alone buttons for key interactions."},{"name":"Default Card","role":"Content containers for features, showcases, or related information."},{"name":"Elevated Card","role":"Specialized cards requiring slightly more visual emphasis, like primary showcase items."},{"name":"Text Input (Underlined)","role":"User input fields that blend into the dark canvas."},{"name":"New Tag","role":"Highlights new features or content."}],"customSections":[{"title":"Agent Prompt Guide","content":"**Quick Color Reference**\ntext: #eeeeee\nbackground: #000000\nborder: #7b7b7b\naccent: #71d083\nprimary action: #000000 (filled action)\n\n**3-5 Example Component Prompts**\n1. Create a hero section with a centered text input: background Absolute Zero (#000000). Headline 'What should we make?' in Redaction 50 Italic, size 42px, color Off White (#eeeeee), letter-spacing -0.024em. Below, a text input field styled as Text Input (Underlined), with color Off White (#eeeeee) and a placeholder text 'Shoot an on-figure editorial...'.\n2. Design a feature card displaying '01 Ideate': Background Deep Charcoal (#191919), borderRadius 10px. The number '01' should use Satoshi, size 22px, weight 700, color Off White (#eeeeee). The title 'Ideate' should use Satoshi, size 22px, weight 700, color Off White (#eeeeee), letter-spacing -0.030em. Include a description text in Geist, size 14px, weight 400, color Light Gray (#b4b4b4), on Deep Charcoal background.\n3. Create a Primary Action Button: #000000 background, #eeeeee text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n4. Create a compact tag: text 'New' in Geist, size 12px, weight 400, color Off White (#eeeeee) on a Vivid Green (#71d083) background, with a borderRadius of 9999px and 2px 6px padding."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777508979883-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777508979883-thumb.jpg"},"similarStyleIds":["461da0f0-fde6-46bc-8137-7eca006260a8","3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc","e81d4724-9615-4159-8678-cef35f986cab","8c3f2805-dfce-4edd-8a9c-946bee4f1cff","4d4772a3-e1da-415f-a6d7-658dcefdcecd","34baa524-5d5b-4165-bbab-d01f05e6d6b9","8401cb26-91a3-4b46-941e-1c75790821eb","f532c703-1179-465d-9933-7736df44d0ae","c3ceca5c-d329-4559-b947-016172941ba2","30c3aa18-4323-4448-8ddd-3ca933fe5780","d3caa7bf-2e2e-489a-845d-5cab274e7a92","7c4e9339-591c-46c3-ac3d-20c1b5b5a568","4e1ac04c-02ae-41cf-b588-3f6226a882f8","225059ac-0450-49d3-b2b7-d0e98b7ae938","a1b78a21-a304-482b-8ce5-f612d95d44fe","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","a0630421-7b66-48b4-aa14-6194a3b2c2b9","8df07af7-5935-405f-a2df-65fbf9ca3db9","733e6475-892a-4138-8835-bf40344df317","108e2695-6970-47d5-b5b0-eea8fc34e048"],"exports":{"designMdUrl":"/references/refero/cf8cd07d-bff0-41dc-ab70-fa85750f6168/design.md","tokensJsonUrl":"/references/refero/cf8cd07d-bff0-41dc-ab70-fa85750f6168/tokens.json","tailwindV4Url":"/references/refero/cf8cd07d-bff0-41dc-ab70-fa85750f6168/tailwind-v4.css","cssVariablesUrl":"/references/refero/cf8cd07d-bff0-41dc-ab70-fa85750f6168/tailwind-v4.css"}}