name: noor-design
version: alpha
description: >
  A near-black fashion folio for a creative director / stylist, built as a
  hairline grid of mono labels and oversized Playfair Display headlines. The
  surface is #101010; one electric voltage — acid lime #E8FF2E — does all the
  emphasis (accents, the ® mark, look numbers stroked in lime, hover states,
  selection). A dusty-rose #E6B7B0 is the secondary, used only as a hover
  wash (mix-blend-multiply over imagery and as an index-row fill). The
  signature moves are a GSAP-pinned horizontal "runway" of look cards, a
  cursor-following thumbnail on the index rows, an infinite display-italic
  marquee, and vertical lime-outlined look numerals. Type pairs editorial
  serif display, an Inter body with tight tracking, and IBM Plex Mono for all
  micro-labels.
colors:
  # Surface
  ink: '#101010'              # page background, lightbox bg, label chips
  # Text
  bone: '#EFEAE2'            # primary text/headings, hairline base color
  # Brand / Voltage
  acid: '#E8FF2E'            # accent: ®, look numbers, hover, scroll arrow, selection
  # Secondary
  rose: '#E6B7B0'            # hover wash over images (multiply), index-row fill
  # Hairlines (bone at low alpha)
  rule: 'rgba(239,234,226,0.18)'   # .grid-rule grid hairlines
  rule-strong: 'rgba(239,234,226,0.25)' # section top borders
  rule-faint: 'rgba(239,234,226,0.15)'  # index row dividers
typography:
  display:
    fontFamily: "'Playfair Display', serif"
    fontSize: 'clamp(2.25rem, 15vw, 15vw)'
    fontWeight: 900
    lineHeight: 0.78
    letterSpacing: -0.01em
  display-italic:
    fontFamily: "'Playfair Display', serif"
    fontSize: '14vw'
    fontWeight: 900
    lineHeight: 1
    textTransform: none
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.01em
  mono-label:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.25em
    textTransform: uppercase
rounded:                      # the system is fully square — no border radius anywhere
  none: 0px
spacing:                      # 4px base unit; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  mono-eyebrow:
    textColor: '{colors.bone}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '16px 20px'
  label-chip:
    backgroundColor: '{colors.ink}'    # at ~50-60% alpha over imagery
    textColor: '{colors.bone}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '4px 8px'
  look-card:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.bone}'
    rounded: '{rounded.none}'
    padding: '0'
    # full-bleed image, right border hairline, rose multiply wash on hover
  index-row:
    backgroundColor: '{colors.ink}'    # animates to {colors.rose} on hover
    textColor: '{colors.bone}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '20px 48px'
  lightbox-close:
    backgroundColor: 'transparent'     # hover -> {colors.acid}
    textColor: '{colors.bone}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '6px 12px'
    border: '1px solid rgba(239,234,226,0.4)'
  scroll-arrow:
    textColor: '{colors.acid}'
    typography: '{typography.display}'
    # animate-bounce ↓ glyph
motion:
  hero-words: 'GSAP from yPercent 30 + autoAlpha 0, dur 1.1s, stagger 0.15, power3.out, delay 0.2s'
  runway-pin: 'GSAP ScrollTrigger pinned horizontal scroll of #htrack, x to -scrollWidth, ease none, scrub 1'
  look-card-enter: 'GSAP autoAlpha 0 -> 1, y 80 -> 0, scrubbed within the horizontal containerAnimation'
  marquee: 'GSAP xPercent -50, dur 22s, ease none, repeat -1 (infinite)'
  index-cursor: 'anime.js createAnimatable thumbnail follows pointer, x/y dur 380ms ease out(4)'
  index-row-hover: 'anime.js bg -> #E6B7B0 + text -> #101010, dur 260ms ease out(3); thumb opacity 0->1 scale 0.9->1'
  lightbox-open: 'anime.js image scale 1.15->1 + opacity 0->1 dur 600ms out(4); credits opacity/y dur 500ms delay 200ms'
  scroll-arrow: 'Tailwind animate-bounce on the ↓ glyph'
icons:
  library: inline unicode glyphs (no icon font)
  style: typographic arrows / marks (↘ ↓ → ✕ ●)
  sizes: { sm: 10px, md: 12px, lg: 48px }
  color: '{colors.acid}'

Noor

noor-design · alpha

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

Overview

Noor is a near-black editorial fashion folio that reads like a printed lookbook tipped onto the web. The whole page sits on #101010 ink, divided into a strict hairline grid (.grid-rule = rgba(239,234,226,0.18)) of 2-to-4 column cells, each tagged with a tiny IBM Plex Mono label in wide 0.25em caps. Against that restraint, oversized Playfair Display 900 headlines — "NOOR" and italic "HALABI" set at 15vw/12.5vw with crushed 0.78 line-height — anchor the hero, while a single acid-lime voltage #E8FF2E carries every accent: the ®, the [01] index tag, the bouncing scroll arrow, hover states, and the page's ::selection. Bone #EFEAE2 is the workhorse text and the hairline base. The signature interactions are a GSAP-pinned horizontal "runway" where look cards scroll sideways, vertical look numerals rendered as 2px lime text-stroke outlines, a cursor-following thumbnail that trails the pointer across the index rows (which wipe to dusty rose #E6B7B0 on hover), and an infinite display-italic marquee reading "AVAILABLE FOR BOOKINGS". Nothing is rounded — the entire geometry is square, which keeps the print-grid austerity intact.

Colors

Surface. A single ink ground, ink #101010, set on html, body and reused for the full-screen lightbox and for translucent label chips (#101010/50–60) that sit over photography.

Text. bone #EFEAE2 is the primary text and heading color, applied globally on the body wrapper and reused at reduced alphas (/75, /70, /60, /50, /45, /30) for secondary copy, mono labels, and dividers.

Brand / Voltage. acid #E8FF2E is the one electric accent — the ® superscript, the [01] hero tag, the bouncing ↓ arrow, the ↘ corner box border, look-number outlines, index . and look numerals, hover text color on nav/links, and the ::selection highlight (lime fill, ink text).

Secondary. rose #E6B7B0 appears only on interaction: as a mix-blend-multiply wash over look-card images on hover (opacity-70) and as the fill an index row animates to on pointerenter.

Hairlines. All borders are bone at low alpha — rule rgba(239,234,226,0.18) for the main .grid-rule lattice, rule-strong 0.25 for section top borders, and rule-faint 0.15 for index row dividers.

Typography

Three Google Fonts via one @import: Playfair Display (display serif, weights 400/700/900 + italic), Inter (body, 400/500/600), and IBM Plex Mono (micro-labels, 400/500). Playfair is editorial and high-contrast; Inter carries body copy with a tightened -0.01em track; Plex Mono handles every uppercase label at very wide 0.18–0.25em tracking. All faces are open-source, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	12.5–20vw / clamp	900	0.78	-0.01em	hero "NOOR", section H2s, marquee
display-italic	12.5–14vw	900	~1	—	"HALABI", marquee italic, "Looks"
body	13px	400	1.4	-0.01em	intro/lead paragraphs
mono-label	10px (8–10px)	400	1.4	0.18–0.25em / uppercase	all eyebrows, nav, credits, captions

Layout

4px base unit on Tailwind's scale; section padding py-16 md:py-24, gutter px-6 md:px-12. The page is a sequence of full-width sections framed by hairline rules. The hero is a 2/4-column grid with two rows of cells mixing giant type, a grayscale autoplay video, mono micro-copy, and a corner glyph. The runway section is h-screen, GSAP-pinned, scrolling #htrack (a flex row of shrink-0 cards sized in vw) horizontally. The index is a print-style table grid 1fr_3fr_2fr_1fr (LOOK NO. / CAMPAIGN / ROLE / YEAR). The outro is a single overflow-hidden marquee plus a mono footer row. Max content is the viewport itself; whitespace is tight and grid-driven, the opposite of airy.

Elevation & Depth

Flat by design — there are no box-shadows on cards or chips. Depth comes from (1) the hairline grid, (2) layering translucent ink chips over imagery, (3) the vertical look numerals' text-shadow: 0 0 30px rgba(16,16,16,0.6) glow on a transparent lime-stroked face, and (4) image treatments (grayscale contrast-125 video, rose mix-blend-multiply hover wash). The lightbox is a full-bleed ink overlay (z-80), not a floating panel.

Shapes

Uniformly square. There is no rounded-* class and no border-radius anywhere — every cell, card, chip, button, and the lightbox is hard-cornered. Emphasis is achieved through hairline borders and the lime text-stroke, never through softened corners. The only curves are typographic (Playfair serifs) and the arrow glyphs.

Components

• mono-eyebrow — IBM Plex Mono 10px, 0.25em uppercase, bone (often /60); px-5 py-4 in hero header cells; e.g. "NOOR HALABI ®", "SS/26 — FOLIO".
• label-chip — translucent ink (#101010/50–60) box, bone mono caps, px-1.5 py-0.5 to px-2 py-1; e.g. "LIVE/FEED ●", look captions.
• look-card — full-bleed object-cover image, right hairline border, no radius; rose mix-blend-multiply overlay fades in on hover; vertical lime look numeral; bottom-right ink mono caption. Click opens lightbox.
• index-row — grid 1fr_3fr_2fr_1fr, py-5 px-6/12, bone text with lime look-number; animates background to rose and text to ink on hover.
• lightbox-close — square mono button, border bone/40, px-3 py-1.5; hover fills lime with ink text; label "CLOSE ✕".
• corner glyph box — w-8 h-8 square, border #E8FF2E, lime ↘.
• scroll-arrow — Playfair text-5xl lime ↓, animate-bounce.

Motion

GSAP + ScrollTrigger drive the structural motion; anime.js v4 drives pointer interactions. Hero words rise in (yPercent 30, autoAlpha 0, 1.1s, stagger 0.15, power3.out). The runway is pinned and horizontally scrubbed (scrub 1), with look cards fading/rising in via a containerAnimation. The outro marquee loops infinitely (xPercent -50, 22s linear). On the index, a thumbnail tracks the cursor (createAnimatable, 380ms out(4)) and rows wipe to rose in 260ms out(3). The lightbox image scales 1.15→1 with fade over 600ms; the scroll arrow uses Tailwind animate-bounce.

Iconography

No icon font. All "icons" are typographic unicode glyphs — arrows and marks: ↘ (corner), ↓ (scroll / animate-bounce), → (CTA), ✕ (close), ● (live-feed dot), ® and © (marks). Sizes range from 10px inline mono glyphs to a 48px (text-5xl) Playfair arrow. UI glyphs and accents render in lime #E8FF2E; informational glyphs in bone.

Do's and Don'ts

• Do keep the surface near-black #101010 and let bone #EFEAE2 carry text.
• Do reserve acid lime #E8FF2E for single-point emphasis — accents, hover, numerals, selection — never as a fill for large areas.
• Do keep everything square; depend on hairline grid-rule borders for structure.
• Do set all micro-labels in IBM Plex Mono uppercase at 0.18–0.25em tracking.
• Do scale Playfair display type in viewport units with ~0.78 line-height.
• Don't introduce border-radius, drop shadows, or floating cards.
• Don't use rose #E6B7B0 as a static fill — it is a hover/multiply effect only.
• Don't add a second accent color or soften the print-grid austerity.

Known Gaps

• display font-size is expressed as a clamp approximation; the HTML uses several discrete viewport sizes (15vw/12.5vw/14vw/20vw) per context.
• Translucent ink chips render at /50–/60 Tailwind alpha depending on cell; captured as a single label-chip with approximate #101010 at 50–60% alpha.
• Hairline alphas are read from .grid-rule (0.18) and Tailwind /15,/20,/25 utilities; grouped into rule / rule-strong / rule-faint tokens.
• Motion timings/easings are read from the GSAP and anime.js calls verbatim.