name: formless-design
version: alpha
description: >
  An editorial, blueprint-style fashion studio site set on a warm concrete grey
  (#B8B6B0) ground with near-black ink (#050505) and a single muted copper-sage
  accent (#5E7E70). The signature moves are technical-drawing overlays — a fixed
  dashed measurement frame, registration crosshairs, and coordinate readouts —
  paired with a scattering-then-reassembling Anton display headline, an SVG
  garment pattern that draws itself before a photo fades in, and cursor-drag
  radial reveals over collection images. Type is a high-contrast mix of condensed
  Anton display, Archivo body, Space Grotesk descriptive copy, and Space Mono
  for every label, caption, and coordinate. Geometry is flat and sharp: zero
  border-radius, dashed hairlines instead of shadows, and slightly rotated
  collage figures on a 12-column grid.
colors:
  # Surface
  surface: '#B8B6B0'        # page ground — warm concrete grey
  surface-panel: '#F0EEE8'  # image-frame backing / footer inverted text — bone
  surface-ink: '#050505'    # near-black; footer background and dark figure cards
  # Brand / Accent
  copper: '#5E7E70'         # the one accent — muted copper-sage; slashes, labels, links, pattern stroke
  # Text
  ink: '#050505'            # primary text on the grey surface
  ink-80: 'rgba(5,5,5,0.8)' # secondary descriptive copy
  bone: '#F0EEE8'           # text on the dark footer
  bone-60: 'rgba(240,238,232,0.6)'  # muted footer copy
  bone-40: 'rgba(240,238,232,0.4)'  # footer legal line
  bone-30: 'rgba(240,238,232,0.3)'  # footer input placeholder
  # Hairlines
  hairline: 'rgba(5,5,5,0.4)'        # dashed section dividers on grey
  hairline-bone-50: 'rgba(240,238,232,0.5)' # dashed input border in footer
  hairline-bone-20: 'rgba(240,238,232,0.2)' # dashed footer divider
typography:
  display:
    fontFamily: "'Anton', sans-serif"
    fontSize: clamp(56px,11vw,170px)
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
  display-footer:
    fontFamily: "'Anton', sans-serif"
    fontSize: clamp(60px,18vw,260px)
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: -0.02em
  section-heading:
    fontFamily: "'Anton', sans-serif"
    fontSize: clamp(40px,7vw,96px)
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
  fragment:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.375
  body:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.625
  label:
    fontFamily: "'Space Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.1em
    textTransform: uppercase
  nav:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.1em
    textTransform: uppercase
  caption-micro:
    fontFamily: "'Space Mono', monospace"
    fontSize: 9px
    fontWeight: 400
    letterSpacing: 0.1em
    textTransform: uppercase
rounded:                      # brutalist / technical — everything is square
  none: 0px
spacing:                      # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 96px
components:
  nav-link:
    textColor: '{colors.ink}'
    typography: '{typography.nav}'
    rounded: '{rounded.none}'
    note: 'Space Mono caps, widest tracking; individually offset vertically (translate-y); active link uses {colors.copper}'
  hero-cta:
    textColor: '{colors.ink}'
    border: '1px solid {colors.ink}'
    typography: '{typography.nav}'
    rounded: '{rounded.none}'
    padding: '8px 16px'
    note: 'Outlined mono pill (sharp corners) — label "ENTER THE ARCHIVE →"'
  image-frame:
    backgroundColor: '{colors.surface-panel}'
    rounded: '{rounded.none}'
    note: 'reveal-wrap with crosshair cursor; bone backing behind object-cover image; cursor-drag radial mask reveals a second colorway image on top'
  collection-figure:
    backgroundColor: '{colors.surface-panel}'
    rounded: '{rounded.none}'
    note: 'Slightly rotated (±1–2deg) collaged figures on the 12-col grid; mono caption row with name + copper price'
  section-divider:
    border: '1px dashed {colors.hairline}'
    note: 'border-top dashed; no shadows anywhere'
  footer-input:
    backgroundColor: 'transparent'
    textColor: '{colors.bone}'
    border: '1px dashed {colors.hairline-bone-50}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '12px 16px'
  footer-submit:
    backgroundColor: '{colors.copper}'
    textColor: '{colors.surface-ink}'
    typography: '{typography.nav}'
    rounded: '{rounded.none}'
    padding: '0 24px'
    note: 'Solid copper button, label "SUBMIT"'
motion:
  hero-scatter: 'Anton letters set to random x/y/rotation + opacity 0, then GSAP power4.out reassemble to origin, duration 1.4s, stagger 0.06s, delay 0.2s'
  coat-draw: 'SVG coat-path strokeDashoffset animated to 0 (self-drawing), duration 2s power2.inOut delay 0.4s; onComplete fades #coat-img in over 1.2s power2.out'
  cursor-reveal: 'mousemove updates a radial-gradient mask (circle 110px) on .reveal-top to reveal colorway image under the cursor; resets to circle 0px on mouseleave'
  frag-hover: 'word transition transform .35s cubic-bezier(.2,.8,.2,1) + color .35s; on paragraph hover words jitter to random translate/rotate and turn copper'
icons:
  library: Tabler (tabler-icons-webfont)
  style: outline
  sizes: { sm: 20px, md: 24px }
  color: '{colors.copper}'
  note: 'Effectively one glyph — ti-arrow-up-right — scattered as decorative registration marks, often rotated'

Form/Less

formless-design · alpha

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

Overview

Form/Less is an editorial, blueprint-aesthetic site for a fictional genderless fashion studio. The whole page sits on a warm concrete grey (#B8B6B0) printed in near-black ink (#050505), with exactly one accent — a muted copper-sage (#5E7E70, class .copper) — reserved for the slash in the logo, every mono label, active links, prices, and the SVG pattern stroke. The signature move is making the page feel like a technical drawing: a fixed, full-viewport dashed measurement frame, two dashed gridlines, registration crosshairs at their intersections, and X:000 Y:000 coordinate readouts scattered in the margins. Display type is condensed Anton (the "FORM/LESS" wordmark scatters off-screen then reassembles via GSAP); body copy alternates Archivo for the large fragmenting statement and Space Grotesk for descriptive paragraphs, while Space Mono handles every uppercase, wide-tracked label, caption, and coordinate. An SVG garment pattern draws itself stroke-by-stroke before a flat-lay photo fades in, and collection images use a cursor-drag radial mask to reveal a second colorway. Geometry is uncompromisingly flat: zero border-radius, dashed hairlines instead of any shadow, and figures rotated a degree or two for a pinned-collage feel on a 12-column grid.

Colors

Surface. The page ground is surface #B8B6B0, a warm concrete grey set on #fl-root. Image frames and the footer's large type backing use surface-panel #F0EEE8 (bone). The footer flips the whole system: its background is surface-ink #050505, also used as the fill for the rotated drape-study image card in section 02.

Brand / Accent. copper #5E7E70 is the sole accent and appears constantly but sparingly — the ® and / in the logo, the active CONTACT nav link, all 02 —/04 — section markers, prices (€480), the coat-pattern SVG stroke, one of the two vertical gridlines and its crosshair, the footer's swoosh path, and the solid SUBMIT button.

Text. Primary text is ink #050505; secondary descriptive copy drops to ink-80 rgba(5,5,5,0.8). On the dark footer, text is bone #F0EEE8, with bone-60, bone-40, and bone-30 for muted copy, the legal line, and the input placeholder respectively.

Hairlines. No solid borders carry weight — section dividers are 1px dashed hairline rgba(5,5,5,0.4); the footer input border is dashed hairline-bone-50 rgba(240,238,232,0.5) and the footer divider dashed hairline-bone-20. The fixed blueprint frame and gridlines are 0.5px dashed strokes of #050505 (and one #5E7E70) at low opacity.

Typography

Four Google Fonts are imported: Anton (condensed display, single weight 400), Archivo (400–900, used at 500 for the fragment statement), Space Grotesk (400/500, descriptive body), and Space Mono (400/700, all labels). All are open-source; no substitutes needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(56px,11vw,170px)	400	1	-0.02em	Hero "FORM/LESS" scatter wordmark
display-footer	clamp(60px,18vw,260px)	400	0.85	-0.02em	Giant footer "FORM/LESS"
section-heading	clamp(40px,7vw,96px)	400	1	-0.02em	"THE FLUID ARCHIVE"
fragment	30px (md:text-3xl)	500	1.375	—	Archivo statement that hover-scatters
body	14px	400	1.625	—	Space Grotesk descriptive paragraphs
label	10px	400	—	0.1em / uppercase	Section markers, captions, vertical text
nav	11px	400	—	0.1em / uppercase	Header nav, CTA, SUBMIT
caption-micro	9px	400	—	0.1em / uppercase	Coordinate / FIG. readouts

Layout

Base unit is 4px (Tailwind scale); horizontal padding is a consistent px-8 (32px) and sections breathe with py-24 (96px). The page is a single full-width column with no central max-width container — content is positioned with a 12-column grid (grid-cols-12 gap-6) and absolute placement. The hero is an asymmetric composition: the giant wordmark caps at md:max-w-[58vw] on the left, the self-drawing pattern/photo frame is absolutely pinned top-right (md:w-[42vw] max-w-[520px]), and the intro paragraph + CTA anchor bottom-left. The archive section is a pinned-collage of four <figure>s each rotated ±1–2deg with negative top-margins so they overlap. Whitespace is generous but every empty margin is annotated with vertical mono text, crosshairs, or coordinates — the blueprint conceit.

Elevation & Depth

There are no box-shadows and no glass anywhere. Depth comes entirely from (1) the fixed dashed measurement frame and gridlines layered at z-[60], (2) z-index stacking of rotated collage figures (z-10 through z-40), and (3) the flat dark footer creating a hard tonal break. Hairlines are always dashed, never solid; the look is print-registration flat, not material.

Shapes

Everything is square — there is not a single rounded-* class or border-radius in the document (rounded.none = 0px). The only curves are organic: the SVG coat-pattern path, the footer's Q-curve swoosh, and the cursor-reveal radial mask. Sharpness is the point — outlined "pills" like the hero CTA are right-angled rectangles, and the SUBMIT button is a hard copper block.

Components

• nav-link — Space Mono 11px caps, widest tracking, no background; each link individually offset vertically (translate-y-4, -translate-y-1); active uses copper. Labels: INDEX / ARCHIVE / CONTACT.
• hero-cta — 1px solid #050505 outline, no radius, px-4 py-2, mono caps; label "ENTER THE ARCHIVE →".
• image-frame (.reveal-wrap) — #F0EEE8 bone backing, cursor:crosshair, square; holds an object-cover image and an overlay revealed by a radial mask that follows the cursor.
• collection-figure — bone-backed <figure> rotated ±1–2deg, overlapping via negative margins; mono caption row pairing object name with a copper price.
• section-divider — border-t border-dashed border-[#050505]/40.
• footer-input — transparent fill, 1px dashed rgba(240,238,232,0.5) border, mono text, bone-30 placeholder, px-4 py-3.
• footer-submit — solid bg-copper, #050505 text, mono caps, px-6, square; label "SUBMIT".

Motion

Powered by GSAP + ScrollTrigger (registered) and animejs (imported). Hallmark moves: (1) hero scatter/reassemble — Anton letters start at random x/y/rotation with opacity 0 and animate home, duration 1.4s ease power4.out stagger 0.06 delay 0.2. (2) coat-draw — the SVG #coat-path strokes itself in (strokeDashoffset → 0, 2s power2.inOut) then fades the flat-lay #coat-img in over 1.2s. (3) cursor-reveal — mousemove rewrites a radial-gradient mask (circle 110px) on .reveal-top to wipe in a colorway image; resets to 0px on leave. (4) fragment hover — words transition transform .35s cubic-bezier(.2,.8,.2,1) and turn copper, jittering to random offsets on paragraph hover. ScrollTrigger is registered but no scroll-driven tweens are defined.

Iconography

Tabler icon webfont, outline style. Effectively one glyph is used — ti-arrow-up-right — deployed purely as decoration: scattered registration/ direction marks around image frames and section corners, frequently rotated (rotate-45, rotate-12). Color is always copper; sizes are text-xl/text-2xl (~20–24px).

Do's and Don'ts

• Do keep copper #5E7E70 as the only accent and use it sparingly — slashes, labels, prices, active links, the SUBMIT block.
• Do annotate empty space with mono coordinates, vertical labels, crosshairs, and dashed gridlines — the blueprint conceit is the brand.
• Do keep every corner square and every divider dashed; never introduce radius or solid drop shadows.
• Do mix the four faces by role: Anton for display, Archivo/Space Grotesk for reading copy, Space Mono for everything labelled.
• Don't add color beyond grey / ink / bone / copper, or fill the copper accent into large areas.
• Don't straighten the collage figures or remove their overlap — the pinned, rotated stacking is intentional.
• Don't swap the technical line-art (crosshairs, dashed frame, self-drawing pattern) for photographic chrome or material shadows.

Known Gaps

• fragment size is recorded as 30px (the md:text-3xl value); the base mobile size is text-2xl (24px).
• Letter-spacing -0.02em is the rendered effect of tracking-tight; expressed here as its em equivalent.
• Hero-scatter start positions are randomized at runtime (viewport-relative), so exact transforms vary per load; durations/easings above are exact.
• The fixed blueprint frame/gridlines use sub-pixel 0.5px–0.9px strokes at ~0.28–0.5 opacity; values are read directly from the SVG attributes.