Aivoes Marketing Design SystemDESIGN.md alpha

### Brand personality

Aivoes should feel:

• Calm, not passive

• Premium, not luxurious for its own sake

• Intelligent, not mysterious

• Precise, not cold

• Helpful, not overfamiliar

• Modern, not trend-dependent

• Trustworthy, not bureaucratic

• International, with clear Australian bookkeeping context

The design should communicate that complex invoice work becomes clearer and easier to review. It should not resemble a speculative AI laboratory, a cryptocurrency product, or a generic neon dashboard.

### Voice and tone

The default voice is clear, concise, supportive, and matter-of-fact.

#### Marketing voice

• Lead with a recognizable user outcome.

• Use short headlines and one supporting idea per paragraph.

• Prefer direct language such as “Scan, review and match invoices” over abstract innovation claims.

• Sound confident without using exaggerated words such as “revolutionary,” “magical,” or “perfect.”

• Explain the benefit before technical detail.

#### Product voice

• Use action-led labels: Upload invoice, Apply filters, Review match, Send to Xero.

• State what happened and what the user can do next.

• Keep helper text brief and place it close to the relevant control.

• Use neutral, recoverable language for problems. Explain the issue before presenting the action.

• Do not describe AI output as final when human review is required.

#### Error and confirmation voice

• Confirmation: state the completed action and its result.

• Warning: state what needs attention without implying failure.

• Error: explain what failed, whether data was preserved, and the next available action.

• Destructive actions: name the affected item and require explicit confirmation.

### Terminology

Use the following forms consistently:

• Aivoes

• AI

• Smart Match

• Smart Bank Matching

• Invoice Hub

• Xero

• Google Drive

• CSV

• AI recognition

• Advisor Program

• Sales invoices

• Scan credits

• Additional users

Do not write Ai, AIVOES in body copy, smart match, XERO, or manually spaced labels. The all-caps AIVOES wordmark may appear only where it is part of the approved logo or launch-screen treatment.

### Writing conventions

• Use sentence case for headings, buttons, navigation, form labels, tabs, and statuses.

• Use English punctuation and normal single spaces.

• Do not use manual spaces to align content.

• Use the middle dot with spaces when separating short metadata: Features · Pricing.

• Keep button labels short and verb-led.

• Use one date format within a view. Preferred display format: 28 Apr 2024.

• Use A$ when currency ambiguity is possible: A$1,234.56.

• Use a thousands separator and two decimal places for invoice totals.

• Do not add a full stop to short button labels, tabs, field labels, or status badges.

• Use a full stop for complete explanatory sentences.

### Logo usage

• Use the approved Aivoes logo artwork from the Figma file.

• Use the blue-cyan logo on light or sufficiently dark neutral backgrounds.

• Use the white or approved inverse treatment on dark imagery when required for contrast.

• Preserve the original proportions and internal spacing.

• Do not redraw, stretch, rotate, outline, add glow to, or recolor the logo with unrelated colors.

• Keep the logo separate from dense interface controls and decorative light effects.

### Imagery guidelines

#### Product mockups

• Use real Aivoes interfaces or clearly marked structural placeholders.

• Show interfaces as evidence of a workflow, not as generic decoration.

• Keep desktop interface mockups upright and readable.

• A phone may be angled slightly in a marketing hero, but product screens must remain easy to recognize.

• Use one dominant device or interface per composition with no more than two or three supporting overlays.

• Do not fill screens with illegible fake data.

#### People photography

• Use people only when the content concerns advisors, customers, collaboration, or verified human support.

• Prefer clean cut-outs, calm expressions, natural posture, and consistent lighting.

• Keep crop style, scale, and background treatment consistent within one module.

• Do not attach invented names, companies, ratings, or testimonials to stock portraits.

#### Backgrounds and light

• Build dark environments from midnight navy with blue and cyan light emerging from the right or lower-right.

• Protect the copy area with a darker, quieter background.

• Use blurred radial light to create depth; avoid hard neon outlines.

• Use white and cool gray-blue backgrounds for working interfaces.

• Do not use rainbow gradients or purple-dominant full-page backgrounds.

#### Illustration

• Prefer product diagrams, invoice forms, matching flows, and abstract data relationships grounded in real workflows.

• Use restrained geometric forms and thin blue-cyan connectors.

• Avoid unrelated robots, brains, holograms, crypto motifs, or generic “AI technology” illustrations.

#### Image cropping and accessibility

• Keep the subject or interface focal point inside the safe area at every breakpoint.

• Avoid placing essential text inside images.

• Provide descriptive alt text for meaningful images and empty alt text for purely decorative light effects.

• Never rely on an image alone to communicate a status or action.

### Iconography

• Use simple rounded line icons or restrained duotone icons.

• Keep optical weight, stroke ending, corner treatment, and bounding-box scale consistent.

• Marketing feature tiles may use 64 × 64px containers with 20–28px radii.

• Product icons normally use 16, 20, or 24px optical sizes.

• Use white line icons on dark blue-to-teal tiles and dark blue icons on quiet light surfaces.

• Use official Xero and Google Drive marks only for their verified integrations.

• Do not mix filled cartoon icons, thin outline icons, and detailed illustrations in one functional group.

### Marketing website

#### Homepage

Dark product hero → compact capability rail → manual-work reduction story → invoice review and sales-invoicing workflows → Smart Match workflow → collaboration peak → process → verified customer proof → pricing preview → FAQ → CTA → footer.

#### Pricing

Growth-oriented hero → Monthly/Yearly control → comparable plan grid → Seed free-plan explanation → plan comparison → included tools → pricing FAQ → CTA → footer.

#### Advisor

Advisor-value hero → benefits for advisors and clients → Apply, Recommend, Earn workflow → one complete application form → verified proof when available → advisor FAQ → footer.

#### Contact

Direct hero → relevant contact paths → one primary form → verified response expectation → FAQ → CTA → footer.

#### Download

Availability hero → platform download choices → concise device/workflow explanation → download FAQ → CTA → footer.

#### Privacy Policy and Delete Account

Reduce decorative content, prioritize readability, isolate destructive actions, and require explicit confirmation for irreversible operations while preserving the shared navigation and footer shell.

### Supporting web application flows

#### Invoice workflow

Upload invoice → AI recognition → user review → confirmation → matching or export.

#### Bank workflow

Import bank CSV → Smart Match suggestions → user evidence review → confirmation → Excel or Xero export when applicable.

Do not merge these two workflows into one ambiguous action. Smart Match may appear in both relevant areas, but the user’s starting data and final task must remain clear.

### Supporting mobile application flow

Sign in or create account → verify email → select or create organisation → scan/upload invoice → review extracted fields → confirm invoice → send to Xero when required → view result.

The mobile application focuses on invoice capture and light review. Detailed processing, management, and export remain in the web workspace where the source flow requires them.

• Use 160–240ms transitions for ordinary hover, focus, press, and panel changes.

• Use ease-out for entering elements and ease-in for exiting elements.

• Prefer opacity, small translation, and subtle scale changes.

• Do not animate layout in ways that move a user’s target unexpectedly.

• Respect prefers-reduced-motion.

• Loading indicators must communicate progress without implying completion.

• Do not use looping decorative motion inside high-density product screens.

• Meet WCAG AA contrast for text and functional controls.

• Maintain a 44 × 44px minimum touch target.

• Provide visible keyboard focus for all interactive web controls.

• Use labels, descriptions, and error messages that remain associated with their fields.

• Do not rely on placeholders as labels.

• Do not rely on color alone for statuses, validation, selection, or charts.

• Use semantic headings and a logical reading order.

• Ensure dialogs trap focus, expose a clear title, and return focus when closed.

• Provide descriptive alt text for meaningful imagery.

• Keep zoom enabled and allow text reflow.

### Choose the environment first

Before generating a screen, identify whether it belongs to:

1. Marketing website — default and primary system

2. Web application — supporting product system

3. Mobile application — supporting product system

Default to the marketing website system unless a product surface is explicitly requested. Apply the shared brand foundations first, then use the environment-specific layout and component rules. Do not use marketing-sized typography inside data tables or product-density patterns inside marketing heroes.

### Token reference

```css

:root {

--aivoes-brand-blue: #0179FB;

--aivoes-primary-action: #0067D9;

--aivoes-brand-cyan: #21C7E8;

--aivoes-accent-bright: #03DFFF;

--aivoes-bg-dark: #061120;

--aivoes-bg-deep: #020817;

--aivoes-surface-dark: #10213F;

--aivoes-surface-light: #FFFFFF;

--aivoes-surface-soft: #F8FAFD;

--aivoes-surface-blue: #F0F7FF;

--aivoes-text-primary: #101E36;

--aivoes-text-secondary: #718097;

--aivoes-text-body: #667085;

--aivoes-border-subtle: #E7EDF5;

--aivoes-processing: #0057B8;

--aivoes-confirmed: #087A49;

--aivoes-warning: #92400E;

--aivoes-error: #B4232C;

--aivoes-duplicate: #6652B8;

--aivoes-gradient-brand: linear-gradient(135deg, #017AF9 0%, #03DFFF 100%);

--aivoes-gradient-cta: linear-gradient(135deg, #7856F6 0%, #1687E8 52%, #36C8F3 100%);

--aivoes-gradient-dark: linear-gradient(135deg, #103571 0%, #051B3F 100%);

--aivoes-radius-sm: 8px;

--aivoes-radius-control: 12px;

--aivoes-radius-input: 16px;

--aivoes-radius-panel: 22px;

--aivoes-radius-card: 24px;

--aivoes-radius-card-lg: 32px;

--aivoes-radius-mobile-shell: 40px;

--aivoes-radius-section: 64px;

--aivoes-radius-pill: 999px;

--aivoes-space-1: 4px;

--aivoes-space-2: 8px;

--aivoes-space-3: 12px;

--aivoes-space-4: 16px;

--aivoes-space-6: 24px;

--aivoes-space-8: 32px;

--aivoes-space-12: 48px;

--aivoes-space-16: 64px;

--aivoes-space-24: 96px;

--aivoes-space-30: 120px;

--aivoes-space-32: 128px;

--aivoes-space-40: 160px;

}

```

### Generation constraints

• Ask for missing business content instead of inventing it.

• Use placeholders only when they are clearly labelled as placeholders.

• Preserve plan names, quotas, integrations, statuses, and flow names from approved source material.

• Reuse shared controls and semantic states before creating a new pattern.

• Keep layouts responsive and accessible by default.

• Do not infer a dark mode for product screens unless it is explicitly designed.

• Treat the source Figma as visual evidence and this document as the normalized implementation layer.

### Final quality checklist

• The environment is correctly identified.

• The screen goal and primary action are obvious.

• Marketing hero actions use the signature dark-glass and outlined pill pair where applicable.

• Typography follows the correct marketing or product scale.

• Colors and gradients use approved roles.

• Spacing and radii use canonical values, not legacy fractions.

• Status terms and colors match across views.

• Product content is traceable to approved material.

• User-facing recognition language uses AI recognition consistently.

• No important content is obscured by overlays or previews.

• Responsive behavior preserves the reading and action order.

• Focus, contrast, labels, touch targets, and error recovery are verified.