Aivoes Marketing & Product Design SystemLegacy format

• Buttons: Marketing Primary uses the brand gradient with white text, pill radius and optional CTA glow. Product Primary uses #0179FB with white text; the gradient is reserved for core Upload, Confirm or Create actions. Secondary uses a white or transparent surface with a #D6E0ED border. Tertiary uses transparent background with brand-blue text. Destructive uses #CC4949 text and border, with a solid error fill only for final confirmation. Website sizes are 68px, 56px and 38px high; web application sizes are 42px, 38px and 34px; the mobile primary button is 50px high. Use one strongest primary button per action area.

• Cards: Marketing cards use white or restrained dark-glass surfaces with 24px-32px radius and generous internal spacing. Web application cards use white surfaces, 1px subtle borders and 16px radius; large table, detail and modal containers use 24px radius. Mobile cards use white surfaces, 24px radius and 20px-24px padding. Avoid heavy shadows and dense card walls.

• Inputs: Website inputs are 50px high with 12px radius and 13px text. Web application inputs are 42px high with 12px radius and 12px text; authentication inputs may be 54px high with 14px text. Mobile inputs are 50px high with 24px radius and 15px text. Default uses a white surface and subtle border; focus uses a 2px #0179FB ring; error uses #CC4949 border, icon and recovery text. Placeholder text never replaces a visible label.

• Status Chips: Web application status chips are 24px high with 11px Medium text; mobile status chips are 26px high with 13px Medium text. Use a pill shape and pair every status color with a label and icon or dot. Processing, To review, Failed, Duplicated, Confirmed, Matched and Unmatched keep their approved wording and colors.

• Search: Web application search is 497px wide by 43px high with a pill radius, 20px icon and 12px placeholder. Mobile search is 276px wide by 52px high with a pill radius, 26px icon and 15px placeholder. The filter action remains a separate icon button.

• Navigation: Marketing navigation uses a maximum 1200px content width, approximately 70px height and 16px rounded container. Web application navigation uses a fixed 240px dark sidebar with 44px-48px navigation rows and 20px icons. Mobile uses a floating approximately 249px by 64px pill navigation with a 64px core action.

• Data Tables: Use a white 24px-radius container, fixed column alignment and 13px/18px table text. Text columns align left; amounts and numeric data align right. Keep the header visible when useful. Reduce secondary columns or allow horizontal scrolling before reducing text below the approved minimum.

• Icon Buttons: Website icon buttons are 68px with 26px icons; web application icon buttons are 34px with 15px-16px icons; mobile icon buttons are 52px with 20px icons. Use rounded linear icons with 1.5px strokes and provide a tooltip or accessible label.

### Button identity and preview interpretation

• The authoritative Aivoes variants are Marketing Primary, Product Primary, Secondary, Tertiary and Destructive, as defined above.

• An orange control labeled “Inverted” in a documentation preview is not an Aivoes button variant. Do not add an orange action token or infer a complementary brand color from that preview.

• Generic “Primary”, “Secondary” and “Outlined” preview labels do not establish a one-to-one mapping to the actual Aivoes variants. Use the written component specification and approved Figma component.

• Text buttons use the pill radius. A small rounded rectangle in a platform preview does not override that rule.

• A dark-background secondary action must use a legible foreground and boundary appropriate to its background; its exact inverse treatment remains to be specified rather than inferred from an orange demo button.

• Gradient stops alone do not recreate every layered Figma CTA. For visual matching, inspect the actual approved component's gradient direction, highlight layers, blur, border and shadow. Do not invent missing effect measurements.

• State colors remain semantic feedback colors. The review-state amber is not a second brand CTA color.

### Component reference matrix

| Component | Website | Web app | Mobile app |

| --- | --- | --- | --- |

| Text button heights | 68 / 56 / 38px | 42 / 38 / 34px | Primary 50px |

| Standard input height | 50px | 42px; authentication may use 54px | 50px |

| Input radius | 12px | 12px | 24px |

| Input text size | 13px | 12px; authentication 14px | 15px |

| Status chip height | Not established in this baseline | 24px | 26px |

| Status chip text | Not established in this baseline | 11px Medium | 13px Medium |

| Search reference size | Not established in this baseline | 497 × 43px | 276 × 52px |

| Search icon / placeholder | Not established in this baseline | 20 / 12px | 26 / 15px |

| Icon button / icon size | 68 / 26px | 34 / 15–16px | 52 / 20px |

Search widths are reference-layout dimensions; adapt available width without distorting the icon or shrinking text. Do not invent a website search component merely because a generic documentation preview includes one.

### Explicit component labels

Use these names in the design library and any manually authored specimen board:

• Buttons: Marketing Primary, Product Primary, Secondary, Tertiary, Destructive.

• Search: Web App Search, Mobile Search.

• Status chips: Processing, To review, Failed, Duplicated, Confirmed, Matched, Unmatched.

• Cards: Website Feature Card, Web App Card, Mobile Card.

These are documentation labels, not additional product features. Preview controls may use short demonstration copy, but must not replace the authoritative names in implementation.

Status: the brand direction is confirmed by the project owner. The implementation guidance below expresses that direction; it does not add product capabilities.

• Professional and trustworthy: accurate product language, legible information, consistent controls and honest status feedback. Never imply guaranteed accuracy, automatic approval or an integration outcome that has not occurred.

• Simple and efficient: lead with the task, use concise labels and reduce competing decoration. Marketing introduces value; product screens help users finish work.

• Friendly and restrained: explain without blaming, encourage without hype and keep visual effects quiet.

• Human-controlled intelligence: AI recognition assists; users review, edit and confirm. A suggested match is not a confirmed result.

One brand, three expressions: the website is spacious and expressive; the web app is compact and task-focused; the mobile app is touch-friendly and concise. Shared identity does not mean identical component dimensions.

### Source artwork and verified usage

Use the existing blue-to-cyan Aivoes symbol and horizontal wordmark as supplied in Figma. The artwork is the source of truth; do not recreate the wordmark by typing Inter or rebuilding the symbol. Do not replace its internal gradient with the marketing CTA gradient.

| Context | Verified reference | Observed width × height |

| --- | --- | --- |

| Website navigation | [Logo Horizontal 1](https://www.figma.com/design/mJRopI88fiwQ9W95BunNRJ/Saas?node-id=1413-369) | 124 × 32 px |

| Web app login | [Aivoes Logo](https://www.figma.com/design/mJRopI88fiwQ9W95BunNRJ/Saas?node-id=346-208) | Approximately 136.4 × 35.2 px |

| Mobile header | [Aivoes Logo / Mobile](https://www.figma.com/design/mJRopI88fiwQ9W95BunNRJ/Saas?node-id=531-1423) | Approximately 111.85 × 28.86 px |

These are observed placements, not minimum-size standards. The sampled horizontal artwork has a 3.875:1 bounding-box ratio. Preserve the source proportions and internal symbol-to-wordmark spacing; scale uniformly.

### Placement and backgrounds

• Use the complete horizontal logo for website navigation, authentication and product headers where space permits.

• Keep the logo on a quiet background. The inspected examples use the blue-cyan artwork against dark navy.

• On light or photographic backgrounds, check actual legibility before release. Do not assume that a white, black or monochrome version has been approved.

• Use a symbol-only or app-icon export only after the owner identifies the approved asset; do not crop the wordmark automatically.

• Preserve the original vector paths and colors. Do not rotate, stretch, outline, add shadows to or rearrange the artwork.

### Proposed rules — owner approval required

• Clear space: reserve at least half the full logo height on every side. For a 32 px-high logo, the proposed exclusion zone is 16 px per side.

• Minimum horizontal size: test 112 px width, approximately 29 px height, as a proposed digital minimum; validate at actual device scale before adoption.

• No print minimum, favicon artwork, monochrome variant or app-store icon specification is established by this revision.

• Prefer SVG for interface delivery and transparent PNG when vector support is unavailable. Export from the source, not a screenshot.

The reference links above provide traceability, not embedded logo images. A visual documentation page needs separately hosted, approved image assets to display the logo directly.

Status: the professional, clear and friendly direction is confirmed. Example strings below are proposed reusable copy, not a claim that every string already appears in the product.

### Consistent voice

Use plain English, short sentences and concrete actions. Explain the outcome before technical detail. Prefer “AI recognition” in customer-facing copy; retain “Smart Match”, “Invoice Hub”, “Xero” and “Google Drive” exactly. Use “Aivoes” in prose; preserve original lettering within logo artwork.

Use sentence case for new interface messages. Keep existing approved product and plan names unchanged. Avoid all-caps sentences, exaggerated enthusiasm, blame, unsupported security promises and claims such as “100% accurate”.

### Tone by situation

| Situation | Tone | Proposed example |

| --- | --- | --- |

| Website introduction | Confident and understandable | Scan, review and match invoices in one workflow. |

| Action button | Brief and specific | Upload invoices |

| Review guidance | Calm and explicit | Review the details before confirming. |

| Success | Direct, factual | Changes saved. |

| Failure with unknown cause | Helpful without guessing | Couldn’t save changes. Try again. |

| Empty state | Clear next step | No invoices yet. Upload an invoice to get started. |

| Processing | Neutral, no false time promise | Processing your invoice… |

| Destructive action | State the actual consequence | Describe what will be deleted and whether recovery is possible; confirm the product behavior before writing the final message. |

Only mention a network problem when that cause is known. Do not say “Your changes are safe” or “You can restore this later” without verified behavior.

### Product truth and terminology

• Distinguish uploading, processing, reviewing, matching and sending to Xero; success in one step does not prove success in the next.

• Never describe AI suggestions as final approval.

• Do not invent prices, quotas, commissions, customer counts, ratings, testimonials or contact details.

• Keep plan and quota copy in the approved product-content source, not in design-token definitions.

• Keep scan credits and sales invoices distinct. Do not silently rename an approved quota label.

• Success feedback can be brief; errors must explain a useful next action. Do not replace an important confirmation dialog with a temporary toast.

Status: visual patterns below are derived from the inspected website homepage, web login and mobile launch/header references. They are not a certification that every existing image or testimonial is approved.

### Product-led website imagery

The website leads with real product screens, desktop/mobile device compositions and restrained blue-cyan lighting. Light sections use focused product-detail crops; dark sections allow a stronger device scene. Rounded platforms and devices support the product story rather than becoming the subject.

• Use current, approved interface screenshots for the task being described.

• Keep one dominant product visual per section, with only supporting detail callouts.

• Preserve screen aspect ratios. Do not stretch the interface to fit a device.

• Crop to explain the feature; do not crop away a control needed to understand the demonstrated interaction.

• Use anonymized demonstration data. Do not expose real invoices, bank details, email addresses or customer identifiers.

• Mark demonstration data as illustrative when its presentation could imply real performance.

• For web app task screens, keep decorative device scenes outside tables, forms and review areas.

Reference: [Website homepage](https://www.figma.com/design/mJRopI88fiwQ9W95BunNRJ/Saas?node-id=1413-345).

### Backgrounds and materials

Use midnight navy, subtle blue/cyan light and quiet gradients. Keep the main reading area calm and maintain separation between text and light effects. Glass belongs to selected brand, authentication and overlay surfaces, not every container.

Existing authentication and mobile launch screens use soft sweeping light backgrounds. Reuse the approved source image where possible; a CSS gradient is not an exact replacement for a raster light texture.

References: [Web login](https://www.figma.com/design/mJRopI88fiwQ9W95BunNRJ/Saas?node-id=346-201), [Mobile launch](https://www.figma.com/design/mJRopI88fiwQ9W95BunNRJ/Saas?node-id=566-718).

### Icons and third-party identities

Use the rounded linear icon treatment specified under Components. Keep optical weight consistent within each size family. Feature illustration containers are not the same as toolbar icon dimensions.

Use existing official Xero and Google Drive artwork for those integrations; do not recolor or redraw it as Aivoes branding. Do not use an integration logo to imply a partnership beyond the actual approved product relationship.

### Photography and people

The homepage contains people imagery in team/customer-oriented sections. Treat these as existing visual examples, not proof of authentic customer identities, permissions or testimonials.

For future imagery, prefer natural professional expressions, simple backgrounds and restrained lighting. Avoid staged “guaranteed success” symbolism. Confirm asset rights and any endorsement before publication; do not invent names, quotations, ratings or customer stories to accompany a portrait.

### Asset delivery

Proposed delivery convention: SVG for approved vector logos/icons; PNG or WebP for product screenshots and illustrations, choosing lossless output where small UI text needs it. Keep transparent edges clean. Supply sufficient resolution for the displayed size and test the final crop at actual scale.

Do not embed temporary screenshot URLs, private invoice exports, local filesystem paths or base64 image blocks in a public design-system document. Public image embeds require stable URLs and owner-approved publication rights.

Status: targeted findings from the preceding source review on 2026-09-05. This is a migration record, not evidence that Figma has been updated.

The owner has chosen the document as the primary specification. Keep the target values below for future components; list conflicting source values as pending cleanup. A deliberate exception requires an explicit scope, reason and owner approval before it becomes normative.

| Item | Document target | Observed source binding | Disposition |

| --- | --- | --- | --- |

| Website Display | 64 px size / 72 px line height | 64 / 68 | Pending source alignment |

| Website Body | 16 / 26 | 15 / 26 | Pending source alignment |

| Website Large Body | 18 / 28 | 18 / 30 | Pending source alignment |

| Website Label | 14 / 20, weight 600 | 13 / 18, weight 600 | Pending source alignment |

| English display family | Inter | A returned display-family variable resolves to Manrope | Inspect direct node usage before replacing a binding; do not claim all headings use Manrope |

| Website heading naming | H1 48 / 58; H2 40 / 48 | Source variables named h2 resolve to 48 / 58 | Check semantic role; rename/remap styles rather than shrinking every heading named h2 |

| Default light border | #E5EBF3 | #E7EDF5 and #DFE8F0 appear in returned bindings | Pending role-level alignment; inspect intended component scope before substitution |

| Dark glass fill | White at 8% | Web login returns white at approximately 10% | Pending alignment or explicit login-only exception approval |

| Dark glass border | White at 16% | Web login returns white at approximately 14% | Pending alignment or explicit login-only exception approval |

Source references: [Website homepage](https://www.figma.com/design/mJRopI88fiwQ9W95BunNRJ/Saas?node-id=1413-345), [Web login](https://www.figma.com/design/mJRopI88fiwQ9W95BunNRJ/Saas?node-id=346-201), [Mobile header](https://www.figma.com/design/mJRopI88fiwQ9W95BunNRJ/Saas?node-id=531-1422).

Returned variable definitions describe the sampled subtree. They do not identify every consuming layer or establish a full-file defect count. The preceding review also returned mobile header typography bindings of 24 / 32 and 13 / 20; these alone are insufficient to assign a semantic style or certify all mobile typography.

### Additional specification clarifications

• The 1440 px ten-column marketing reference is inherited from the supplied baseline; its grid count was not verified in the targeted review. Do not claim it matches every Figma frame.

• Observed logo dimensions are proportions and placements, not spacing-grid violations.

• A 24 px mobile input radius is a component-specific rule; the general 12 px input entry describes standard controls and does not override the explicit mobile rule.

• “Confirmed” and “Matched” share the existing green color role, but their text labels remain distinct: user confirmation and a matching result describe different events.

• Product and website text styles require namespaced names, such as Website/Body and Product/Body. Their different size scales are intentional.

• A website gradient/glass CTA cannot be validated from the documentation site's generic preview alone.

• No new inverse palette, app-wide dark theme or approved login exception is introduced by this reconciliation.

• Completion criterion for future Figma cleanup: verify the actual consuming layers, apply the relevant target or approved exception, and inspect layout after font/line-height changes. This document does not authorize or report that cleanup as already completed.

The visual overview is a sample board: color cards, type specimens, generic buttons, a search field, placeholder lines and example navigation/icon controls. It is not an exported Aivoes product screen.

Use the following authority order when a preview differs from the specification:

1. Owner-approved written target or explicitly approved exception.

2. Actual approved Figma component for geometry and layered artwork, subject to the known source differences above.

3. Platform-generated examples for illustration only.

Color strips beneath a swatch are not approved additional palette tokens unless they are explicitly listed in Colors. Generic icon examples do not add navigation destinations or product functionality. “Aa” demonstrates type; it is not content to reproduce in the product. A preview's “Inverted” orange button does not establish an inverse theme.

Markdown can document correct rules without controlling a host platform's renderer. This release does not claim to remove the orange preview, change the site's template, force pill geometry, display linked Figma assets inline or add unsupported visual sections. Validate the uploaded Raw/download file for content completeness separately from Visual appearance.

• Document version: 3.4

• Updated: 2026-09-05

• Baseline: Aivoes-DESIGN-v3.3-DesignMD.md, retaining the original user-supplied v3.1 specifications.

• Scope: one shared Aivoes system, led by the marketing website, with web and mobile product applications.

• Source priority: explicit owner-approved rules, then the supplied baseline for existing specifications; use Figma to fill gaps and verify examples. Log conflicts instead of silently replacing established values.

• Verification scope: three page inventories plus representative logo, website, web-login and mobile imagery inspection. This is not a full node-by-node conformance audit.

• Existing Colors, Typography, Elevation, Components, Spacing and Border Radius specifications are retained from the baseline. Retention does not mean every value was remeasured in this review.

• Retained from v3.2: Brand Personality, Logo System, Voice & Tone, Imagery Guidelines, application guidance and evidence/status distinctions.

• Retained from v3.3: explicit document-first authority, targeted Figma reconciliation, button/preview interpretation and clarification of component-specific exceptions.

• Changed in v3.4: color entries now follow the official plain-hex example; typography uses separately named Website and Product entries; Components uses compact named patterns and the canonical Chips/Search category names; full dimensions and detailed rules live in separate specification sections.

• Renderer validation: these edits follow published example conventions, not a tested or guaranteed parser contract. No authenticated preview or publication test was performed for this file.

• This revision resolves how to interpret the known conflicts; the underlying Figma differences remain pending. It does not certify full conformance.

• Proposed, not approved: logo exclusion zone and minimum size, responsive website type guidance, example microcopy and asset-delivery conventions.

• Still requiring owner approval/assets for a fully illustrated brand manual: official monochrome/symbol-only exports, app-icon/favicon artwork, stable public asset URLs and confirmation of photography/customer-content rights.

• No Figma nodes or published DesignMD content were changed during preparation.

### Figma sources

• [Website](https://www.figma.com/design/mJRopI88fiwQ9W95BunNRJ/Saas?node-id=0-1)

• [Web app](https://www.figma.com/design/mJRopI88fiwQ9W95BunNRJ/Saas?node-id=205-88)

• [Mobile app](https://www.figma.com/design/mJRopI88fiwQ9W95BunNRJ/Saas?node-id=530-1179)

### DesignMD publishing checks

Upload this complete document as the next version of the existing entry; keep its title and slug if you want to preserve the same page address. The document version 3.4 and the platform's own version counter may differ.

This file uses the official example-style core headings and compact entries, with detailed guidance in ordinary Markdown sections. It does not guarantee that the platform's Visual view renders every custom section, variant label or Figma-linked artwork. After upload, check both Visual and Raw/download views. Confirm that Logo System, Brand Personality, Voice & Tone and Imagery Guidelines remain in the downloadable file.

If a new section appears only in Raw, the content is present but its visual presentation is not established. Do not remove the section just to simplify the preview. Direct logo/image display requires supported image rendering and stable approved asset URLs; Figma node links are references, not public image files.

### Format references and upload acceptance

Formatting references inspected for this revision: [DESIGN.md official example](https://designmd.ai/what-is-design-md) and [Genesis](https://designmd.ai/chef/genesis). Only their writing structure is used; no Genesis colors, typography, dimensions or product behaviors are adopted.

After upload, verify:

1. Download contains document version 3.4 and the complete specification tables.

2. Color names do not contain a trailing parenthesis or backtick.

3. Website Body and Product Body are distinguishable.

4. The button specimen identifies variants rather than showing five undifferentiated Default labels.

5. Status and search specimens retain useful labels; the complete definitions remain in Raw/download even if a visual widget is unsupported.

6. No orange inverse action or generated color strip is treated as an approved token.

7. Logo and imagery references are retained. This release includes source links, not embedded asset files.

If items 2–5 fail, the renderer issue remains unresolved. Keep the authoritative document and investigate the supported import/preview mechanism; do not change the brand to imitate a fallback widget.

Suggested release description: Restructured color, typography and component entries using the published DESIGN.md examples. Added distinct Website and Product type names and explicit component tables while preserving Aivoes specifications.