Creative Workspace Landing — Editorial Paper Grid

# ATELIER PRESS — "EDITORIAL PAPER GRID" CREATIVE-WORKSPACE LANDING PAGE

## NAMED AESTHETIC IDENTITY

BUILD A SINGLE, SELF-CONTAINED, FULLY RESPONSIVE MARKETING LANDING PAGE FOR A
FICTIONAL CREATIVE-WORKSPACE / STUDIO-MEMBERSHIP BRAND NAMED **ATELIER PRESS** —
"YOUR WORKPLACE FOR CREATIVE FREEDOM." THE NAMED DESIGN LANGUAGE IS **"EDITORIAL
PAPER GRID"**: A QUIET, EXPENSIVE, PRINT-FIRST AESTHETIC THAT FEELS LIKE A
LARGE-FORMAT DESIGN MONOGRAPH OR AN INDEPENDENT ARCHITECTURE MAGAZINE THAT HAPPENS
TO SCROLL. EVERYTHING SITS ON WARM CREAM PAPER STOCK, DIVIDED BY CRISP HAIRLINE
RULES INTO A STRICT MODULAR GRID. THE OPPOSITE OF GLASSMORPHIC SAAS — NO BLUR
CARDS, NO PURPLE GRADIENTS, NO NEON, NO EMOJI. CONFIDENT, TYPOGRAPHIC, MEASURED.

## COLOR PALETTE (EXACT)

- PAPER / BACKGROUND: WARM CREAM `rgb(255, 253, 240)` (`#FFFDF0`).
- INK / TEXT + LINES: NEAR-BLACK INK `rgb(23, 27, 28)` (`#171B1C`).
- HAIRLINE RULES: INK AT 20% OPACITY (`rgba(23,27,28,0.2)`).
- SECONDARY SURFACE: A SLIGHTLY COOLER OFF-WHITE `rgb(250, 250, 250)` USED FOR
  ALTERNATING PANELS.
- SINGLE SATURATED ACCENT: A WARM VERMILION-CORAL `rgb(230, 78, 42)` (`#E64E2A`)
  USED SPARINGLY FOR THE CTA HOVER, AN UNDERLINE MARK, A DOT, AND ONE NUMERIC
  INDEX HIGHLIGHT. NEVER FLOOD-FILL WITH IT.
- IMAGERY: FULL-BLEED COLORFUL PHOTOS OF CREATIVE WORKSPACES / OFFICES, SUBTLY
  WARM-GRADED SO THEY SIT ON THE CREAM PAPER WITHOUT CLASHING.

## TYPOGRAPHY

- DISPLAY + UI: **FAMILJEN GROTESK** (WEIGHTS 400/500/600), A HUMANIST GROTESQUE.
  HEADLINES ARE SET AT WEIGHT 400 AT MASSIVE SIZES (UP TO ~84PX) WITH VERY TIGHT
  TRACKING (`-0.06EM`) AND LEADING NEAR `1.0`.
- BODY / META: A NEUTRAL SYSTEM SANS (ARIAL / HELVETICA STACK) FOR PARAGRAPHS AND
  SMALL CAPS LABELS, GIVING A PRINT-CAPTION FEEL DISTINCT FROM THE DISPLAY FACE.
- LABELS / EYEBROWS: UPPERCASE, LETTER-SPACED (`0.2EM`), SMALL (11–12PX), OFTEN
  PREFIXED BY A TWO-DIGIT INDEX LIKE `01 —`.

## LAYOUT & SECTION BREAKDOWN

A STRICT FULL-WIDTH MODULAR GRID, EVERY SECTION SEPARATED BY 1PX INK-20% RULES.

1. **TOP BAR / NAV** — A THIN FIXED HEADER ON CREAM: WORDMARK `ATELIER PRESS` LEFT
   (WITH A SMALL VERMILION DOT), CENTER/RIGHT INLINE NAV (`SPACES`, `STUDIO`,
   `MEMBERSHIP`, `JOURNAL`), AND A SMALL OUTLINED `BOOK A TOUR` PILL. SEPARATED
   FROM THE HERO BY A HAIRLINE.

2. **HERO — SPLIT EDITORIAL ROW** (THE SIGNATURE COMPOSITION). A ROW DIVIDED BY A
   VERTICAL HAIRLINE: LEFT COLUMN (~62%) HOLDS THE GIANT HEADLINE "YOUR WORKPLACE
   FOR CREATIVE FREEDOM", A SHORT SUBHEAD ("WE PROVIDE YOU SPACE FOR CREATIVITY
   AND IDEAS."), A DARK INK CTA BUTTON (`VIEW SPACES`) THAT FLIPS TO VERMILION ON
   HOVER, AND A ROW OF SMALL META STATS. RIGHT COLUMN (~38%) IS A TALL FULL-BLEED
   PORTRAIT PHOTO OF A VIBRANT WORKSPACE THAT SCALES UP SLOWLY ON HOVER. BELOW THE
   ROW, A HAIRLINE, THEN A FULL-WIDTH WIDE LANDSCAPE PHOTO BAND OF A COLORFUL
   CREATIVE STUDIO, FRAMED BY HAIRLINES TOP AND BOTTOM.

3. **MARQUEE STRIP** — A SINGLE-LINE HORIZONTAL AUTO-SCROLLING TICKER OF KEYWORDS
   (`PRIVATE STUDIOS · HOT DESKS · MEETING ROOMS · 24/7 ACCESS · COMMUNITY`)
   SEPARATED BY VERMILION DOTS, BOUNDED BY HAIRLINES.

4. **SPACES — INDEXED GRID** — A 2×2 (DESKTOP) / 1-COL (MOBILE) GRID OF SPACE
   TYPES (PRIVATE STUDIO, HOT DESK, MEETING SUITE, EVENT FLOOR). EACH CELL: A
   TWO-DIGIT INDEX, A TITLE, A ONE-LINE DESCRIPTION, A SMALL PHOTO, AND A "↗"
   ARROW THAT NUDGES ON HOVER. DIVIDED BY INTERNAL HAIRLINES.

5. **MANIFESTO / SPLIT STATEMENT** — A LARGE EDITORIAL PULL-QUOTE STATEMENT WITH
   AN INLINE VERMILION UNDERLINE ON ONE PHRASE, PAIRED WITH A SUPPORTING
   PARAGRAPH AND THREE NUMBERED PRINCIPLE LINES.

6. **STATS BAND** — A FULL-WIDTH ROW OF FOUR BIG NUMERIC STATS (E.G. `12`
   LOCATIONS, `2,400+` MEMBERS, `98%` RENEWALS, `24/7` ACCESS) SEPARATED BY
   VERTICAL HAIRLINES, NUMBERS IN THE DISPLAY FACE.

7. **MEMBERSHIP / PRICING** — THREE PLAN CARDS (`DAY PASS`, `RESIDENT`, `STUDIO`)
   AS FLAT HAIRLINE-BORDERED PANELS ON CREAM; THE MIDDLE PLAN MARKED `POPULAR`
   WITH A VERMILION TAG. EACH LISTS PRICE, A FEATURE LIST, AND A CTA.

8. **CTA CLOSER** — A FULL-WIDTH PANEL: BIG HEADLINE "COME MAKE THINGS HERE.",
   AN EMAIL CAPTURE ROW (INPUT + DARK BUTTON), FRAMED BY HAIRLINES.

9. **FOOTER** — MULTI-COLUMN HAIRLINE FOOTER: WORDMARK + TAGLINE, LINK COLUMNS,
   AND A BOTTOM ROW WITH COPYRIGHT AND SMALL LEGAL LINKS.

## MOTION / ANIMATION / INTERACTION SPEC

- **SCROLL REVEAL**: SECTIONS AND GRID CELLS FADE UP (OPACITY 0→1, TRANSLATEY
  20PX→0) VIA INTERSECTIONOBSERVER, STAGGERED, EASE-OUT ~0.8S, ONCE.
- **IMAGE HOVER**: FULL-BLEED PHOTOS SCALE 1→1.05 OVER ~0.7S EASE.
- **CTA BUTTON**: INK FILL FLIPS TO VERMILION ON HOVER WITH A SUBTLE LIFT.
- **MARQUEE**: SEAMLESS INFINITE HORIZONTAL SCROLL (CSS KEYFRAMES, DUPLICATED
  TRACK), PAUSES ON HOVER.
- **GRID ARROWS**: `↗` TRANSLATES UP-RIGHT A FEW PX ON CELL HOVER.
- **FLOAT**: ONE SMALL DECORATIVE ELEMENT GENTLY FLOATS (±15PX, 4S LOOP).
- RESPECT `PREFERS-REDUCED-MOTION`: DISABLE MARQUEE + REVEAL TRANSFORMS.

## RESPONSIVE BEHAVIOR

- DESKTOP: SPLIT HERO ROW SIDE-BY-SIDE WITH VERTICAL DIVIDER; MULTI-COLUMN GRIDS.
- TABLET/MOBILE: HERO COLLAPSES TO STACKED (TEXT THEN PHOTO), VERTICAL DIVIDERS
  BECOME HORIZONTAL RULES, GRIDS BECOME SINGLE COLUMN, NAV COLLAPSES TO WORDMARK +
  A COMPACT MENU, TYPE SCALES DOWN (HEADLINE ~60PX → ~40PX).
- ALL ASSETS VENDORED LOCALLY; FONTS SELF-HOSTED OR LOCALLY CACHED; NO HOTLINKING.
  THE PAGE MUST RUN FULLY OFFLINE FROM A STATIC SERVER.