WikiSeda ZworkSeda Zwork — Style Token Spec

Seda Zwork — Style Token Spec

Seda Zwork — Style Token Spec

Derived strictly from the reference folder files in this vault: seda-zwork-refined.html, Tools/showcase/seda-zwork-showcase.html, portfolio.html, Tools/seda-zwork-infographic-prompt.md, and the brand bible SedaZwork.md. Values are quoted verbatim from those sources.

Aesthetic name: Fiery screen-print / "Physical Virtuality". Two documented variants share one core language:

  • Refined (primary): seda-zwork-refined.html + showcase + infographic prompt.
  • Avant-garde (portfolio): portfolio.html — same palette, serif/mono voice, grain overlay.

1. Color palette

1a. Canonical fiery screen-print palette (the reference tokens)

Source: :root in seda-zwork-refined.html (identical to PALETTE in the showcase script and the recolor block of the infographic prompt).

TokenHexRole
burnt#FF6B35Primary accent — burnt orange. Headlines, links, selection, hover border.
ember#E8A33DSecondary warm — ember gold. Tags, eyebrows, captions.
chrome#C8CDD2Cool neutral — chrome silver. Body text on dark, hairlines, logo tint.
teal#1F6F6BCooling accent — deep teal. Pills, occasional dividers.
offblack#14110FBase background (warm near-black).
cream#F5F0E6Base foreground text on dark; light cells.

1b. Utility / derived tokens

TokenValueSource / use
ink#0C0A08Deepest black — footer background (refined).
hairlinergba(200,205,210,0.08–0.12)Chrome at low alpha — card/section borders.
selectionbg burnt #FF6B35, color #FFFFFFText selection (refined).
grad-veillinear-gradient(180deg, rgba(20,17,15,.35) 0%, rgba(20,17,15,.92) 100%)Hero/image scrims.
grad-titlelinear-gradient(180deg, rgba(20,17,15,.85), rgba(20,17,15,0))Top bar fade.
grad-proglinear-gradient(90deg, var(--burnt), var(--ember))Progress / energy bar.

1c. Avant-garde variant hues (portfolio.html)

Same families, slightly shifted — treat as alternate ramps, not replacements. black #0C0B0A, ink #121212, orange #E8751A (~burnt, redder), gold #F6AD55 (~ember, brighter), teal #0A6E6E, chrome #C9CDD2. Neutral hairlines: #2A2622 (borders), #15110D (card bg), #222222/#888888 (muted text). Grain overlay: feTurbulence fractalNoise baseFrequency=0.85, opacity 0.06, mix-blend-mode: overlay.

Rule: warm-dominant, limited, harmonic. No gradients in flat color blocks (infographic); gradients only for scrims/veils/progress, never for fills.

2. Typography

2a. Refined (primary)

  • Display / headings: "Arial Narrow", Impact, "Helvetica Neue", sans-serif — text-transform: uppercase, weight 900, letter-spacing: .04em (h1) up to .18em (brand/nav), line-height: .86.
  • Body: "Helvetica Neue", Arial, sans-serif, -webkit-font-smoothing: antialiased.
  • Eyebrow / kicker: 11–12px, letter-spacing: .3–.4em, uppercase, color burnt, preceded by a 42px × 2px solid burnt rule.
  • Fluid sizes: hero clamp(54px,13vw,180px); section title clamp(30px,5vw,64px); manifesto clamp(24px,4.4vw,58px) weight 300; lead clamp(15px,1.6vw,19px) line-height 1.7.
  • Selection: background: burnt; color: #fff.

2b. Avant-garde (portfolio.html)

  • Display: serif "Times New Roman", Georgia, serif, weight 400, uppercase, line-height .86–1.
  • Marquee: same serif, italic, 20px, color gold.
  • UI / body: mono "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace.
  • Grain overlay sits above everything (z-index: 9999, pointer-events: none).

3. Vector & shape motifs

Extracted from SedaZwork.md + portfolio.html copy + infographic prompt.

  • ÁRBOL TOROIDE — chrome tree growing from a glowing torus. The studio through-line symbol of "growth-from-a-ring" (hero emblem in portfolio.html).
  • Logo lockup — blue circle + red cross + white ring + concave red star.
  • Star-spike / compass-rose — glossy obsidian sphere wrapped in 4-pointed chrome/brushed-steel/champagne-gold star spikes (Zeda Genesys).
  • Topological knots — Möbius / torus rings (LauToroide), knotted ribbons (0Cubo / Z-Tox); cubes, ribbed channels.
  • Bento grid — thick black outlines, flat color blocks, screen-print texture; hero 2×2 + supporting 1×1 / 2×1 (infographic). No 3D, no gradients.
  • Halftone / glitch — recurring fire-and-glitch corruption motif (marquee copy: "fire, chrome & glitch").
  • Corner number — large faint serif index numerals (e.g. 46px, rgba(245,240,230,.18)) on portfolio cards.

4. Grid / layout rules

4a. Refined

  • Content wrap: max-width: 1240px, padding: 0 28px.
  • Sections: vertical padding clamp(70px,11vw,150px).
  • Works grid: repeat(3, 1fr), gap: 14px; → 2 cols at max-width: 900px; → 1 col at 560px.
  • Work tile aspect-ratio: 4/5; inventos tiles 16/10; OHyO feature 1.1fr / .9fr.
  • Showroom strip: horizontal scroll-snap, items min(70vw,420px) × 16/10.
  • Lightbox: full-screen rgba(8,7,6,.94) overlay, image max 90vw / 80vh.

4b. Avant-garde (portfolio.html)

  • 12-column grid, asymmetric spans: .s-a 1/8 16/10, .s-b 8/13 3/4, .s-c 1/5 1/1, .s-d 5/9 1/1, .s-e 9/13 1/1, .s-f 1/7 16/9, .s-g 7/13 16/11.
  • Container max-width: 1200px, section padding 80px 24px.
  • Collapses to single column (1/13, aspect-ratio 4/3) at max-width: 760px.
  • Top index bar: auto-fit minmax(120px,1fr), 1px hairline dividers.

5. Motion / animation hints

  • Hero Ken Burns: scale(1.05) → scale(1.14) translate(-2%,-2%), 22s ease-in-out infinite alternate; base filter: saturate(1.05) contrast(1.05).
  • Scroll cue: 1px line, linear-gradient(burnt, transparent), @keyframes drop 1.8s infinite (scaleY origin top→bottom).
  • Reveal on scroll: IntersectionObserver threshold .12; opacity 0→1 + translateY(26px)→0; transition .7s (refined) / .9s cubic-bezier(.2,.8,.2,1) (portfolio).
  • Hover (works): image transform: scale(1.07), filter: saturate(1.1), .7s cubic-bezier(.2,.7,.2,1); inset border rgba(255,107,53,.55) fades in.
  • Showcase crossfade: HOLD 2.6s fully shown, FADE 1.2s crossfade; Ken Burns ZOOM 0.08/s + sine pan; bottom palette grain bar 5px segments (one per palette color, globalAlpha .85).
  • Marquee: translateX scroll 22s linear infinite.
  • Selection & progress: styled burnt; progress bar linear-gradient(burnt→ember).

6. Voice & tone (for any generated copy)

Editorial, not salesy; bilingual ES/EN; lean on Physical Virtuality, Latent Showroom, crear y comprarlo, in situ, De Consumidor a Soberano. Mirror key lines in Spanish. (From SedaZwork.md §6 — included so downstream text tasks stay on-brand.)

Built with LogoFlowershow