{"id":"fbc60c55-da20-4684-a279-0ed86590272e","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","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":"Contractbook","summary":"Playful professionalism, high-contrast clarity.","description":"Contractbook uses a playful, confident aesthetic with bold primary colors punctuating a clean, spacious light background. The system prioritizes readability and clear interaction points, leveraging vibrant yellow for primary actions and strong blue for statements. Typography is robust and direct, complementing the slightly soft, geometric shapes used throughout components and illustrations. Visual hierarchy is established through strategic color blocking and generous whitespace, rather than relying on complex elevation.","industry":"saas","colorScheme":"light","colors":[{"name":"Washed Black","hex":"#1a1a1a","role":"Primary text, icon default, borders, dark overlay backgrounds — providing strong contrast on light surfaces","group":"neutral"},{"name":"Pure White","hex":"#ffffff","role":"Page backgrounds, card surfaces, button backgrounds — the primary canvas for content","group":"neutral"},{"name":"Pearl","hex":"#f7f7f3","role":"Subtle background for secondary cards and sections — offering a soft visual break from Pure White","group":"neutral"},{"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"},{"name":"Ink Black","hex":"#000000","role":"Strongest text contrast, button text on light backgrounds, hairline borders — used sparingly for maximum impact","group":"neutral"},{"name":"Concrete","hex":"#d4d4d0","role":"Muted text, subtle dividers, inactive states — providing soft delineation without harshness","group":"neutral"},{"name":"Dim Grey","hex":"#6d6868","role":"Placeholder text, secondary link text, less prominent UI elements — for reduced visual weight","group":"neutral"},{"name":"Silver Mist","hex":"#b3b3b3","role":"Input field borders, disabled element borders — a light, unobtrusive boundary","group":"neutral"},{"name":"Royal Blue","hex":"#1009f6","role":"Powerful accent color for key cards, button borders, and statement headlines — commands attention","group":"brand"},{"name":"Energy Gold","hex":"#ffba09","role":"Primary call-to-action buttons, prominent interactive elements, highlighted card backgrounds — indicates action and importance","group":"brand"},{"name":"Sky Blue","hex":"#add3e5","role":"Light background for informational cards, decorative accents in illustrations — adds a soft, approachable coolness","group":"accent"},{"name":"Deep Moss","hex":"#304801","role":"Rich background for specific content cards or accents — a grounded, natural tone","group":"accent"},{"name":"Thistle Bloom","hex":"#e3c7de","role":"Soft accent for illustrations, decorative elements, or secondary headings — hints at creativity","group":"accent"}],"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"}],"typeScale":[{"role":"caption","size":11,"lineHeight":1.4,"letterSpacing":0},{"role":"body","size":14,"lineHeight":1.4,"letterSpacing":0},{"role":"heading-sm","size":25,"lineHeight":1.25,"letterSpacing":0},{"role":"heading","size":28,"lineHeight":1.2,"letterSpacing":0},{"role":"heading-lg","size":32,"lineHeight":1.2,"letterSpacing":0},{"role":"display","size":48,"lineHeight":1.2,"letterSpacing":0}],"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."]},"components":[{"name":"Primary Action Button","role":"Call to action"},{"name":"Secondary Ghost Button (Dark Text)","role":"Secondary action"},{"name":"Secondary Ghost Button (Light Text)","role":"Secondary action"},{"name":"Accent Card - Royal Blue","role":"Content container"},{"name":"Accent Card - Beige","role":"Content container"},{"name":"Accent Card - Energy Gold","role":"Content container"},{"name":"Base Card (Rounded)","role":"Content container"},{"name":"Simple Input Field","role":"Data entry"}],"customSections":[{"title":"Agent Prompt Guide","content":"**Quick Color Reference**\n- text: #1a1a1a\n- background: #ffffff\n- border: #b3b3b3\n- accent: #1009f6\n- primary action: #ffba09 (filled action)\n\n**3-5 Example Component Prompts**\n- Create a Primary Action Button: #ffba09 background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n- Design a feature card with a Royal Blue (#1009f6) background, 24px border-radius, and 48px internal padding. Inside, place a heading in Abcwhyte weight 700 size 25px, color #ffffff, and body text in Abcwhyte weight 400 size 14px, color #ffffff.\n- Create a testimonial card on a Pearl (#f7f7f3) background, with a 40px border-radius. Use Abcwhyte weight 400 size 14px, color #1a1a1a for the quote, and Abcwhyte weight 700 size 16px, color #1a1a1a for the author's name."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777509938608-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777509938608-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/fbc60c55-da20-4684-a279-0ed86590272e-1777581774466-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/fbc60c55-da20-4684-a279-0ed86590272e-1777581774466-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/fbc60c55-da20-4684-a279-0ed86590272e-1777581774466-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/fbc60c55-da20-4684-a279-0ed86590272e-1777581774466-preview-detail-poster.jpg"},"similarStyleIds":["0ab4c544-6147-4998-8365-3a0f6191e54f","3e5c272b-8d68-40d8-9726-b4d6914b4b16","d7fb1721-1878-4cbb-a24b-051800557c75","9342e89b-c2fe-4acf-9993-53b44e0c13b5","736830b5-90b1-47b0-99dd-d79454a0d22a","9946887b-ffa9-4276-af81-ae6352795afb","b5ca4e9a-2322-4796-b4c5-3b3bf194821f","376baf20-9ace-405d-bf4a-086016f2b1e3","ced1c98f-d489-48f7-a01f-1fa59a07b706","47c9e353-bed3-4d6c-8316-63a2db5cc377","b490cff8-9d2c-4225-9118-6468e4f3213d","aeefc294-a8f7-443d-b76a-538dddc29afe","62b22816-2d98-4e98-9c17-bf600ddb2fc8","4e3aa524-b146-416c-907f-382c079ea80c","f4ef80f4-f6e5-4aea-8045-f99efaf208b8","c955d25a-b32a-441d-9f07-a260d1df897b","3677bc04-7461-4aa4-aec7-5291bac41b0b","2eab438d-32cd-40c2-b160-1e4127dac569","26dac924-d1c8-4097-af0f-0417ccb12128","f93ac72e-73b2-4b2c-80eb-351ddfa56f4d"],"exports":{"designMdUrl":"/references/refero/fbc60c55-da20-4684-a279-0ed86590272e/design.md","tokensJsonUrl":"/references/refero/fbc60c55-da20-4684-a279-0ed86590272e/tokens.json","tailwindV4Url":"/references/refero/fbc60c55-da20-4684-a279-0ed86590272e/tailwind-v4.css","cssVariablesUrl":"/references/refero/fbc60c55-da20-4684-a279-0ed86590272e/tailwind-v4.css"}}