Documentation

Project Overview

This documentation provides comprehensive guidelines for all ACN Agency projects. It covers design systems, development standards, and operational procedures that ensure consistency and quality across all deliverables.

The ACN design system is built on principles of clarity, functionality, and timeless aesthetics. Every decision, from spacing to color application, follows a deliberate methodology.

Design Standards

Grid System

Our projects utilize a 12-column fluid grid with 24px gutters. The grid adapts responsively:

• Desktop: 1200px max-width, 12 columns
• Tablet: 768px–1199px, 8 columns
• Mobile: Below 768px, 4 columns

// Grid configuration
.columns {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

Spatial System

Spacing follows an 8px base unit. Common values:

• 8px — Tight spacing, icon margins
• 16px — Component internal padding
• 24px — Section gaps
• 48px — Major section separation
• 96px — Page-level spacing

Typography Guidelines

Font Families

ACN projects typically use two font families:

• Headings: Playfair Display — Elegant serif for display text
• Body: Inter — Clean sans-serif for readability

// Typography scale
:root {
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  
  --text-xs: 0.75rem;    // 12px
  --text-sm: 0.85rem;    // 14px
  --text-base: 1rem;     // 16px
  --text-lg: 1.25rem;    // 20px
  --text-xl: 1.5rem;     // 24px
  --text-2xl: 2rem;      // 32px
  --text-3xl: 3rem;      // 48px
}

Color Palette

Our standard color palette for dark-themed projects:

• Charcoal: #0a0a0a — Primary background
• Smoke Gray: #4a4a4a — Secondary text, borders
• White: #ffffff — Primary text, emphasis

:root {
  --charcoal: #0a0a0a;
  --smoke-gray: #4a4a4a;
  --white: #ffffff;
  --smoke-dark: #1a1a1a;
  --smoke-light: #2a2a2a;
}

UI Components

Buttons

Standard button styles:

.btn-primary {
  padding: 12px 24px;
  background: var(--white);
  color: var(--charcoal);
  border: none;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  background: var(--smoke-gray);
  color: var(--white);
}

Cards

Content cards use subtle borders and hover states:

.card {
  background: rgba(74, 74, 74, 0.1);
  border: 1px solid rgba(74, 74, 74, 0.2);
  padding: 40px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  background: rgba(74, 74, 74, 0.15);
  border-color: rgba(74, 74, 74, 0.4);
}

Code Standards

All ACN projects adhere to the following development standards:

• Semantic HTML5 markup throughout
• CSS custom properties for theming
• Vanilla JavaScript with ES6+ features
• Responsive-first approach
• Accessibility compliance (WCAG 2.1 AA)
• Performance budgets: <3s FCP, <5s TTI

Deployment Process

Standard deployment workflow:

1. Development completed in feature branches
2. Code review and testing in staging environment
3. Client approval and sign-off
4. Production deployment during low-traffic window
5. Post-launch monitoring and bug resolution

Support & Maintenance

ACN offers ongoing support packages:

• Basic: 8 hours/month, bug fixes, minor updates
• Standard: 20 hours/month, includes feature updates
• Premium: 40+ hours/month, dedicated support, priority response

All projects include 30 days of complimentary post-launch support.