{"id":"aeefc294-a8f7-443d-b76a-538dddc29afe","name":"Acctual","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/aeefc294-a8f7-443d-b76a-538dddc29afe","originalSiteUrl":"https://acctual.com","capturedAt":"2026-04-11T16:45:00.243Z","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, primary text contrast.","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Ink Black","hex":"#000000","role":"Primary text, critical headings, strong brand emphasis. Its absolute blackness provides uncompromising legibility against white.","group":"neutral","cssVariable":"--color-ink-black"},{"name":"Graphite","hex":"#0f0f0f","role":"Prominent headings and body text, a slightly softer variant of Ink Black.","group":"neutral","cssVariable":"--color-graphite"},{"name":"Deep Slate","hex":"#1e1e1","role":"Secondary body text and descriptions, offering a subtle visual break from pure black without sacrificing contrast.","group":"neutral","cssVariable":"--color-deep-slate"},{"name":"Ash Gray","hex":"#8d8d8d","role":"Subtle text, metadata, disabled states. Provides gentle visual hierarchy.","group":"neutral","cssVariable":"--color-ash-gray"},{"name":"Button Black","hex":"#0d111b","role":"Primary action buttons, providing a solid, grounded feel against the white background.","group":"neutral","cssVariable":"--color-button-black"},{"name":"Sky Teal","hex":"#0098f2","role":"Interactive elements, links, checkmarks, highlights — the sole vibrant accent for key user actions and positive indications.","group":"accent","cssVariable":"--color-sky-teal"},{"name":"Hot Pink","hex":"#f200ca","role":"Decorative elements or specific brand highlights within icons, a secondary accent for visual interest.","group":"brand","cssVariable":"--color-hot-pink"},{"name":"Vivid Violet","hex":"#6d56fc","role":"Decorative elements or specific brand highlights within icons, alongside Hot Pink.","group":"brand","cssVariable":"--color-vivid-violet"},{"name":"Subtle Cream","hex":"#f7fafc","role":"Alternative background for sections, creating subtle depth on the mostly white page.","group":"neutral","cssVariable":"--color-subtle-cream"}],"typography":[{"role":"Smallest text elements, UI labels, and highly functional information. It has a utilitarian feel which contrasts with the custom font for core content.","sizes":"12px","family":"sans-serif","weight":"400","lineHeight":"1.20","substitute":"system-ui, 'Segoe UI', Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif"},{"role":"Primary display font for headings, body text, and key content. Its distinctive features and precise letter-spacing contribute to the crisp, modern feel. The feature settings indicate careful typographic attention.","sizes":"14px, 16px, 20px, 32px, 40px, 64px","family":"Open Runde","weight":"400, 500, 600","lineHeight":"1.13, 1.20, 1.21, 1.25, 1.40, 1.43, 1.50, 1.71, 1.75","substitute":"Inter","letterSpacing":"-0.037em at 64px, -0.030em at 40px, -0.020em at 32px, -0.012em at 20px, normal at smaller sizes","fontFeatureSettings":"\"blwf\" on, \"cv03\" on, \"cv04\" on, \"cv09\" on, \"cv11\" on"},{"role":"Handwritten script used for subtle accents like testimonials or decorative elements, providing a human touch to an otherwise structured interface.","sizes":"16px, 24px","family":"Caveat","weight":"600","lineHeight":"1.33, 1.50","substitute":"Sacramento"},{"role":"Used for specific body text elements, likely in contexts where Open Runde might be too decorative or less performant. It fills a very specific role, avoiding the system sans-serif.","sizes":"14px","family":"Inter","weight":"500","lineHeight":"1.43","substitute":"Inter"}],"spacing":{"radius":{"cards":"20px","badges":"1250px","images":"32px","buttons":"100px"},"elementGap":"4-24px","sectionGap":"40-80px","cardPadding":"24px","pageMaxWidth":"1200px"},"radius":{"cards":"20px","badges":"1250px","images":"32px","buttons":"100px"},"guidelines":{"do":["Use '#ffffff' Canvas White as the dominant page and card background color; establish visual hierarchy through subtle shade differences like '#f7fafc' for alternating sections.","Apply Open Runde for all main headings and body text, varying weights (400, 500, 600) and sizes according to the type scale for clear hierarchy and visual appeal.","Employ the 100px radius for all interactive buttons and pill-shaped elements to maintain a consistent soft, approachable shape.","Utilize Sky Teal (#0098f2) exclusively for interactive elements like links and checkmarks; avoid using it for decorative purposes to preserve its accent meaning.","Maintain generous padding, particularly 24px and 40px for section separators and major element spacing, creating a spacious and comfortable information density.","When emphasizing short, impactful statements or testimonials, use the Caveat font for a personalized, handwritten touch."],"dont":["Do not introduce new chromatic colors beyond Sky Teal, Hot Pink, and Vivid Violet; the design strictly adheres to an achromatic base with minimal, deliberate color accents.","Avoid box shadows for general elevation; leverage subtle background color changes (e.g., #f7fafc) or thin borders to suggest depth and separation.","Do not use system sans-serif for headlines or prominent body text; reserve it for small, functional UI labels where its simplicity is an asset.","Do not deviate from the established letter-spacing values for Open Runde; these are carefully calibrated for optimal legibility at different sizes.","Avoid dense, information-heavy sections without adequate whitespace; the design's strength lies in its spacious and clear presentation.","Do not use multiple font sizes or weights within a single line of text unless it's a clearly defined component. Maintain typographic consistency."]}}