{"id":"ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","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","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":"Things","summary":"organized desktop, clean and bright","description":"This design system evokes a sense of calm efficiency, like a meticulously organized desktop with clean lines and subtle visual cues. The primary visual identity is built around shades of cool gray and a vibrant, yet restrained, blue. High contrast text on light backgrounds prioritizes readability, while carefully applied rounded corners and a singular, subtle shadow provide a touch of visual softness without compromising the overall crispness. The experience feels grounded and clear, guiding the user with precision.","tags":["clean","minimalist","task-manager","productivity","software","blue-accent","high-contrast","system-fonts","light-theme"],"industry":"productivity","colorScheme":"light","colors":[{"name":"Midnight Ink","hex":"#303336","role":"Primary text, deep accents, interactive states for headings.","group":"neutral"},{"name":"Charcoal Text","hex":"#44474b","role":"Secondary text, descriptive body copy.","group":"neutral"},{"name":"Storm Gray","hex":"#55606","role":"Tertiary text, subtle borders, inactive link states.","group":"neutral"},{"name":"Subtle Ash","hex":"#838b96","role":"Placeholder text, minor labels, light gray borders for contrast.","group":"neutral"},{"name":"Silver Mist","hex":"#9299a4","role":"Fainter secondary text, subtle dividers.","group":"neutral"},{"name":"Off-White Canvas","hex":"#ffffff","role":"Main page backgrounds, input fields, primary elevated surfaces.","group":"neutral"},{"name":"Cloud Gray","hex":"#f2f5f7","role":"Card backgrounds, section separators, subtle background shifts.","group":"neutral"},{"name":"Frost Border","hex":"#dfe3e8","role":"Input element borders, subtle separators.","group":"neutral"},{"name":"Ocean Blue","hex":"#2576eb","role":"Active link states, primary interactive elements, icon accents — a vivid anchor.","group":"brand"},{"name":"Sky Link Blue","hex":"#5c9cf5","role":"Hover states for links, secondary interactive elements — a slightly softer, yet still vibrant, indicator.","group":"brand"},{"name":"Action Button Blue","hex":"#4f91fb","role":"Primary Call-to-Action button background — a stable, deep blue that signifies action.","group":"brand"}],"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"}],"typeScale":[{"role":"caption","size":13,"lineHeight":1.4},{"role":"body","size":16,"lineHeight":1.6},{"role":"subheading","size":18,"lineHeight":1.35},{"role":"heading","size":24,"lineHeight":1.25},{"role":"display","size":36,"lineHeight":1.2}],"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."]},"components":[{"name":"Watch Introduction Video Button","role":""},{"name":"Simply Powerful Section Card","role":""},{"name":"App Sidebar Navigation Card","role":""},{"name":"Primary Action Button","role":"Call to action."},{"name":"Section Separator Card","role":"Organizing content blocks."},{"name":"Default Card","role":"General content display."},{"name":"Text Input Field","role":"User data input."},{"name":"Navigation Link","role":"Top navigation."},{"name":"Watch Video Button","role":"Auxiliary action, media launch."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text: #303336\n- Background: #ffffff\n- CTA Button: #4f91fb\n- Card Background: #f2f5f7\n- Link: #2576eb\n\n### Example Component Prompts\n1. Create a primary action button: text 'Learn More', background #4f91fb, text color #ffffff, border-radius 6px, padding 7px 17px.\n2. Design a feature card: background #f2f5f7, border-radius 18px, padding 18px. Place a heading at 24px weight 700 and body text at 16px weight 400, both using #303336.\n3. Implement a text input field: background #ffffff, border-color #dfe3e8, border-radius 6px, padding 8px. Placeholder text in #838b96.\n4. Build a hero section (max-width 900px, centered): main heading 'Things' at 36px weight 800 #303336. Subtext 'Things is the award-winning...' at 18px weight 400 #44474b. Below, a 'Watch Introduction Video' link: text #2576eb, 18px weight 600, with a play icon."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775926077211-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775926077211-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0-1777561673612-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0-1777561673612-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0-1777561673612-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0-1777561673612-preview-detail-poster.jpg"},"similarStyleIds":["68d18deb-bb09-4258-8024-001af9c844c0","a48ef430-8c6a-42d8-8c53-ab7bb43cf33b","62b22816-2d98-4e98-9c17-bf600ddb2fc8","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","12255b63-e506-4bc1-a4cd-d05487de32f3","c11797c6-ceb2-4b57-a0ea-0c349d13b38c","11cfc460-807b-42c5-b10a-7b042c60f3e8","537641a0-5a24-4203-ae9b-cd29516aa3f8","742b500d-3e10-4daa-bb89-d0d26272e5f6","80085ab0-3123-4bf3-85e0-ea9a1438c2ab","0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","47c9e353-bed3-4d6c-8316-63a2db5cc377","d3289fe7-a85e-42d8-96b7-eb7faa62a104","b8a8976c-52d9-4ebb-95ea-4c40f4a9acab","4caadb3c-3865-4a4d-9e1a-46478ac71078","a4f123f2-cd4b-4d26-998f-a3d3ee158024","9342e89b-c2fe-4acf-9993-53b44e0c13b5","63bd1ed9-b161-45fd-8734-85282bd945ec"],"exports":{"designMdUrl":"/references/refero/ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0/design.md","tokensJsonUrl":"/references/refero/ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0/tokens.json","tailwindV4Url":"/references/refero/ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0/tailwind-v4.css","cssVariablesUrl":"/references/refero/ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0/tailwind-v4.css"}}