Aicomp

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/aicomp.com -->
<!-- Extracted: 2026-07-06T14:49:07.610Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Aicomp"
description: "Aicomp projects a highly professional, industrial, and authoritative presence tailored specifically for the packaging manufacturing sector. The design is strictly flat and utilitarian, prioritizing clarity and technical credibility over aesthetic flair or emotional engagement."
colors:
  primary: "#1a4d72"
  secondary: "#2e7d9a"
  tertiary: "#3498db"
  neutral: "#007cbb"
  surface: "#ffffff"
  on-surface: "#333333"
  on-surface-secondary: "#007cbb"
  border: "#dee2e6"
  link: "#007cbb"
  error: "#e74c3c"
  warning: "#f39c12"
  success: "#27ae60"
typography:
  display-lg:
    fontFamily: "Source Sans Pro Custom"
    fontSize: "53.8016px"
    fontWeight: "700"
    lineHeight: "64.5619px"
  headline-lg:
    fontFamily: "Source Sans Pro Custom"
    fontSize: "48px"
    fontWeight: "500"
    lineHeight: "57.6px"
  headline-md:
    fontFamily: "Source Sans Pro Custom"
    fontSize: "28px"
    fontWeight: "500"
    lineHeight: "33.6px"
  body-md:
    fontFamily: "Source Sans Pro Custom"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "20.8px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#007cbb"
    rounded: "0px"
    padding: "5px 32.4px 5px 10px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#cdcdcd"
    borderWidth: "1px"
  button-outline:
    textColor: "#00496f"
    rounded: "0px"
    padding: "20px 30px"
    fontSize: "16px"
    fontWeight: "500"
    borderColor: "#00496f"
    borderWidth: "0px 0px 0px 8px"
---

# Aicomp — Design System

## Overview

Aicomp’s visual identity establishes a rigid, utilitarian framework designed to convey industrial authority and technical precision. Rooted in the archetypes of The Sage and The Ruler, the interface rejects decorative elements in favor of strict functional clarity. This aesthetic mirrors the operational seriousness of enterprise manufacturing software, drawing direct inspiration from the disciplined, no-nonsense environments of SAP, Siemens, and Rockwell Automation. The design atmosphere is cold, controlled, and highly structured, ensuring that users perceive the platform as a reliable, high-stakes tool for critical production management rather than a consumer-facing application. Every pixel serves a purpose; there is no room for ambiguity or playful interaction patterns.

**Key characteristics:**

- Vibe — industrial, technical, authoritative, flat, corporate, specialized
- Archetypes — The Sage, The Ruler
- Comparable to — SAP, Siemens, Rockwell Automation, Plex Systems
- Design era — classic-corporate
- Emotional tone — trustworthy-technical
- Target audience — C-suite executives, IT directors, and operations managers in the paper and packaging industry seeking reliable ERP and configuration solutions.
- Visual energy — 3/10 (calm/understated)

## Colors

The palette enforces a hierarchy of trust and stability. Deep navy (#1a4d72) anchors the interface, symbolizing corporate reliability and technical depth, while pure white surfaces ensure maximum legibility for complex data tables and operational dashboards. This high-contrast, low-saturation scheme eliminates visual noise, directing user attention exclusively to actionable metrics and system status indicators without emotional distraction.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#1a4d72` | Dark Slate Gray |
| secondary | `#2e7d9a` | Steel Blue |
| accent / tertiary | `#3498db` | Dodger Blue |
| background | `#ffffff` | White |
| text | `#333333` | Charcoal |
| secondary text | `#007cbb` | Dark Cyan |
| border | `#dee2e6` | Gainsboro |
| link | `#007cbb` | Dark Cyan |
| muted | `#007cbb` | Dark Cyan |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#27ae60` | Confirmations, positive states |
| warning | `#f39c12` | Caution, intermediate states |
| error | `#e74c3c` | Failures, destructive actions |

## Typography

Source Sans Pro Custom provides the necessary neutrality and readability for dense information architectures. Its humanist sans-serif structure offers clear distinction between characters, crucial for technical specifications and code-like data entries. The type system relies on weight and size variations rather than stylistic flourishes to establish hierarchy, reinforcing a tone of objective, unadorned expertise that aligns with the brand’s industrial and authoritative positioning.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Source Sans Pro Custom | body | self-hosted | 400, 500 |
| Source Sans Pro Custom | heading | self-hosted | 500, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Source Sans Pro Custom | 53.8016px | 700 | 64.5619px | — |
| Heading 2 | Source Sans Pro Custom | 48px | 500 | 57.6px | — |
| Heading 3 | Source Sans Pro Custom | 28px | 500 | 33.6px | — |
| Body | Source Sans Pro Custom | 16px | 400 | 20.8px | — |

### Conventions

- Heading case — title-case
- Body line-height — 20.8px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| dropdown | `rgba(0, 0, 0, 0.1) 0px 15px 20px 0px` |
| modal | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` |

## Components

### Buttons

**Secondary**

- Background — `#ffffff`
- Text — `#007cbb`
- Radius — `0px`
- Padding — `5px 32.4px 5px 10px`
- Font size — `16px`
- Font weight — `400`
- Border — `1px solid #cdcdcd`
- Sample copy — "English"

**Outline**

- Text — `#00496f`
- Radius — `0px`
- Padding — `20px 30px`
- Font size — `16px`
- Font weight — `500`
- Border — `0px 0px 0px 8px solid #00496f`
- Sample copy — "Packaging Manufacturing"

## Do's and Don'ts

### Do

- Use Source Sans Pro Custom for all typography: weight 400 for body text and 500/700 for headings.
- Apply title-case capitalization to all headings; use sentence case for body text.
- Set body text line-height to exactly 20.8px for optimal readability.
- Use primary color #1a4d72 for main navigation backgrounds and key structural elements.
- Style secondary buttons with white background (#ffffff), #007cbb text, 0px border-radius, and a 1px solid #cdcdcd border.
- Style outline/primary action buttons with transparent background, #00496f text, 0px border-radius, and a 2px solid #00496f border.
- Apply a single-layer shadow (rgba(0, 0, 0, 0.1) 0px 15px 20px 0px) exclusively to dropdowns and modals to indicate depth.
- Maintain a strict flat design aesthetic: use solid colors only, with no gradients or complex textures.
- Use a base spacing unit of 2px for all margins and padding calculations to ensure grid consistency.
- Keep button padding consistent with the extracted pattern (e.g., 5px vertical, 32.4px horizontal for secondary) to maintain visual rhythm.

### Don't

- Do not use emoji in any marketing copy or UI elements.
- Do not use exclamations in headings or body text; maintain a matter-of-fact tone.
- Do not use serif fonts; the brand is strictly sans-serif (Source Sans Pro).
- Do not use rounded corners (border-radius > 0px) on buttons or cards; all interactive elements must be sharp.
- Do not apply shadows to buttons or primary content cards; reserve shadows for overlay elements like dropdowns.
- Do not use gradients in backgrounds, buttons, or icons; stick to solid hex colors.
- Do not use playful or casual language; avoid slang, idioms, or enthusiastic punctuation.
- Do not deviate from the specified color palette; avoid using bright or neon accent colors outside of #3498db.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 8/10 | casual |
| Playful ↔ Serious | 9/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 3/10 | technical |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — advanced
- Jargon — heavy
- CTA style — direct imperative requests for contact or demo
- Rhetorical devices — repetition, listicle

### Sample copy

> Software for the Paper & Packaging Industry

> Companies That Already Trust in Us

> VCPowerPack – Product Configuration

> Why Choose Us

> get in touch

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | svg | [link](brands/aicomp.com/logo-0.svg) | 95% |
| favicon | — | svg | [link](brands/aicomp.com/logo-1.svg) | 95% |
| favicon | — | svg | [link](brands/aicomp.com/logo-2.svg) | 95% |
| primary | — | svg | [link](brands/aicomp.com/logo-3.svg) | 85% |
| secondary | — | svg | [link](brands/aicomp.com/logo-4.svg) | 85% |

## Sources

- Live brand page — https://extractvibe.com/brand/aicomp.com
- Raw JSON — https://extractvibe.com/api/brand/aicomp.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/aicomp.com/design.md
- Extracted — 2026-07-06T14:49:07.610Z
- Generator — ExtractVibe vv1
- Quality score — 90/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md