{"id":"fbc60c55-da20-4684-a279-0ed86590272e","name":"Contractbook","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/fbc60c55-da20-4684-a279-0ed86590272e","originalSiteUrl":"https://contractbook.com","capturedAt":"2026-04-30T00:46:07.397Z","colors":[{"name":"Washed Black","hex":"#1a1a1a","role":"Primary text, icon default, borders, dark overlay backgrounds — providing strong contrast on light surfaces","group":"neutral","cssVariable":"--color-washed-black"},{"name":"Pure White","hex":"#ffffff","role":"Page backgrounds, card surfaces, button backgrounds — the primary canvas for content","group":"neutral","cssVariable":"--color-pure-white"},{"name":"Pearl","hex":"#f7f7f3","role":"Subtle background for secondary cards and sections — offering a soft visual break from Pure White","group":"neutral","cssVariable":"--color-pearl"},{"name":"Beige","hex":"#f0f0ec","role":"Input fields, secondary card backgrounds, muted link backgrounds — a soft, tactile neutral for interactive elements and subtle content grouping","group":"neutral","cssVariable":"--color-beige"},{"name":"Ink Black","hex":"#000000","role":"Strongest text contrast, button text on light backgrounds, hairline borders — used sparingly for maximum impact","group":"neutral","cssVariable":"--color-ink-black"},{"name":"Concrete","hex":"#d4d4d0","role":"Muted text, subtle dividers, inactive states — providing soft delineation without harshness","group":"neutral","cssVariable":"--color-concrete"},{"name":"Dim Grey","hex":"#6d6868","role":"Placeholder text, secondary link text, less prominent UI elements — for reduced visual weight","group":"neutral","cssVariable":"--color-dim-grey"},{"name":"Silver Mist","hex":"#b3b3b3","role":"Input field borders, disabled element borders — a light, unobtrusive boundary","group":"neutral","cssVariable":"--color-silver-mist"},{"name":"Royal Blue","hex":"#1009f6","role":"Powerful accent color for key cards, button borders, and statement headlines — commands attention","group":"brand","cssVariable":"--color-royal-blue"},{"name":"Energy Gold","hex":"#ffba09","role":"Primary call-to-action buttons, prominent interactive elements, highlighted card backgrounds — indicates action and importance","group":"brand","cssVariable":"--color-energy-gold"},{"name":"Sky Blue","hex":"#add3e5","role":"Light background for informational cards, decorative accents in illustrations — adds a soft, approachable coolness","group":"accent","cssVariable":"--color-sky-blue"},{"name":"Deep Moss","hex":"#304801","role":"Rich background for specific content cards or accents — a grounded, natural tone","group":"accent","cssVariable":"--color-deep-moss"},{"name":"Thistle Bloom","hex":"#e3c7de","role":"Soft accent for illustrations, decorative elements, or secondary headings — hints at creativity","group":"accent","cssVariable":"--color-thistle-bloom"}],"typography":[{"role":"Primary typeface for all text content, from headings to body copy and UI elements. Its clean, slightly humanist characteristics provide a friendly yet professional feel.","sizes":"11px, 12px, 14px, 16px, 25px, 28px, 32px, 40px, 48px","family":"Abcwhyte","weight":"400, 700","lineHeight":"1.00, 1.20, 1.24, 1.25, 1.30, 1.40, 1.43, 1.50, 1.60, 1.87","substitute":"Inter","letterSpacing":"normal"}],"spacing":{"radius":{"tags":"9999px","cards":"24px","images":"40px","inputs":"4.375px","buttons":"999px"},"elementGap":"14px","sectionGap":"60px","cardPadding":"14px"},"radius":{"tags":"9999px","cards":"24px","images":"40px","inputs":"4.375px","buttons":"999px"},"shadows":{"surfaces":[{"hex":"#ffffff","name":"Page Canvas","level":1,"purpose":"Dominant background for the entire page, providing a clean base."},{"hex":"#f7f7f3","name":"Subtle Section","level":2,"purpose":"Background for alternating content sections, offering a gentle visual break."},{"hex":"#f0f0ec","name":"Interactive Surface","level":3,"purpose":"Background for input fields and secondary cards, hinting at interactivity and slightly receding."}]},"guidelines":{"do":["Prioritize Energy Gold (#ffba09) for all primary calls to action, ensuring immediate visual recognition.","Use Abcwhyte font for all text content, maintaining consistency across headings, body, and UI elements.","Apply 999px border-radius to all buttons and form fields to achieve a consistent pill-like or softly rounded appearance.","Employ Washed Black (#1a1a1a) for primary text on light backgrounds to maximize readability.","Leverage Royal Blue (#1009f6) and Energy Gold (#ffba09) as prominent accent colors for key content blocks or interactive states.","Maintain generous section gaps of 60px to provide ample breathing room between content blocks and improve content scanning.","Utilize Pure White (#ffffff) and Pearl (#f7f7f3) as primary and secondary background surfaces to create a clean, light canvas."],"dont":["Avoid using multiple font families; Abcwhyte is the sole typeface for this system.","Do not introduce strong drop shadows; rely on color blocking and border radii for visual separation and distinction.","Refrain from complex gradients or textures on primary UI elements; maintain clean, solid color fills.","Do not use highly saturated colors for large areas of text to avoid strain; reserve vibrant colors for accents and actionable elements.","Avoid arbitrary border-radii; adhere to the established radii of 24px, 40px, 999px, and 4.375px.","Do not overcrowd sections; ensure comfortable element gaps of 14px and robust card padding for readability.","Avoid using any non-system greys; stick to the defined neutral palette for consistency and accessibility."]}}