{"id":"cf8cd07d-bff0-41dc-ab70-fa85750f6168","name":"FLORA","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","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","cssVariable":"--color-absolute-zero"},{"name":"Deep Charcoal","hex":"#191919","role":"Card surfaces, elevated backgrounds, and subtly darker button backgrounds — creates surface hierarchy on the dark canvas","group":"neutral","cssVariable":"--color-deep-charcoal"},{"name":"Off White","hex":"#eeeeee","role":"Primary text, headings, input text, ghost button borders, and iconography — high contrast against dark backgrounds","group":"neutral","cssVariable":"--color-off-white"},{"name":"Medium Gray","hex":"#606060","role":"Muted headings, secondary text, and fill for less prominent icons — provides a lower contrast textual element","group":"neutral","cssVariable":"--color-medium-gray"},{"name":"Light Gray","hex":"#b4b4b4","role":"Muted helper text, secondary borders, and subtle background elements — for granular text and subtle visual separation","group":"neutral","cssVariable":"--color-light-gray"},{"name":"Ash Gray","hex":"#7b7b7b","role":"Tertiary text, link text, ghost button borders, and decorative elements — lower prominence text and structural lines","group":"neutral","cssVariable":"--color-ash-gray"},{"name":"Dark Charcoal Outline","hex":"#303030","role":"Subtle card backgrounds and decorative strokes — adds a slight depth without strong contrast","group":"neutral","cssVariable":"--color-dark-charcoal-outline"},{"name":"Soft Gray","hex":"#bfbfbf","role":"Helper text and decorative borders — for very light cues against dark backgrounds","group":"neutral","cssVariable":"--color-soft-gray"},{"name":"Onyx Faint","hex":"#050505","role":"Subtle button borders and icon outlines — for minimal distinction on dark surfaces","group":"neutral","cssVariable":"--color-onyx-faint"},{"name":"Vivid Green","hex":"#71d083","role":"Green outline accent for tags, dividers, and focused UI edges.","group":"brand","cssVariable":"--color-vivid-green"}],"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"}],"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."]}}