# Design Reference - Acctual
> Architectural blueprint on white marble. Precision, clarity, and transparent flow of information.

## Source
- Original site: https://acctual.com
- Captured: 2026-04-11T16:45:00.243Z

## Tags
- minimal
- clean
- professional
- high-contrast
- spacious
- achromatic
- precise
- utilitarian
- modern

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Canvas White | `#ffffff` | neutral | Page backgrounds, card surfaces, primary text contrast. |
| Ink Black | `#000000` | neutral | Primary text, critical headings, strong brand emphasis. Its absolute blackness provides uncompromising legibility against white. |
| Graphite | `#0f0f0f` | neutral | Prominent headings and body text, a slightly softer variant of Ink Black. |
| Deep Slate | `#1e1e1` | neutral | Secondary body text and descriptions, offering a subtle visual break from pure black without sacrificing contrast. |
| Ash Gray | `#8d8d8d` | neutral | Subtle text, metadata, disabled states. Provides gentle visual hierarchy. |
| Button Black | `#0d111b` | neutral | Primary action buttons, providing a solid, grounded feel against the white background. |
| Sky Teal | `#0098f2` | accent | Interactive elements, links, checkmarks, highlights — the sole vibrant accent for key user actions and positive indications. |
| Hot Pink | `#f200ca` | brand | Decorative elements or specific brand highlights within icons, a secondary accent for visual interest. |
| Vivid Violet | `#6d56fc` | brand | Decorative elements or specific brand highlights within icons, alongside Hot Pink. |
| Subtle Cream | `#f7fafc` | neutral | Alternative background for sections, creating subtle depth on the mostly white page. |

## 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 And Radius
```json
{
  "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"
  }
}
```

## Component Patterns
- name: Hero CTA with Feature Badges
- name: Testimonial Card
- name: FAQ Accordion
- 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

## 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.

## Don't
- 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.