{"id":"aeefc294-a8f7-443d-b76a-538dddc29afe","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","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":"Acctual","summary":"Architectural blueprint on white marble. Precision, clarity, and transparent flow of information.","description":"Acctual is a clean, sharp accounting software interface, defined by abundant whitespace, crisp typography, and an almost entirely achromatic palette punctuated by a single vibrant teal accent. It feels like an impeccably organized digital ledger, where the strict logical layout and high contrast ensure every piece of financial data is immediately comprehensible. The signature element is the interplay of system sans-serif for secondary text with the bespoke Open Runde, creating a dual texture of approachability and structured precision.","tags":["minimal","clean","professional","high-contrast","spacious","achromatic","precise","utilitarian","modern"],"industry":"fintech","colorScheme":"light","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, primary text contrast.","group":"neutral"},{"name":"Ink Black","hex":"#000000","role":"Primary text, critical headings, strong brand emphasis. Its absolute blackness provides uncompromising legibility against white.","group":"neutral"},{"name":"Graphite","hex":"#0f0f0f","role":"Prominent headings and body text, a slightly softer variant of Ink Black.","group":"neutral"},{"name":"Deep Slate","hex":"#1e1e1","role":"Secondary body text and descriptions, offering a subtle visual break from pure black without sacrificing contrast.","group":"neutral"},{"name":"Ash Gray","hex":"#8d8d8d","role":"Subtle text, metadata, disabled states. Provides gentle visual hierarchy.","group":"neutral"},{"name":"Button Black","hex":"#0d111b","role":"Primary action buttons, providing a solid, grounded feel against the white background.","group":"neutral"},{"name":"Sky Teal","hex":"#0098f2","role":"Interactive elements, links, checkmarks, highlights — the sole vibrant accent for key user actions and positive indications.","group":"accent"},{"name":"Hot Pink","hex":"#f200ca","role":"Decorative elements or specific brand highlights within icons, a secondary accent for visual interest.","group":"brand"},{"name":"Vivid Violet","hex":"#6d56fc","role":"Decorative elements or specific brand highlights within icons, alongside Hot Pink.","group":"brand"},{"name":"Subtle Cream","hex":"#f7fafc","role":"Alternative background for sections, creating subtle depth on the mostly white page.","group":"neutral"}],"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"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.2},{"role":"body-sm","size":14,"lineHeight":1.43},{"role":"body","size":16,"lineHeight":1.5},{"role":"subheading","size":20,"lineHeight":1.25,"letterSpacing":-0.24},{"role":"heading","size":32,"lineHeight":1.21,"letterSpacing":-0.64},{"role":"heading-lg","size":40,"lineHeight":1.2,"letterSpacing":-1.2},{"role":"display","size":64,"lineHeight":1.13,"letterSpacing":-2.368}],"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."]},"components":[{"name":"Hero CTA with Feature Badges","role":""},{"name":"Testimonial Card","role":""},{"name":"FAQ Accordion","role":""},{"name":"Primary Action Button","role":"Call to action, e.g. 'Create an invoice'"},{"name":"Navigation Link","role":"Top navigation items"},{"name":"Invoice Card","role":"Displaying invoice previews"},{"name":"Service Feature List Item","role":"Highlighting key features below hero"},{"name":"Small Header Button","role":"Secondary action in header, e.g. 'Log in'"},{"name":"Sign Up Header Button","role":"Primary action in header"}],"customSections":[{"title":"Agent Prompt Guide","content":"## Quick Color Reference\n- Text: #000000 Ink Black\n- Background: #ffffff Canvas White\n- CTA Background: #0d111b Button Black\n- CTA Text: #ffffff Canvas White\n- Links/Accent: #0098f2 Sky Teal\n- Secondary Text/Disabled: #8d8d8d Ash Gray\n\n## 3-5 Example Component Prompts\n1. Create a hero section: 'Canvas White' background. Headline 'Invoices that work harder' using 'display' role of Open Runde, weight 600, color '#000000' Ink Black, letter-spacing -2.368px. Subtext 'Acctual offers more payment methods and no monthly fees...' at 'body' role Open Runde, weight 400, color '#1e1e1' Deep Slate. Primary button 'Create an invoice': background '#0d111b' Button Black, text '#ffffff' Canvas White, 100px radius, 6px 14px padding. Below the button, add three feature indicators: 'Sky Teal' checkmark icon, followed by text 'Same day payouts' using 'body-sm' role Open Runde, weight 400, color '#0f0f0f' Graphite.\n2. Design a Testimonial Card: 'Canvas White' background, 20px radius, rgba(0, 0, 0, 0.06) 0px 2.5px 2.5px 0px shadow. Headline text '\"Acctual makes invoices so easy.\"' using 'heading' role of Open Runde, weight 600, color '#000000' Ink Black. Attributed text 'Marcel Kargul, founder of Kargul Studio' using 'body' role of Caveat, weight 600, color '#8d8d8d' Ash Gray.\n3. Implement a Navigation Bar: 'Canvas White' background. Logo at left. Navigation links 'Invoicing', 'Pricing', 'Blog', 'Guides' using Open Runde, weight 400, color '#8d8d8d' Ash Gray for inactive and '#000000' Ink Black for active/hover. 'Log in' button as text-only, Open Runde, weight 400, color '#8d8d8d' Ash Gray. 'Sign up for free' button: background '#0d111b' Button Black, text '#ffffff' Canvas White, 100px radius, 6px 14px padding."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775925874754-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775925874754-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/aeefc294-a8f7-443d-b76a-538dddc29afe-1777567624311-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/aeefc294-a8f7-443d-b76a-538dddc29afe-1777567624311-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/aeefc294-a8f7-443d-b76a-538dddc29afe-1777567624311-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/aeefc294-a8f7-443d-b76a-538dddc29afe-1777567624311-preview-detail-poster.jpg"},"similarStyleIds":["a76ec6ba-20b3-495c-9d89-1e58281e79e7","3f2b79c1-d980-4380-a903-29856975fc37","12255b63-e506-4bc1-a4cd-d05487de32f3","9d16aa65-cef7-4bf7-83c8-91837a248cd9","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","b5fdba21-fd4d-427e-b551-1e22c51e42db","62b22816-2d98-4e98-9c17-bf600ddb2fc8","c1f7749f-319b-491b-8243-22050e85994f","9cc537fc-97d8-4632-8703-f9aa296c2206","48e5de76-05d5-4c4e-a269-c7c245b291ec","2eab438d-32cd-40c2-b160-1e4127dac569","80d7ef36-ed7e-48bb-b558-f772eb40106f","86a6814d-2485-4fad-b6fd-56c2d0a23620","1c1d3939-8d82-4907-aa3c-c9b2fcfbab4f","9342e89b-c2fe-4acf-9993-53b44e0c13b5","376baf20-9ace-405d-bf4a-086016f2b1e3","7b083729-e694-4b66-82a3-befb08451722","9501cfdc-3eb3-4b64-90f6-9afdded48945","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","e0ad1a25-5609-45e6-a355-9bdeec86c5ae"],"exports":{"designMdUrl":"/references/refero/aeefc294-a8f7-443d-b76a-538dddc29afe/design.md","tokensJsonUrl":"/references/refero/aeefc294-a8f7-443d-b76a-538dddc29afe/tokens.json","tailwindV4Url":"/references/refero/aeefc294-a8f7-443d-b76a-538dddc29afe/tailwind-v4.css","cssVariablesUrl":"/references/refero/aeefc294-a8f7-443d-b76a-538dddc29afe/tailwind-v4.css"}}