{"id":"ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","name":"Things","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/ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","originalSiteUrl":"https://culturedcode.com/things","capturedAt":"2026-04-11T16:48:13.143Z","colors":[{"name":"Midnight Ink","hex":"#303336","role":"Primary text, deep accents, interactive states for headings.","group":"neutral","cssVariable":"--color-midnight-ink"},{"name":"Charcoal Text","hex":"#44474b","role":"Secondary text, descriptive body copy.","group":"neutral","cssVariable":"--color-charcoal-text"},{"name":"Storm Gray","hex":"#55606","role":"Tertiary text, subtle borders, inactive link states.","group":"neutral","cssVariable":"--color-storm-gray"},{"name":"Subtle Ash","hex":"#838b96","role":"Placeholder text, minor labels, light gray borders for contrast.","group":"neutral","cssVariable":"--color-subtle-ash"},{"name":"Silver Mist","hex":"#9299a4","role":"Fainter secondary text, subtle dividers.","group":"neutral","cssVariable":"--color-silver-mist"},{"name":"Off-White Canvas","hex":"#ffffff","role":"Main page backgrounds, input fields, primary elevated surfaces.","group":"neutral","cssVariable":"--color-off-white-canvas"},{"name":"Cloud Gray","hex":"#f2f5f7","role":"Card backgrounds, section separators, subtle background shifts.","group":"neutral","cssVariable":"--color-cloud-gray"},{"name":"Frost Border","hex":"#dfe3e8","role":"Input element borders, subtle separators.","group":"neutral","cssVariable":"--color-frost-border"},{"name":"Ocean Blue","hex":"#2576eb","role":"Active link states, primary interactive elements, icon accents — a vivid anchor.","group":"brand","cssVariable":"--color-ocean-blue"},{"name":"Sky Link Blue","hex":"#5c9cf5","role":"Hover states for links, secondary interactive elements — a slightly softer, yet still vibrant, indicator.","group":"brand","cssVariable":"--color-sky-link-blue"},{"name":"Action Button Blue","hex":"#4f91fb","role":"Primary Call-to-Action button background — a stable, deep blue that signifies action.","group":"brand","cssVariable":"--color-action-button-blue"}],"typography":[{"role":"The sole typeface, maintaining visual unity across all elements from headings to body text and UI components. Its system-font nature provides native OS feel and fast loading.","sizes":"13px, 14px, 15px, 16px, 17px, 18px, 20px, 24px, 36px","family":"ui-sans-serif","weight":"400, 600, 700, 800","lineHeight":"1.00, 1.20, 1.25, 1.30, 1.35, 1.40, 1.60","substitute":"system-ui, sans-serif","letterSpacing":"normal"}],"spacing":{"radius":{"cards":"18px","icons":"3px","inputs":"6px","buttons":"6px","hero-label":"12.8px"},"elementGap":"4-14px","sectionGap":"48px","cardPadding":"18px","pageMaxWidth":"900px"},"radius":{"cards":"18px","icons":"3px","inputs":"6px","buttons":"6px","hero-label":"12.8px"},"shadows":{"philosophy":"Elevation is used sparingly and subtly, providing just enough visual separation to indicate a raised element without heavy shadows. The primary technique involves a soft, diffused shadow to gently lift content, maintaining the design's overall lightness and crispness rather than creating deep spatial depth."},"guidelines":{"do":["Use Midnight Ink (#303336) for all primary headings and major text elements to maintain high contrast and visual weight.","Apply Cloud Gray (#f2f5f7) as a background for distinct content sections or cards to create clear visual separation.","Reserve Ocean Blue (#2576eb) for critical interactive elements like active links, primary icons, and CTA text to guide user focus.","Use a consistent border-radius of 6px for all functional elements like buttons and input fields to ensure a cohesive interactive experience.","Ensure generous vertical spacing between sections, using multiples of the 12px token to establish a comfortable content density."],"dont":["Do not introduce new color hues; strictly adhere to the defined grays and blues to preserve the system’s crisp and minimalist aesthetic.","Avoid arbitrary border-radii; use 3px for icons, 6px for buttons/inputs, and 18px for cards, and 12.8px for select larger elements.","Do not use box-shadows liberally; limit to the subtle rgba(0, 0, 0, 0.1) 0px 2px 8px 0px for single-level elevation.","Do not vary font families; maintain the system's reliance on ui-sans-serif for all text to ensure consistent typography and OS integration.","Avoid dense packing of content; ensure minimum element gaps of 4px and significant section gaps with 48px to allow content to breathe."]}}