56 lines
2.5 KiB
Markdown
56 lines
2.5 KiB
Markdown
|
# CLAUDE.md
|
|||
|
|
|
|||
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|||
|
|
|
|||
|
|
## Project Overview
|
|||
|
|
|
|||
|
|
A brutalist editorial landing page for Alina Mamut, a brand strategy and creative consulting professional. The site is a premium magazine-style single-page website showcasing four service offerings, with content primarily in Russian.
|
|||
|
|
|
|||
|
|
**Status**: Pre-development — only `PLANNING.md` (content + design specs) and `design-spec.jpg` (visual spec) exist. No framework or build tooling has been chosen yet.
|
|||
|
|
|
|||
|
|
## Design System
|
|||
|
|
|
|||
|
|
Strict visual identity — do not deviate from these values.
|
|||
|
|
|
|||
|
|
**Typography**:
|
|||
|
|
- Headlines: **Druk Wide Bold** (tight line-height ~0.9)
|
|||
|
|
- Body: **Inter Regular** only — no medium/bold weights for body text
|
|||
|
|
- Desktop: H1 48px/40px, H2 31px/30px, H3 24px/20px, Body 16px/18px, Caption 16px/44px
|
|||
|
|
- Mobile: H1 32px/40px, H2 34px/30px, H3 20px/80px, Body 16px/14px, Caption 14px/12px
|
|||
|
|
|
|||
|
|
**Color palette** (flat only — no gradients, shadows, or cards):
|
|||
|
|
| Name | Hex |
|
|||
|
|
|------|-----|
|
|||
|
|
| Blue | `#007DDA` |
|
|||
|
|
| Warm White | `#E7F2EA` |
|
|||
|
|
| Stone Grey | `#FCC3C3` |
|
|||
|
|
| Ink Black | `#BD5E24` |
|
|||
|
|
| Oxide Red | `#FB9322` |
|
|||
|
|
|
|||
|
|
**Grid**:
|
|||
|
|
- Desktop: 12 columns, 1200px container, 1424px max-width, 32px gutters
|
|||
|
|
- Mobile: 4 columns, 20px margins
|
|||
|
|
- Vertical spacing between sections: 160–220px
|
|||
|
|
|
|||
|
|
**Design don'ts**: No phone mockups, no SaaS/startup patterns, no subscription-style UI, no shadowed text, no icons, pills, or card components.
|
|||
|
|
|
|||
|
|
## Page Structure (5 Screens)
|
|||
|
|
|
|||
|
|
1. **Hero** — Massive left-aligned headline (~7 cols), smartphone mockup center-right (~4 cols), small editorial annotations with thin hairline connectors, primary CTA
|
|||
|
|
2. **Manifest** — Asymmetric layout, large text block (5 cols), opposite side mostly empty with small caption
|
|||
|
|
3. **Journal Preview** — Large image breaking grid (~7 cols), offset text block (~4 cols), oversized faded number in background
|
|||
|
|
4. **Selected Cases** — Dark background, 2×2 editorial image tiles (6 cols each), overlapping titles
|
|||
|
|
5. **Access/FAQ** — Editorial accordion (8 cols centered), numbered thin rows, one-at-a-time expand behavior
|
|||
|
|
|
|||
|
|
**Header**: Minimal sticky nav — wordmark left, text anchors right. Buttons: rectangular, 2–4px border-radius.
|
|||
|
|
|
|||
|
|
## Content
|
|||
|
|
|
|||
|
|
All service descriptions and UI copy are in Russian (see `PLANNING.md` for full text). Four service sections expand via accordion:
|
|||
|
|
1. Creative & strategy consultations
|
|||
|
|
2. Brand platform development
|
|||
|
|
3. Communication strategies
|
|||
|
|
4. Special projects & creative concepts
|
|||
|
|
|
|||
|
|
CTA directs to Telegram: @alinamamut
|