name: mara-design
version: alpha
description: >
  A tattoo-artist studio page styled like a flash binder taped to a shop window:
  warm bone-paper surface (#E9E4DA) and near-black ink (#141210), with a single
  blood-red voltage (#9B1B1B) and an olive-drab muted tone (#6E6B4E). The
  signature moves are torn-edge swaying flash cards held by translucent tape,
  hand-drawn SVG line art that self-inks (swallow, spiderweb, scribble
  underlines), torn ink-strip section dividers, and a hard offset drop-shadow
  print look. Type pairs a Western slab display (Rye) for the name, a condensed
  poster face (Anton) for headings, Space Grotesk for body, and Rock Salt for
  handwritten scrawl. A fixed film-grain overlay and paper-noise tone sit over
  everything. Geometry is mostly sharp/zero-radius with rotated, clip-path-torn
  cards.
colors:
  # Brand / Voltage
  ink-red: '#9B1B1B'        # the one accent: scrawl text, underlines, halftone, borders, footer rule, BOOKING OPEN
  # Surface
  paper: '#E9E4DA'          # page surface, cards, light sections, footer
  ink: '#141210'            # near-black ink: dark sections, text, borders, hard shadows
  # Text
  text-default: '#141210'   # body/heading on paper
  text-muted: '#6E6B4E'     # olive-drab: captions, labels, chips, footer meta
  text-on-ink: '#E9E4DA'    # paper-colored text on dark sections
  # Hairlines / overlays
  tape: 'rgba(233,228,218,0.55)'    # translucent masking-tape strips
  grain: 'rgba(0,0,0,0.09)'         # fixed fractal-noise grain overlay (multiply)
typography:
  name:
    fontFamily: "'Rye', serif"
    fontSize: clamp(19vw, 19vw, 10.5rem)
    fontWeight: 400
    lineHeight: 0.82
  head:
    fontFamily: "'Anton', sans-serif"
    fontSize: clamp(2.25rem, 8vw, 8rem)
    fontWeight: 400
    lineHeight: 1
    textTransform: uppercase
  body:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.625
  scrawl:
    fontFamily: "'Rock Salt', cursive"
    fontSize: 14px
    fontWeight: 400
  label:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 2.75px
    textTransform: uppercase
rounded:                      # essentially zero-radius / brutalist print
  none: 0px
  sm: 0px
spacing:                      # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 56px
  section: 80px
components:
  flash-card:
    backgroundColor: '{colors.paper}'
    border: 'none'
    textColor: '{colors.text-muted}'
    typography: '{typography.head}'
    rounded: '{rounded.none}'
    padding: '8px 8px 36px'
    shadow: '6px 6px 0 rgba(0,0,0,0.4)'
    note: 'rotated; tape strip on top; halftone red overlay + grayscale->contrast img on hover; sways via keyframes'
  healed-card:
    backgroundColor: '{colors.paper}'
    border: '3px solid {colors.ink}'
    textColor: '{colors.text-default}'
    typography: '{typography.scrawl}'
    rounded: '{rounded.none}'
    padding: '12px 12px 48px'
    shadow: '5px 5px 0 rgba(20,18,16,0.5)'
    note: 'rotated polaroid in horizontal scroll strip; grayscale 300px image'
  chip:
    backgroundColor: 'transparent'
    border: '1px solid {colors.text-muted}'
    textColor: '{colors.text-muted}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '4px 12px'
  chip-inverse:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.text-on-ink}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '4px 12px'
  stamp-button:
    backgroundColor: 'rgba(155,27,27,0.15)'
    border: '3px solid {colors.ink-red}'
    textColor: '{colors.text-on-ink}'
    typography: '{typography.head}'
    rounded: '{rounded.none}'
    padding: '16px 32px'
    note: 'rotated -2deg; inset 0 0 0 2px ink-red ring; hover rotate -3deg scale 1.03; active rotate 0 scale .97'
  intake-input:
    backgroundColor: 'transparent'
    textColor: '{colors.text-on-ink}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    note: 'ruled-paper repeating-linear-gradient underlines; red SVG scribble draws on focus'
  intake-form:
    backgroundColor: 'rgba(20,18,16,0.4)'
    border: '2px dashed rgba(233,228,218,0.7)'
    textColor: '{colors.text-on-ink}'
    rounded: '{rounded.none}'
    padding: '28px to 40px'
  tape:
    backgroundColor: '{colors.tape}'
    border: '1px dashed rgba(20,18,16,0.15) (left/right)'
    rounded: '{rounded.none}'
    note: '120x38px (varies); shadow 0 2px 6px rgba(20,18,16,0.25); rotated'
motion:
  swallow-draw: 'SVG stroke self-inks on load via GSAP: strokeDashoffset 0, dur 1.6s power2.inOut, stagger 0.25, delay 0.4'
  web-draw: 'spiderweb strokes draw on scroll (ScrollTrigger top 80%): dur 1.4s power1.inOut, stagger 0.12'
  scribble-draw: 'underline scribble draws on input focus: dur 0.5s power1.out (CSS scribbleDraw .5s ease forwards)'
  sway: 'flash cards sway infinitely: sway1 6s / sway2 7.5s / sway3 5.5s ease-in-out, ~±2deg, origin top center'
  halftone-hover: 'red halftone dot overlay opacity 0->0.92 over .35s; img contrast(1.2) brightness(.9)'
  stamp-hover: 'transform .15s ease rotate/scale'
  healed-reveal: 'polaroids fade+rise (opacity 0, y 30) dur 0.7 stagger 0.12 on scroll (top 85%)'
icons:
  library: Tabler icons (webfont, ti)
  style: outline
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.text-muted}'
  note: 'ti-tag in a form label, ti-check inside hand-drawn checkbox; most decorative marks are inline SVG line art, not icon-font'

Mara Kestrel

mara-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Mara Kestrel is a one-page site for a solo tattoo artist, art-directed like a flash binder and shop window rather than a typical web layout. The whole page sits on warm bone paper (#E9E4DA) over near-black ink (#141210), with one loud voltage — blood red #9B1B1B — reserved for handwritten scrawl, scribble underlines, the halftone hover wash, and the footer rule. A drab olive (#6E6B4E) carries muted captions, chips and labels. Two fixed texture layers — a fractal-noise grain-overlay (opacity 0.09, multiply) and a paper-tone noise fill — give everything a printed, photocopied grit. The signature moves are tactile and analog: flash cards with hard 6px 6px 0 offset shadows that gently sway, held to the wall by translucent tape strips; hand-drawn SVG line art (a swallow, a spiderweb, scribbled form underlines) that self-inks via GSAP; a hero photo clipped to a torn clip-path polygon; and jagged torn-ink SVG strips dividing sections. Type is pure poster shop: Rye slab-serif for the giant "Mara Kestrel" name, Anton condensed caps for headings, Space Grotesk for body, and Rock Salt for the inky handwritten asides. Geometry is brutalist — sharp corners everywhere, with rotation and torn clip-paths doing the softening.

Colors

Brand / Voltage. ink-red #9B1B1B is the single accent and appears sparingly but everywhere it matters: the "BOOKING OPEN" status, all Rock Salt scrawl text, the hero swallow stroke, the halftone hover overlay color, the scribble underlines on form fields, the stamp button border/ring, the footer address line and the 5px footer base rule.

Surface. paper #E9E4DA is the page background and the fill of every light section, card and the footer. ink #141210 is the near-black: it fills the two dark sections (The Flash, Shop Intake), all body text on paper, every hairline border, the torn-strip dividers, and the hard offset shadows.

Text. text-default #141210 on paper; text-on-ink #E9E4DA on dark sections; text-muted #6E6B4E (olive-drab) for figcaptions, uppercase labels, chips, hours/contact meta and the copyright line. Body copy is often dimmed with opacity (/80, /60).

Hairlines / overlays. tape rgba(233,228,218,0.55) are the masking-tape strips (with dashed left/right edges and a soft shadow). grain rgba(0,0,0,0.09) is the fixed multiply grain. Additional one-off translucencies: form background rgba(20,18,16,0.4), dashed form border rgba(233,228,218,0.7), stamp fill rgba(155,27,27,0.15).

Typography

Four faces, all Google Fonts via one @import: Rye (font-name, Western slab serif — the display name), Anton (font-head, condensed grotesque caps — headings, chips, buttons), Space Grotesk 400/500/700 (font-body — body, labels), and Rock Salt (font-scrawl, handwritten — accents/captions). These are all open-source, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
name	19vw / 10.5rem (lg)	400	0.82	tight (-ml-1)	"Mara Kestrel" hero, footer logo (5xl)
head	2.25rem–8rem (text-2xl→8xl)	400	1 (none)	tight, uppercase	section H2s, subhead, chips, button, checkbox label
body	15px	400	1.625 (relaxed)	normal	paragraphs, form text
scrawl	12–14px	400	normal	normal, slight rotation	red handwritten asides, captions
label	11px	400	normal	0.2em–0.3em, uppercase	top bar, field labels, chips, footer meta

Layout

Base unit 4px on the Tailwind scale; section padding is px-6 md:px-14 with py-20/py-24. The page is a vertical stack of full-bleed sections alternating paper and ink: a top ledger bar → hero (12-col grid, 7/5 split) → torn divider → The Flash (CSS columns-2/3/4 masonry of swaying flash cards on ink) → torn divider → Healed (horizontal-scroll strip of polaroids) → torn divider → Shop Intake (dark, form in a left max-w-2xl) → footer (3-col grid on paper). No fixed nav. Signature structural moves: the jagged torn-ink SVG dividers between sections, absolutely-positioned decorative SVG line art (swallow top-right of hero, spiderweb top-right of intake, ink-blob bottom-right of footer), and rotated/taped cards that break the grid. Whitespace is generous and intentional; content frequently nudged with negative margins and rotations for a pasted-up collage feel.

Elevation & Depth

No soft/blurred shadows — depth is hard offset print shadows: flash cards use 6px 6px 0 rgba(0,0,0,0.4), healed polaroids 5px 5px 0 rgba(20,18,16,0.5), both with no blur. Tape strips carry a small real shadow 0 2px 6px rgba(20,18,16,0.25). The stamp button uses an inset ring 0 0 0 2px #9B1B1B inset rather than a shadow. Depth otherwise comes from the fixed grain/paper texture layers, halftone overlays, and z-index stacking of decorative SVGs over content.

Shapes

Brutalist and sharp: effectively zero border-radius throughout — no rounded-* classes are used. Visual softening comes instead from rotation (cards at ±1–4deg, scrawl text rotated), torn clip-path polygons (the hero image), and the irregular hand-drawn jagged SVG section dividers. Borders are square: 1px chips, 2px top ledger, 3px polaroid/button borders, 2px dashed form border.

Components

• Flash card — paper fill, no border, 6px 6px 0 rgba(0,0,0,0.4) hard shadow, padding 8px 8px 36px, rotated; tape strip pinned on top; Anton No. 0X caption in olive; grayscale image gains a red halftone-dot overlay and contrast bump on hover; sways infinitely.
• Healed card — paper fill, 3px solid #141210 border, 5px 5px 0 rgba(20,18,16,0.5) shadow, padding 12px 12px 48px, rotated polaroid with a 300px grayscale photo and a Rock Salt caption; lives in a horizontal scroll strip with a red-thumbed custom scrollbar.
• Chip — transparent, 1px solid #6E6B4E, olive text, 4px 12px, uppercase 11px label. Inverse variant: #141210 fill, paper text (↓ scroll the binder).
• Stamp button — rgba(155,27,27,0.15) fill, 3px solid #9B1B1B border with inset red ring, paper Anton text, 16px 32px, rotated -2deg; label "Submit Request"; hover rotates/scales.
• Intake input — transparent with ruled-paper repeating-gradient underlines, paper text; a red SVG scribble underline draws in on focus.
• Intake form — rgba(20,18,16,0.4) fill, 2px dashed paper border, ~28–40px padding; ledger header reads "Form / Intake No. ___ · Date: __ / __ / __".
• Tape — rgba(233,228,218,0.55) strip, dashed left/right edges, soft shadow, ~120×38px, rotated; used to pin cards and the hero photo.
• Hand-drawn checkbox — inline SVG square outline with a Tabler ti-check revealed in red; label "18+ / Consent confirmed".

Motion

GSAP + ScrollTrigger drive the ink-drawing effects. On load, the swallow line art self-inks (strokeDashoffset → 0, 1.6s power2.inOut, stagger 0.25, delay 0.4). On scroll the spiderweb draws in (1.4s power1.inOut, stagger 0.12, trigger top 80%) and healed polaroids fade and rise (opacity 0 → 1, y 30 → 0, 0.7s, stagger 0.12, trigger top 85%). Flash cards sway forever via CSS keyframes (sway1 6s, sway2 7.5s, sway3 5.5s, ease-in-out, ~±2deg, origin top center). Form-field focus draws a red scribble underline (0.5s). Halftone dot overlay fades in on card hover (.35s) with an image contrast/brightness shift. The stamp button rotates and scales on hover (.15s) and presses flat on active.

Iconography

Tabler icon webfont (ti classes), outline style — used minimally for UI: ti-tag beside the Placement field label and ti-check inside the hand-drawn checkbox. Almost all other marks are bespoke inline SVG line art (swallow, spiderweb, ink blob, torn dividers, scribble underlines) stroked in red, olive, or filled ink — decorative rather than functional. Icon color follows context (olive #6E6B4E for the tag, red #9B1B1B for the check).

Do's and Don'ts

• Do keep red #9B1B1B rare and high-impact — scrawl, underlines, the halftone wash, one rule.
• Do keep corners sharp (zero radius) and let rotation, torn clip-paths and jagged dividers do the softening.
• Do use hard, no-blur offset shadows (Npx Npx 0) for the print/paper feel.
• Do keep the grain + paper texture layers on; they carry the photocopied vibe.
• Don't introduce rounded corners, soft blurred shadows, or gradients (the only gradients are the ruled-paper underlines and the halftone mask).
• Don't mix the four faces' roles — Rye is name-only, Anton is headings/caps, Space Grotesk is body, Rock Salt is handwritten asides.
• Don't straighten the cards or remove the tape; the pinned, pasted-up collage is the identity.

Known Gaps

• Display sizes are clamped descriptions of Tailwind responsive classes (e.g. text-[19vw] lg:text-[10.5rem], text-2xl md:text-8xl); the table lists the range rather than a single value.
• Spacing tokens are an inferred summary of the Tailwind scale actually used, not declared design tokens.
• The grain/paper textures are inline data-URI SVG fractal-noise filters; their exact noise output is generated, not a fixed color value.
• Halftone overlay color #9B1B1B is applied through a radial-gradient dot mask; the visible result depends on blend mode (multiply) over the photo.