name: telar-design
version: alpha
description: >
  An editorial Andean-architecture portfolio printed on warm camelid wool
  (`#E8D8B8`) with deep earth ink (`#2A1E14`). The system reads like a woven
  textile catalogue: every block is bordered by 1px earth hairlines, the
  "Loom of Work" is a 1px-gap tocapu grid of colored cards, and the brand
  voltages are cochineal red (`#9A2A2A`), lapis blue (`#2A4A8A`) and gold
  (`#D4A438`). Typography pairs an italic-leaning Playfair Display headline
  with Inter body copy and a JetBrains Mono label voice set in wide uppercase
  tracking. Signature moves: GSAP line-mask reveals, slide-up project overlays,
  SVG chakana path-drawing, a scroll-driven plate swap, an italic serif
  marquee, and an SVG grain/turbulence multiply texture over imagery.
colors:
  # Brand / voltages
  cochineal: '#9A2A2A'      # primary accent — italic word highlights, card fills, overlays, sidebar mark
  lapis: '#2A4A8A'          # secondary accent — italic captions, stat numbers, card fills, section labels
  gold: '#D4A438'           # tertiary accent — footer highlights, pulse dots, dock border, card fills
  # Surface
  camelid: '#E8D8B8'        # page background, light text on dark, card base
  camelid-light: '#F0E4CA'  # raised diagram/bento panel surface
  earth: '#2A1E14'          # primary ink — body text, all hairlines/borders, dark sections, footer
  # Text
  text-strong: '#2A1E14'    # headings & body on light surfaces (= earth)
  text-on-dark: '#E8D8B8'   # text on earth/colored surfaces (= camelid)
  # Hairlines (all derive from earth)
  hairline: '#2A1E14'       # 1px borders, dividers, grid gaps
typography:
  display:
    fontFamily: "'Playfair Display', serif"
    fontSize: clamp(56px,9vw,128px)
    fontWeight: 500
    lineHeight: 0.92
    letterSpacing: -0.01em
  section-heading:
    fontFamily: "'Playfair Display', serif"
    fontSize: clamp(44px,7vw,88px)
    fontWeight: 400
    lineHeight: 0.95
  card-title:
    fontFamily: "'Playfair Display', serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.1
  serif-quote:
    fontFamily: "'Playfair Display', serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.75
  label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.25em
    textTransform: uppercase
rounded:                      # near-zero geometry; pills/dots are the only curves
  none: 0px
  full: 9999px
spacing:                      # 4px base; Tailwind scale (px-8/14, py-20/24, gap-6/10)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 80px
components:
  btn-pill:
    backgroundColor: 'transparent'
    textColor: '{colors.earth}'
    border: '1px solid {colors.earth}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '0.6rem 1.3rem'
    # variants: filled (bg earth, text camelid); hover inverts to earth fill
  project-card:
    backgroundColor: '{colors.camelid}'
    textColor: '{colors.camelid}'
    border: '1px solid {colors.earth}'
    rounded: '{rounded.none}'
    # colored variants: cochineal / lapis / gold / earth / camelid-light fills
    # hover: slide-up overlay (translateY 101%->0) + image scale 1.05
  filter-chip:
    backgroundColor: 'transparent'
    textColor: '{colors.earth}'
    border: '1px solid {colors.earth}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '0.25rem 0.75rem'
    # active variant: earth fill, camelid text
  diagram-panel:
    backgroundColor: '{colors.camelid-light}'
    textColor: '{colors.earth}'
    border: '1px solid {colors.earth}'
    rounded: '{rounded.none}'
    padding: '1.25rem–1.5rem'
  dock-bar:
    backgroundColor: '{colors.earth}'
    textColor: '{colors.camelid}'
    border: '1px solid {colors.gold}'
    typography: '{typography.label}'
    rounded: '{rounded.full}'
    padding: '0.5rem 0.75rem'
    # backdrop-blur-md, shadow-2xl, fixed bottom-center
motion:
  hero-line-mask: 'GSAP: lm-span y 110%->0%, expo.out, dur 1.1s, stagger 0.15, delay 0.2s'
  card-reveal: 'GSAP ScrollTrigger.batch: autoAlpha 0->1, y 40->0, power3.out 0.8s, stagger 0.08, start top 88%'
  card-overlay: 'CSS: overlay translateY 101%->0 on hover, transform .6s cubic-bezier(.7,0,.2,1)'
  image-zoom: 'CSS: .img-wrap scale 1.05 on hover, transform .8s ease'
  chakana-draw: 'GSAP: SVG strokeDashoffset len->0 scrubbed on scroll (.chk) / timed 3s (.chakana-path)'
  hero-parallax: 'GSAP: .hero-title yPercent -30 scrubbed across scroll'
  scroll-plate-swap: 'GSAP ScrollTrigger per narrative-step toggles .scroll-img is-active; opacity .7s cubic-bezier(.7,0,.2,1)'
  marquee: 'CSS @keyframes marq translateX 0->-50%, 40s linear infinite'
  nav-underline: 'CSS ::after scaleX 0->1 from right->left on hover, .5s cubic-bezier(.7,0,.2,1)'
  founder-portrait: 'CSS: grayscale(1)->0 + scale 1.03 on hover, filter .6s / transform .8s'
icons:
  library: Tabler Icons (webfont)
  style: outline
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.earth}'
  # ti-menu-2, ti-arrow-right, ti-arrow-up-right, ti-arrow-down-right

Telar

telar-design · alpha

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

Overview

Telar (Spanish for "loom") is an editorial portfolio for a fictional Peruvian architecture atelier, designed as if it were a woven textile printed on warm camelid wool. The page surface is --camelid #E8D8B8 with deep --earth #2A1E14 ink, and the entire layout is articulated by 1px earth hairlines — top bars, section dividers, card borders, and a tocapu grid whose 1px gaps are the earth color showing through. Three voltages carry the brand: cochineal red #9A2A2A, lapis blue #2A4A8A, and gold #D4A438, each used both as italic word highlights and as full card fills. The type story pairs Playfair Display (frequently italic) for fluid clamp() headlines, Inter for relaxed 1.75-line-height body copy, and JetBrains Mono as a wide-tracked uppercase label voice carrying coordinates, figure numbers, and section marks (§ 01). The geometry is essentially sharp — radius 0 everywhere except pills and dots — and the whole thing is overlaid with an SVG turbulence grain, a tocapu dot-grid, and loom warp-line textures at multiply/low opacity. GSAP drives the signature motion: hero line-mask reveals, batch card fade-ups, slide-up project overlays, scrubbed chakana SVG path-drawing, a scroll-driven plate swap, and an italic serif marquee in the footer.

Colors

Brand / voltages. cochineal #9A2A2A is the primary accent: it colors italic headline words ("Andes", "works"), the sidebar chakana mark, multiple card fills and hover overlays. lapis #2A4A8A is the secondary accent for italic captions, narrative step labels, stat numbers, and card fills. gold #D4A438 is the tertiary accent reserved for the footer ("Let's talk."), pulse status dots, the dock-bar border, and gold cards.

Surface. camelid #E8D8B8 is the page background (body{background}) and doubles as the light text color on dark/colored surfaces. camelid-light #F0E4CA is a slightly brighter panel surface for diagram and bento cards. earth #2A1E14 is the ink for headings/body on light, and the fill for dark sections (narrative image column, footer, dock).

Text. Strong text on light is earth; text on dark/colored surfaces is camelid. Muted variants are produced with Tailwind opacity suffixes (text-[var(--earth)]/70, /60, /40) rather than separate tokens.

Hairlines. Every border, divider, and grid gap is earth at full strength or at /40. The tocapu grid uses gap-px bg-[var(--earth)] so the earth color reads as woven thread between cards.

Typography

Playfair Display (Google Fonts, weights 400–800 plus italic) is the display and editorial face — used at clamp(56px,9vw,128px) for the hero, in italic for highlighted words, quotes, and the marquee. Inter (300–600) is the body face at ~15px with a generous 1.75 line-height. JetBrains Mono (400/500) is the label/meta face, almost always uppercase with 0.2–0.3em tracking. All three load from a single Google Fonts @import; Tabler icons load via a second @import.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(56px,9vw,128px)	500	0.92	tight	Hero H1
section-heading	clamp(44px,7vw,88px)	400	0.95	normal	§-section H2s
card-title	20–48px	400	1.1	normal	Project & bento titles
serif-quote	20–24px italic	400	1.3	normal	Pull quotes
body	15px	400	1.75	normal	Inter paragraphs
label	9–11px	400	1.4	0.2–0.3em	Mono uppercase meta/coords

Layout

4px base unit on a Tailwind scale; horizontal padding is px-8 md:px-14, vertical rhythm py-20–py-24. A fixed 56–64px left "warp thread" sidebar (w-14 md:w-16) holds vertical mono text, the chakana mark, and a menu/locale; main is offset by matching left padding. Sections stack full-width, separated by border-t border-earth. The page leans on 12-column grids (grid-cols-12) — hero is 7/5, narrative 7/5, geometry 5/7, practice 3/9. The "Loom of Work" is a grid-cols-12 gap-px tocapu mosaic of varied col/row spans where the 1px earth gaps form the weave. The featured case is an 85vh full-bleed video with gradient scrim; the narrative uses a sticky image column with scroll-driven plate swaps. Whitespace is editorial and confident, with meta text pinned to card corners.

Elevation & Depth

The system is essentially flat and print-like: depth comes from 1px earth hairlines and borders, not shadows. The only real shadow is shadow-2xl on the floating dock-bar, which also uses backdrop-blur-md over earth/90. Glass appears as small backdrop-blur-sm chips over the narrative image. Imagery gets depth from gradient scrims (from-earth via-earth/40 to-transparent), multiply color washes, and an SVG turbulence grain overlay at 0.18 opacity, multiply.

Shapes

Sharp by intent — border-radius: 0 is the default for cards, panels, chips, images, and SVG frames, reinforcing the woven-rectangle (tocapu) language. The only curves are rounded-full pills/dots: status indicators, scroll dots, the locale toggle, and the dock-bar. Buttons are rectangular bordered "pills" (named btn-pill but square-cornered).

Components

• btn-pill — 1px earth border, transparent fill, mono uppercase 12px / 0.15em, 0.6rem 1.3rem padding, leading ti arrow icon; filled variant is earth bg / camelid text; hover inverts to earth fill. Labels: "View Work", "Full archive", "Walk the project".
• project-card — bordered article in the loom grid, colored fill (cochineal/lapis/gold/earth/camelid-light), corner mono N°/01 badge and serif title; hover slides a colored overlay up (translateY 101%→0) and scales the image 1.05, revealing full project copy + a camelid-bordered pill.
• filter-chip — square mono chips ("All · 14", "Cultural"); active = earth fill / camelid text, inactive = earth/40 border.
• diagram-panel — camelid-light bento cards with 1px earth border holding inline SVG section/plan diagrams and ratio labels (1 : 1.618, 3° wall tilt).
• founder-card — 12-col row with a 3/4 bordered portrait (grayscale→color on hover), serif name, mono credentials, Inter bio.
• dock-bar — fixed bottom-center pill, earth/90 + backdrop-blur, gold border, shadow-2xl, mono spec readout with gold pulse dot.

Motion

GSAP + ScrollTrigger power the page. Hero headline lines reveal via line-mask (child span y 110%→0%, expo.out, 1.1s, 0.15 stagger). Project cards fade up in batches (autoAlpha + y 40→0, power3.out, 0.08 stagger, trigger top 88%). Project overlays slide up on hover (.6s cubic-bezier(.7,0,.2,1)) with a paired 0.8s image zoom. SVG chakana paths draw via strokeDashoffset — scrubbed on scroll for .chk, timed 3s for .chakana-path. The hero title parallaxes yPercent -30 on scrub. The narrative section swaps sticky plates per narrative-step (opacity .7s). The footer runs an italic serif marquee (translateX 0→-50%, 40s linear). Nav links wipe an underline in on hover; status dots animate-pulse.

Iconography

Tabler Icons via webfont (ti ti-*), outline style, inheriting currentColor (earth on light, camelid/gold on dark). Used sparingly and functionally as directional arrows inside pills (ti-arrow-right, ti-arrow-up-right, ti-arrow-down-right) and a ti-menu-2 in the sidebar. Decorative geometry is not icon-based — chakana crosses, tocapu grids, and section diagrams are inline hand-authored SVG.

Do's and Don'ts

• Do keep the camelid surface + earth ink as the base and let the three voltages (cochineal / lapis / gold) appear as accents and card fills only.
• Do articulate structure with 1px earth hairlines and gap-px grids — the borders are the design, not shadows.
• Do set all meta/label text in JetBrains Mono, uppercase, with wide tracking; reserve Playfair italics for emphasis words and quotes.
• Do keep corners square; pills and dots are the only curves.
• Don't introduce soft drop-shadows, large radii, or gradients beyond image scrims and the grain/tocapu textures.
• Don't mix accent voltages within a single highlight or let them overwhelm the warm neutral surface.
• Don't swap the mono label voice for the serif or body face.

Known Gaps

• Hero/display letterSpacing is tracking-tight (Tailwind ≈ -0.01em), approximated as a token value.
• Muted text colors are Tailwind opacity suffixes on earth/camelid rather than discrete tokens; documented as opacity variants.
• The SVG grain texture is a feTurbulence data-URI at 0.18 opacity / multiply blend — described by behavior, not exact filter coefficients.
• Spacing scale is inferred from the Tailwind utilities actually used; not an explicit token set in the source.