{"id":"0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","name":"Ui","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/0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","originalSiteUrl":"https://ui.shadcn.com","capturedAt":"2026-04-16T19:16:42.279Z","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page background, primary card surfaces, popovers. The foundational bright base.","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Ghost Gray","hex":"#f2f2f2","role":"Secondary background for segmented sections or subtle card differentiation. Lighter than default background.","group":"neutral","cssVariable":"--color-ghost-gray"},{"name":"Subtle Ash","hex":"#e5e5e5","role":"Border colors for inputs, cards, and dividers. Provides definition without harshness.","group":"neutral","cssVariable":"--color-subtle-ash"},{"name":"Midtone Gray","hex":"#737373","role":"Muted text, placeholder text in inputs, secondary icons. Recedes into the background.","group":"neutral","cssVariable":"--color-midtone-gray"},{"name":"Rich Black","hex":"#0a0a0a","role":"Primary text color for body copy, standard icons, badges with white text. High contrast for readability.","group":"neutral","cssVariable":"--color-rich-black"},{"name":"Deep Black","hex":"#000000","role":"Headings, active state button backgrounds, highlighted text. The darkest tone for strong emphasis.","group":"neutral","cssVariable":"--color-deep-black"},{"name":"Callout Red","hex":"#c22b10","role":"Destructive actions, error states. A muted, serious red.","group":"semantic","cssVariable":"--color-callout-red"},{"name":"Success Green","hex":"#10c22b","role":"Success states, positive confirmations. A muted, serious green.","group":"semantic","cssVariable":"--color-success-green"}],"typography":[{"role":"Primary brand font for all UI text, headings, and body. Its varied weights and precise tracking create a modern, technical feel.","sizes":"12px, 13px, 14px, 16px, 18px, 48px","family":"Geist","weight":"400, 500, 600","weights":["400","500","600"],"lineHeight":"1.00, 1.10, 1.20, 1.33, 1.38, 1.43, 1.50, 1.56, 1.63, 2.00","substitute":"Inter","letterSpacing":"-0.0500em at 48px, -0.0250em at 18px"},{"role":"Used for code snippets or specific input fields requiring monospaced characters. Reinforces a technical aesthetic.","sizes":"14px","family":"Geist Mono","weight":"400","weights":["400"],"lineHeight":"1.43","substitute":"IBM Plex Mono","letterSpacing":"normal"}],"spacing":{"radius":{"pill":"9999px","badge":"26px","cards":"14px","input":"10px","buttons":"10px","default":"10px"},"elementGap":"8px","sectionGap":"83px","cardPadding":"16px"},"radius":{"pill":"9999px","badge":"26px","cards":"14px","input":"10px","buttons":"10px","default":"10px"},"shadows":{"surfaces":[{"hex":"#ffffff","name":"Canvas White","level":0,"purpose":"Primary page background and base surface for most content."},{"hex":"#ffffff","name":"Elevated Card","level":1,"purpose":"Content cards and distinct sections that require a subtle lift, defined by borders or minimal shadow."},{"hex":"#ffffff","name":"Search/Input Field","level":2,"purpose":"Interactive elements like search bars and inputs, often bordered."},{"hex":"#ffffff","name":"Popovers/Overlays","level":3,"purpose":"Transient UI elements that appear above other content."},{"hex":"#f2f2f2","name":"Ghost Gray Background","level":4,"purpose":"Used as a background color for secondary buttons or badges, indicating a slightly lower hierarchy."}]},"guidelines":{"do":["Use Deep Black (#000000) for primary headings and active states to command attention.","Apply Subtle Ash (#e5e5e5) for all primary borders and dividers to maintain a subtle visual separation.","Ensure input fields and cards consistently use a 10px or 14px border-radius, respectively, for geometric stability.","Employ Geist font universally, leveraging its 400, 500, and 600 weights to establish clear hierarchy without introducing new typefaces.","Maintain a default element gap of 8px, but use 16px for card inner padding to create adequate breathing room for content.","Utilize 9999px or 26px border-radius for all interactive buttons and badges to create a soft, approachable pill shape."],"dont":["Avoid using highly saturated colors; stick to the achromatic scale and the two semantic reds and greens.","Do not introduce additional font families; the current choices are sufficient for all typographic needs.","Refrain from using strong, multi-directional shadows; rely on minimal 1px shadows or simple borders for elevation.","Do not deviate from the established border-radius values; the mix of sharp 0px (in split elements), 10px, 14px, and 9999px is intentional.","Don't add excessive padding or margin; the design favors a compact density with specific, calculated spacing.","Avoid decorative gradients; the brand's aesthetic is built on flat colors and subtle depth."]}}