# Squares Infotech — Speculative Website Design DNA

## Visual Identity System

### Primary Motif: THE SQUARE

The square is not merely a shape — it is a principle:
- Frame (boundary, containment)
- Grid (structure, alignment)
- System (connection, relationship)
- Outcome (clarity, precision)

### Color Palette

| Token | Value | Usage |
|---|---|---|
| `--sq-primary` | #0F1C2E | Deep navy — primary text, dark surfaces |
| `--sq-secondary` | #1A3A5C | Medium blue — secondary elements |
| `--sq-accent` | #C8A45C | Gold — highlights, CTAs, emphasis |
| `--sq-surface` | #F8F6F3 | Warm white — light backgrounds |
| `--sq-mute` | #6B7B8D | Grey — secondary text, disabled |
| `--sq-dark` | #0A1219 | Near black — hero backgrounds |

### Typography

| Level | Font | Weight | Usage |
|---|---|---|---|
| Display | Inter | 700 | Hero headlines |
| Heading | Inter | 600 | Section titles |
| Body | Inter | 400 | Paragraph text |
| Mono | SFMono-Regular | 400 | Codes, technical data |
| Serif | Iowan Old Style | 400 | Editorial emphasis |

### Spacing Scale

```
--sq-space-xxs: 0.25rem  (4px)
--sq-space-xs:  0.5rem   (8px)
--sq-space-sm:  1rem     (16px)
--sq-space-md:  2rem     (32px)
--sq-space-lg:  4rem     (64px)
--sq-space-xl:  8rem     (128px)
```

### Grid System

- 12-column grid on desktop
- 4-column grid on tablet
- 1-column grid on mobile
- 8px baseline grid
- Max content width: 1440px

### Motion Principles

- Staggered reveals (20ms delay between elements)
- Scroll-triggered opacity and transform
- Reduced-motion respected via `prefers-reduced-motion`
- No autoplay animation without user interaction

## Reusable Components

1. `nav` — Fixed navigation with mobile disclosure
2. `hero` — Full-viewport hero with animated square motif
3. `capabilities` — Grid of capability cards
4. `proof` — Evidence/metrics section
5. `cta` — Call-to-action system
6. `footer` — Multi-column footer

## Prospect-Specific Content

All content in `agency/index.html` is Squares-specific and may be modified freely during the speculative phase.

## Transfer Principles

To repurpose for a new prospect:
1. Replace content in `agency/index.html`
2. Adjust design tokens in `assets/design-tokens.css` (colors, typography)
3. Update metadata and structured data
4. All interaction patterns remain intact