{"id":"0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","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","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":"Ui","summary":"Monochromatic architectural blueprint – precise, functional forms on a stark, bright canvas.","description":"This design system feels like a finely tuned machine, presenting a clean and precise interface with a stark black-and-white aesthetic. The visual mood is serious and functional, achieved through a dominant achromatic palette and very subtle elevation. Geometric balance is created by mixing hard 10-14px radii for cards and inputs with highly rounded (near-pill) buttons and badges, suggesting both structure and approachability. The use of a custom sans-serif font across all elements with meticulous letter-spacing creates a unified, crisp typographic voice.","industry":"ai","colorScheme":"light","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page background, primary card surfaces, popovers. The foundational bright base.","group":"neutral"},{"name":"Ghost Gray","hex":"#f2f2f2","role":"Secondary background for segmented sections or subtle card differentiation. Lighter than default background.","group":"neutral"},{"name":"Subtle Ash","hex":"#e5e5e5","role":"Border colors for inputs, cards, and dividers. Provides definition without harshness.","group":"neutral"},{"name":"Midtone Gray","hex":"#737373","role":"Muted text, placeholder text in inputs, secondary icons. Recedes into the background.","group":"neutral"},{"name":"Rich Black","hex":"#0a0a0a","role":"Primary text color for body copy, standard icons, badges with white text. High contrast for readability.","group":"neutral"},{"name":"Deep Black","hex":"#000000","role":"Headings, active state button backgrounds, highlighted text. The darkest tone for strong emphasis.","group":"neutral"},{"name":"Callout Red","hex":"#c22b10","role":"Destructive actions, error states. A muted, serious red.","group":"semantic"},{"name":"Success Green","hex":"#10c22b","role":"Success states, positive confirmations. A muted, serious green.","group":"semantic"}],"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"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.5,"letterSpacing":0},{"role":"body","size":14,"lineHeight":1.43,"letterSpacing":0},{"role":"heading","size":18,"lineHeight":1.33,"letterSpacing":-0.45},{"role":"display","size":48,"lineHeight":1,"letterSpacing":-2.4}],"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."]},"components":[{"name":"Primary Action Button","role":"Call to action."},{"name":"Ghost Button","role":"Secondary or tertiary actions, often within groups."},{"name":"Split Button Left","role":"Left segment of a grouped button control."},{"name":"Split Button Right","role":"Right segment of a grouped button control."},{"name":"Elevated Card","role":"Containers for distinct content blocks, forms, or data."},{"name":"Plain Input Field","role":"Standard text input."},{"name":"Segmented Input Left","role":"Left segment of a grouped input control."},{"name":"Inverse Tag Badge","role":"Highlighting status or category, with high contrast."},{"name":"Neutral Tag Badge","role":"Subtle categorization or status."},{"name":"Outline Tag Badge","role":"Very subtle categorization or option."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- **Text Primary:** #0a0a0a\n- **Text Muted:** #737373\n- **Background:** #ffffff\n- **CTA Background:** #000000\n- **Border:** #e5e5e5\n- **Accent (Semantic Red):** #c22b10\n\n### Example Component Prompts\n1. **Create a Hero Section:** Canvas White (#ffffff) background. Headline 'The Foundation for your Design System' in Geist weight 600, 48px, line-height 1.0, letter-spacing -2.4px, color Deep Black (#000000). Subtext 'A set of beautifully designed components that you can customize...' in Geist weight 400, 18px, line-height 1.33, letter-spacing -0.45px, color Rich Black (#0a0a0a). Below this, a Primary Action Button labeled 'New Project' and a Ghost Button labeled 'View Components'. Section gap 83px.\n2. **Generate an Elevated Card:** Canvas White (#ffffff) background, 14px border-radius, with shadow 'oklab(0.145 -0.00000143796 0.00000340492 / 0.1) 0px 0px 0px 1px'. Inside, use 16px internal padding. Title 'Payment Method' in Geist weight 500, 16px, Rich Black (#0a0a0a). Body text 'All transactions are secure...' in Geist weight 400, 14px, Midtone Gray (#737373). Include a Plain Input Field with label 'Name on Card'.\n3. **Design a Form Input Group:** Two segmented input fields. The first is a Segmented Input Left for 'Card Number', with placeholder '1234 5678 9012 3456'. The second is a Plain Input Field for 'CVV', placeholder '123'. Both bordered with Subtle Ash (#e5e5e5).\n4. **Create a Navigation Bar:** Canvas White (#ffffff) background. Left aligned: 'Docs', 'Components', 'Blocks', 'Charts', 'Directory', 'Create' as text links in Geist weight 400, 14px, Rich Black (#0a0a0a). Right aligned: a Plain Input Field 'Search documentation...' and a Primary Action Button labeled '+ New'. Elements within the nav should have 8px element gap between them."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776366980055-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776366980055-thumb.jpg"},"similarStyleIds":["62b22816-2d98-4e98-9c17-bf600ddb2fc8","75fdb89f-ca64-41b3-af36-7a78bd09448e","186775da-7568-49e5-8110-4fd0bbc7bbe3","7337d65c-9a98-4b0f-b8bb-6f470742af98","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","e549766e-b8b1-48a2-bd72-8cc04e9e4e9d","50aa2b8e-4760-4379-a3c1-59b65d8576a7","63cd6fbc-c3f1-4fd4-9115-70300bc07adc","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","12255b63-e506-4bc1-a4cd-d05487de32f3","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","ba07accb-b2cc-4ad9-a25f-c50b0f90f34e","a1b78a21-a304-482b-8ce5-f612d95d44fe","4caadb3c-3865-4a4d-9e1a-46478ac71078","68d18deb-bb09-4258-8024-001af9c844c0","d9a60077-619a-4cb7-95ed-0c428c2b51ed","b8a8976c-52d9-4ebb-95ea-4c40f4a9acab","9501cfdc-3eb3-4b64-90f6-9afdded48945","3389358b-68b2-4fca-82a8-52c07b3a3475","c11797c6-ceb2-4b57-a0ea-0c349d13b38c"],"exports":{"designMdUrl":"/references/refero/0fd67ec5-7e9c-4ca9-b368-5d9c7388477a/design.md","tokensJsonUrl":"/references/refero/0fd67ec5-7e9c-4ca9-b368-5d9c7388477a/tokens.json","tailwindV4Url":"/references/refero/0fd67ec5-7e9c-4ca9-b368-5d9c7388477a/tailwind-v4.css","cssVariablesUrl":"/references/refero/0fd67ec5-7e9c-4ca9-b368-5d9c7388477a/tailwind-v4.css"}}