Artisan Mill Visiting Card — Warm Scroll Reveal

# CRIMSON MILL — HERITAGE STONE-MILL DIGITAL VISITING CARD

> A SELF-CONTAINED GENERATION PROMPT FOR A SINGLE, VERTICAL, MOBILE-FIRST
> "DIGITAL VISITING CARD" — A TAP-TO-CONTACT BRAND PAGE FOR A HERITAGE
> STONE-MILL SUPPLIER OF FLOURS, GRAINS, AND SPICES. THE PAGE STACKS A
> BRANDED HERO, A TWO-UP CONTACT GRID, A PRODUCT SHOWCASE GALLERY, A
> FLAGSHIP-STORE LOCATION BLOCK, AND A HOURS/FOOTER STRIP — EACH AS A
> ROUNDED, SOFT-SHADOWED CARD ON A WARM CANVAS, REVEALED ON SCROLL.

## AESTHETIC IDENTITY

THE NAMED DESIGN LANGUAGE IS **"MILLSTONE CRAFT"** — A WARM, ARTISANAL,
PRINT-ADJACENT IDENTITY FOR A FICTIONAL HERITAGE BUSINESS NAMED
**CRIMSON MILL** ("STONE-GROUND SINCE 1962"). THE MOOD IS HONEST,
HAND-MADE, AND CONFIDENT — A BRANDED PACKAGING LABEL CROSSED WITH A
MODERN LINK-IN-BIO CARD. IT IS DELIBERATELY THE OPPOSITE OF GENERIC
SAAS / AI-SLOP: NO PURPLE GRADIENTS, NO GLASSMORPHISM, NO NEON. WARM
PAPER-CREAM CANVAS, INK-CHARCOAL TYPE, A DECISIVE BRICK-CRIMSON ACCENT,
AND A WHEAT-GOLD SECONDARY. CONDENSED UPPERCASE DISPLAY TYPE GIVES IT
THE FEEL OF A STAMPED FLOUR SACK.

## COLOR PALETTE (EXACT)

- CANVAS / BACKGROUND: `#F4EDE1` (WARM PAPER CREAM).
- CARD SURFACE: `#FBF7F0` (LIGHTER CREAM) AND PURE-ISH `#FFFDF9`.
- INK / PRIMARY TEXT: `#2B2118` (DEEP ROAST CHARCOAL).
- SECONDARY TEXT: `#6B5D4D` (WARM TAUPE).
- BRAND CRIMSON (PRIMARY ACCENT): `#A6271C` WITH A DEEPER `#7E1A12`.
- WHEAT GOLD (SECONDARY ACCENT): `#C99A3C` WITH TINT `#F3E4C4`.
- SAGE / WHATSAPP TONE: DARK `#2F5D3A`, TINT `#DCEBD9`.
- TERRACOTTA / CALL TONE: `#C2622D`, TINT `#F6E2D2`.
- HAIRLINE BORDERS: `rgba(43,33,24,0.10)`.

## TYPOGRAPHY

- DISPLAY / HEADINGS: **OSWALD** (WEIGHTS 300–700), USED UPPERCASE WITH
  TIGHT TRACKING FOR THE BRAND NAME AND SECTION LABELS — STAMPED,
  CONDENSED, INDUSTRIAL-CRAFT FEEL.
- BODY / UI: **INTER TIGHT** (WEIGHTS 400/500/600) FOR TAGLINES AND
  SECONDARY COPY.
- WIDE LETTER-SPACING (`0.2em`–`0.5em`) ON SMALL UPPERCASE LABELS;
  NEGATIVE TRACKING ON LARGE DISPLAY HEADLINES.
- SELF-HOST / VENDOR BOTH FONT FAMILIES LOCALLY (WOFF2) — NO CDN.

## LAYOUT & STRUCTURE

A SINGLE CENTERED COLUMN, `max-width` ABOUT `34rem` ON MOBILE, EXPANDING
TO A WIDER `max-width` (~`72rem`) ON DESKTOP WHERE SOME CARDS BECOME
HORIZONTAL. GENEROUS VERTICAL RHYTHM (`~1.5rem` GAP BETWEEN CARDS),
PAGE PADDING `1.5rem`–`5rem`. A THIN CRIMSON GRADIENT HIGHLIGHT BAR IS
PINNED TO THE TOP EDGE.

1. **HERO / BRAND CARD** — A WHITE-CREAM ROUNDED CARD. AT TOP, AN
   INFINITE MARQUEE TICKER STRIP IN A CRIMSON-TINT BAND ("STONE-GROUND
   FLOUR • HEIRLOOM GRAINS • HAND-MILLED SPICE • SMALL-BATCH ROASTS •").
   BELOW: AN "ESTABLISHED 1962" EYEBROW, THE LARGE TWO-LINE BRAND NAME
   **CRIMSON / MILL** IN CONDENSED UPPERCASE, A SMALL ROTATED WHEAT-GOLD
   BADGE TILE WITH A MILL/GRAIN ICON IN THE TOP-RIGHT, AND A ONE-LINE
   TAGLINE ("THE MILLHOUSE FOR BAKERS WHO TASTE THE DIFFERENCE.").
2. **CONTACT GRID** — TWO EQUAL TAPPABLE CARDS SIDE BY SIDE: A SAGE
   "WHATSAPP" CARD (`wa.me` LINK) AND A TERRACOTTA "CALL NOW" CARD
   (`tel:` LINK), EACH WITH A FILLED ICON CHIP AND A CONDENSED UPPERCASE
   LABEL. ACTIVE/PRESS SCALE-DOWN FEEDBACK.
3. **PRODUCT SHOWCASE** — A CENTERED SMALL-CAPS LABEL ("FROM OUR MILL")
   ABOVE A GRID OF FOUR SQUARE PRODUCT IMAGES (2-COL MOBILE, 4-COL
   DESKTOP), ROUNDED WITH HAIRLINE BORDERS AND SOFT SHADOW. IMAGES MUST
   BE VENDORED LOCALLY (FLOUR, GRAIN, BREAD, SPICE).
4. **LOCATION CARD** — A SPLIT CARD: A WHEAT-GOLD-TINT PANEL WITH A
   PULSING "VISIT THE MILLHOUSE" DOT, A LARGE CONDENSED ADDRESS LINE,
   AND A SMALL UPPERCASE SUB-ADDRESS; PLUS AN ACTION PANEL WITH A
   CRIMSON "GET DIRECTIONS" BUTTON AND A BORDERED "EMAIL US" BUTTON.
   STACKS ON MOBILE, HORIZONTAL ON DESKTOP.
5. **HOURS / FOOTER STRIP** — A CENTERED DARK PILL WITH OPENING HOURS
   ("MON–SAT · 8:00 AM — 7:00 PM"), THEN A FAINT UPPERCASE COPYRIGHT
   AND A TINY MISSION LINE.

## MOTION / ANIMATION / INTERACTION

- **SCROLL REVEAL**: EACH CARD STARTS AT `opacity:0` AND `translateY(16px)`
  AND EASES IN (`cubic-bezier(0.22,1,0.36,1)`, ~`0.8s`) VIA AN
  `IntersectionObserver` AS IT ENTERS THE VIEWPORT, WITH A SMALL
  STAGGER BETWEEN SIBLINGS.
- **MARQUEE TICKER**: HARDWARE-ACCELERATED `translateX` LOOP (~30S),
  DUPLICATED CONTENT FOR A SEAMLESS WRAP; PAUSES ON HOVER.
- **PRESS FEEDBACK**: CONTACT AND BUTTON CARDS SCALE TO `~0.96` ON
  ACTIVE; SUBTLE LIFT (TRANSLATE + SHADOW) ON HOVER.
- **LIVE DOT**: THE LOCATION "OPEN" DOT GENTLY PULSES WITH A SOFT GLOW.
- RESPECT `prefers-reduced-motion`: DISABLE THE MARQUEE AND REVEAL
  TRANSFORMS, SHOWING ALL CONTENT IMMEDIATELY.

## RESPONSIVE BEHAVIOR

- MOBILE-FIRST SINGLE COLUMN; COMFORTABLE TAP TARGETS (≥48PX).
- AT THE DESKTOP BREAKPOINT (~`768px`+): WIDEN THE COLUMN, MAKE THE
  SHOWCASE 4-UP, AND TURN THE LOCATION CARD HORIZONTAL WITH A FIXED
  ACTION RAIL. HERO TYPE SCALES UP.
- NO HORIZONTAL OVERFLOW; ANTIALIASED TEXT; SMOOTH SCROLL.

## TECH & DELIVERY

- SINGLE SELF-CONTAINED STATIC PROJECT (PLAIN HTML + CSS + A SMALL
  VANILLA-JS FILE) — NO BUILD STEP REQUIRED, NO RUNTIME CDN.
- ALL ASSETS (FONTS, PRODUCT IMAGERY, ICONS) VENDORED LOCALLY UNDER
  `assets/` AND REFERENCED BY RELATIVE PATH SO THE PROJECT RUNS OFFLINE.
- SEMANTIC, ACCESSIBLE MARKUP: REAL `tel:`/`wa.me`/`mailto:`/MAPS LINKS,
  `aria-label`S ON ICON ACTIONS, AND VISIBLE FOCUS STATES.
- AIM FOR DISTINCTIVE, POLISHED, NON-GENERIC CRAFT-BRAND UI.