Northline Atelier Architecture Studio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

# Northline Atelier — Architecture Studio Template

A premium four-page architecture studio website built with Tailwind CSS, semantic HTML, inline SVG, and small scoped vanilla JS where interaction is useful. The visual direction is **Soft Modern**: warm paper tones, quiet charcoal type, thin rules, editorial grids, restrained rounded corners, and generous whitespace.

## Structure

```text
northline-atelier/
├── pages/
│   ├── index.html       # Home, featured project, practice overview, selected work
│   ├── projects.html    # Project archive with category filters
│   ├── studio.html      # Studio profile, principles, team, capabilities
│   └── contact.html     # Enquiry form, studio details, process
├── preview.html         # Template gallery shell: overview + pages index + design-system summary
├── metadata.json
└── README.md
```

There are no `assets/`, `css/`, `js/`, or `images/` directories. Visual details use Tailwind utilities, CSS shapes, gradients, and inline SVG.

## Design language

- Soft warm background: `#F5F2EC`
- Ink: `#20201D`; muted text: `#77746C`
- Fine borders instead of heavy cards
- Serif display headlines paired with a clean sans-serif body
- Large editorial whitespace and asymmetric grids
- Restrained olive accent used for active states and small highlights
- Subtle image-like architectural drawings made with inline SVG

## Pages

| Page | Purpose |
| --- | --- |
| Home | Studio introduction, featured project, selected work, approach and CTA |
| Projects | Filterable project archive with categories and project metadata |
| Studio | Practice story, principles, capabilities and team |
| Contact | Project enquiry form, process, contact details and studio hours |

## Responsive & accessibility

The layout is mobile-first and designed for 320px through 1920px+. Grids intentionally change composition at breakpoints rather than simply stacking. Navigation becomes a compact menu on smaller screens, forms remain touch-friendly, and long project titles wrap without overflow. Pages use semantic landmarks, visible keyboard focus, labelled form controls, descriptive SVG titles, and reduced-motion handling.

## Usage

Open any file in `pages/` directly or serve the template with a static server. Tailwind is loaded through the CDN, so no build step is required.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# AGENTS.md — Northline Atelier Architecture Studio

Guidance for an AI agent adapting this template. Read this before editing.

## What this template is

A premium four-page architecture studio website built with Tailwind CSS, semantic HTML, inline SVG,and small scoped vanilla JS where interaction is useful. The visual direction is **Soft Modern**: warm paper tones, quiet charcoal type, thin rules, editorial grids, restrained rounded corners,and generous whitespace.



## Design system

Soft warm background `#F5F2EC`, ink `#20201D`, muted text `#77746C`, fine borders instead of heavy cards, serif display headlines paired with a clean sans-serif body, large editorial whitespace and asymmetric grids, a restrained olive accent used for active states and small highlights, subtle image-like architectural drawings made with inline SVG.



## File layout

```
northline-atelier/
├── pages/
│   ├── index.html        # Home: studio introduction, featured project, selected work, approach, CTA
│   ├── projects.html     # Filterable project archive with categories
│   ├── studio.html       # Practice story, principles, capabilities, team
│   └── contact.html      # Enquiry form, process, contact details, studio hours
├── preview.html          # Template gallery shell
├── metadata.json
└── README.md
```

No `assets/`, `css/`, `js/`, or `images/` directories — visual details use Tailwind utilities, CSS shapes, gradients,and inline SVG.



## How to adapt it

1. **Swap the studio**: replace the Northline brand, projects, team profiles, principles and copy across the pages.
2. **Re-theme**: edit the color values in each page's inline `tailwind.config` (warm paper/ink/olive ramp), keeping one restrained accent.



3. **Add a page**: duplicate a `pages/*.html`, keep the shared navbar + footer,and swap the `<main>` content. Register it in `preview.html`'s page index.



## Do not

- Do not introduce a framework, a build step, or heavy card styling—the fine-border editorial grid is the design language..
- Do not replace the restrained olive accent with a saturated or neon color.



## Quality bar

Semantic landmarks, visible keyboard focus, labelled form controls, descriptive SVG titles, reduced-motion handling, mobile-first responsiveness from 320px through 1920px+. Validate with `python3 scripts/tooling/validators/validate.py` after changes.