Quantized Line Field

STYLEKIT_STYLE_REFERENCE
style_name: Quantized Line Field
style_slug: quantized-line-field
style_source: /styles/quantized-line-field

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

Use the complete case below as the default reproduction. Explicit user requests for different brands, copy, or colors override those default data values; preserve the sampling, quantization, noise, interaction, and accessibility rules.

Create one polished, responsive, self-contained HTML file titled “Identity, in lines.” It must work by opening the file directly in a modern browser. Use native HTML, CSS, JavaScript, Canvas 2D, and Path2D only. Do not use libraries, frameworks, modules, build tools, images, image URLs, external SVG files, external fonts, or network requests. Return the complete HTML and nothing else.

1. Page and cards
Build a restrained editorial page with a small “StyleKit / Visual studies” signature and a motion toggle in the top row. The heading is “Identity, in lines.” with the intro “Move through a familiar mark. Find the structure beneath the surface.” Put three brand cards in one desktop row inside a maximum 1,200-pixel content width, with 19-pixel gaps. Cards have a 0.70 width-to-height aspect ratio, a 17-pixel radius, and a minimum height near 460 pixels; stack them on screens at or below 650 pixels. Each card has a small line-drawn mark and brand name at top left. At bottom left use these exact taglines followed by a “Reveal the source →” button: Apple, “Think different.”; Google, “Find your next possibility.”; Tesla, “Accelerate the future.” The footer reads “A study of recognition and reconstruction.” and “One path. A field of light. Four line weights.” Use Georgia/Times serif for the 38–57px main heading and Arial/Helvetica sans-serif for the card text, with 27–37px card taglines. Keep all font stacks local. Apple uses background #eeeeeb and ink #202220; Google uses background #2152e7 and ink #c2dcff; Tesla uses background #111212 and ink #ec353e. Use a blue detection accent per brand as listed in the path payload. The source button opens an accessible dialog showing that brand’s exact path, with a close control. Keep the cards legible, unclipped, and touch friendly.

2. One-time path sampling
Use the exact three 24-by-24 Path2D path strings in the payload below. Keep each mark centered with its listed scale: multiply the 300-pixel scratch size by scale divided by 24, translate to the center, then translate the path origin by -12,-12. For each brand, create one detached scratch canvas at 300 by 300 pixels: 60 grid cells times 5 supersampling pixels. Paint it opaque black, then fill the brand Path2D in white. Read image data exactly once. For every 60-by-60 cell, calculate Rec. 709 luminance as 0.2126 R + 0.7152 G + 0.0722 B, divide by 255, average its 5-by-5 source pixels, and store the result in a Float32Array of 3,600 values. Keep only that array and the brand metadata. Set the scratch canvas width and height to zero and let its context and pixel buffer go out of scope. Never sample the path again, including after resize.

3. Quantized vertical-line drawing
Use 60 equally spaced columns and 30 vertical segments per card. Each segment represents the mean luminance of two adjacent grid rows. Quantize that value into exactly four levels using thresholds 0.12, 0.42, and 0.89. Use only these line widths, multiplied by cell size divided by 5.25: 0.38, 1.12, 2.28, and 3.80. Make each segment nearly two cells tall with a 0.7-pixel gap, flat line caps, and opacities 0.15, 0.64, 0.93, and 1 so the marks read as segmented bamboo-like strokes. Group paths by level and stroke each group once per frame. Draw small header marks from the stored luminance table too; never add a logo image or SVG element.

4. Slow, repeatable flowing noise
Create one shared 128-by-128 seeded random lattice once with a deterministic xorshift integer PRNG starting at seed 7319: state ^= state << 13; state ^= state >>> 17; state ^= state << 5. Convert each generated unsigned integer to a value from -1 to 1 by dividing by 4,294,967,295, multiplying by 2, then subtracting 1. Use smooth bilinear value noise, smoothing each local fraction t with t*t*(3-2*t); use each brand’s seed as its horizontal offset. For each segment sample x at column times 0.15 plus the brand seed, and sample y at row times 0.16 minus elapsed seconds times 0.17. This makes the visible pattern drift slowly downward. Set adjusted luminance to luminance times 0.94 plus noise times 0.12 times (0.25 plus luminance times 0.75), then choose the four line levels. The result should make the line weights drift gently while the pointer is idle. Do not use Math.random during animation.

5. Pointer response and spring return
Track pointer coordinates in card-local CSS pixels. Coalesce incoming pointer events: keep the latest client coordinates and read the card bounds once in the next animation frame. Only update the status text when its state changes. When the pointer enters, touches, or travels more than 1.5 pixels from the last impulse position, set a pulse to 1 and give nearby segment positions a brief radial impulse. Use a radius of one quarter of the logo plot width. Let influence be max(0, 1 - distance/radius); square it, multiply by pulse and 25, then use the radial direction for the target offset, with vertical movement scaled by 0.58. Model displacement with a damped spring: stiffness 145, damping 19, and a maximum integration step of 1/30 second. Settle every segment back to its original grid coordinate after the impulse decays; a stationary pointer must not hold the lines apart. Let the pulse decay as exp(-dt * 5.5). Mouse and touch use this spring response; keyboard focus reveals the detection overlay without requiring simulated pointer movement.

6. Deterministic detection callouts
Derive callouts from the current numerical line field, never from an AI service or fixed coordinates computed at initialization. While the overlay is visible, rescan at most every 100ms. Reuse a 60-by-60 Float32Array and clear it for each scan. For each displayed two-row segment, take its current noisy luminance and bilinearly deposit that value into both grid rows at their current spring-displaced positions. Keep using the one-time source table; do not read canvas pixels again. When paused, focus or resize may produce one static rescan, with no continuous scheduling.

Use a summed-area table over this live field to score 7-by-7 windows by mean luminance; pad each selected window by one cell. Ignore an empty field whose best mean is below 0.04. Keep scores at least 48% of the brightest candidate. Apply spatial non-maximum suppression with a 16-cell center distance, relaxing to 12 cells if needed to get at least two regions; retain up to three. For stable ties, add a small spatial prior of 0.025 * exp(-squaredDistanceToPreviousTarget / 128) to candidate ranking. Match new windows to nearby previous targets within 12 cells, keeping identities, velocity and connector order. Only detection targets snap to integer grid cells. Move the displayed boxes with a critically damped spring, stiffness 144 and damping 24, using substeps no larger than 1/120 second. Render fractional grid positions every frame; never round them back to whole cells, which cancels smooth motion. Show the current displayed coordinates to one decimal place while moving, and settle exactly on the target. For an unrelated target, fade the old box below 0.04 opacity before replacing its location, then fade the new one in. Use 1 - exp(-dt * 16) for opacity. Keep at most three slots and fade each connector with the lower endpoint opacity, so links cannot visibly teleport either. While paused, update directly to a stable frame without scheduling fade animation.

Draw blue boxes, faint fills, emphasized corners, x/y coordinates, and thin connectors. Reveal them for pointer or keyboard focus and fade them out on leave. A stable signal may keep a stable box, but noise and pointer deformation must be able to change the detected positions. Never add arbitrary random wandering or claim real AI inference.

7. Canvas quality, motion, and access
Use a visible canvas for each card. Set its backing width and height to the canvas's actual CSS size multiplied by the current devicePixelRatio, rounded to integers, then set the 2D transform so drawing coordinates remain CSS pixels. Clear and redraw on every requestAnimationFrame frame. Use ResizeObserver for card size changes without resampling the marks. A DPR-only change must also update the backing store even when CSS width and height stay unchanged: compare the current DPR with the cached DPR before drawing, or re-arm a resolution matchMedia listener; ResizeObserver alone is insufficient. With motion paused, DPR and resize events must still update and draw one static frame. Verify a DPR 1 to 2 switch at the same CSS viewport size while the sampling count remains three. Keep the line animation smooth on high-density screens. Provide a keyboard-operable motion toggle with an accurate aria-pressed value; honor prefers-reduced-motion by starting still. Cards must be keyboard focusable and have useful accessible names; canvases are decorative and hidden from assistive technology. Handle touch, and keep pointer targets large enough for mobile.

8. Lifecycle and responsive behavior
Pause animation while the document is hidden, a card is offscreen, or a source dialog is open; resume with a reset frame timestamp so a long pause cannot create a large time step. Use IntersectionObserver for offscreen cards. When motion is paused, render a stable frame and stop scheduling continuous frames. On narrow screens, use a single-column card layout while preserving the logo plot and footer spacing. If Canvas 2D or Path2D is unavailable, show a short in-page fallback message without throwing an uncaught error.

9. Inspect before returning
Check the finished file against these observable conditions: it contains exactly three cards and the exact path data below; it makes one pixel read per brand at initialization and zero reads on later frames or resize; each stored table is 60 by 60; each card draws 60 columns by 30 segments with four widths only; idle noise is seeded and moves downward; pointer and touch trigger a spring that returns to rest, while keyboard focus reveals the callouts; up to three grid-snapped callouts are connected and blue; DPR 2 produces a twice-sized backing store; reduced motion starts still; mobile cards stack; there are no external requests, image elements, or console errors. Do not claim these checks passed unless you actually inspect or run the generated file.

Exact mark payload (preserve the path strings):
Apple — seed 3, scale 0.82, background #eeeeeb, ink #202220, detection #267dff
M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701

Google — seed 29, scale 0.79, background #2152e7, ink #c2dcff, detection #91dcff
M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z

Tesla — seed 51, scale 0.81, background #111212, ink #ec353e, detection #4eaeff
M12 5.362l2.475-3.026s4.245.09 8.471 2.054c-1.082 1.636-3.231 2.438-3.231 2.438-.146-1.439-1.154-1.79-4.354-1.79L12 24 8.619 5.034c-3.18 0-4.188.354-4.335 1.792 0 0-2.146-.795-3.229-2.43C5.28 2.431 9.525 2.34 9.525 2.34L12 5.362l-.004.002H12v-.002zm0-3.899c3.415-.03 7.326.528 11.328 2.28.535-.968.672-1.395.672-1.395C19.625.612 15.528.015 12 0 8.472.015 4.375.61 0 2.349c0 0 .195.525.672 1.396C4.674 1.989 8.585 1.435 12 1.46v.003z

---

# Quantized Line Field Design System

> Translate a mark's luminance into four weights of vertical lines, with slow drift, spring displacement, and grid-aligned scan overlays.

## Design Philosophy

Break a mark into light and rebuild it with four weights of vertical strokes. Thin lines form the field; thick lines reveal the identity. Noise drifts downward while pointer impulses part nearby segments and springs return them to the grid.

Keep motion in the artwork and controls quiet. Gray, cobalt, and near-black cards share proportions and spacing, with black, pale-blue, and red ink. Serif display type, clear sans-serif body copy, and monospace coordinates balance editorial and computational detail.

Scan boxes rank bright windows; they do not perform AI inference. Deliver actual paths, sampling dimensions, thresholds, and observable checks so visitors can reproduce a self-contained file.

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#d9dbd5]
Radius: rounded-[17px]
```

### Shadow
```
sm: shadow-none
md: shadow-none
lg: shadow-none
hover: shadow-none
focus: shadow-none
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:opacity-90
Transition: transition-colors duration-200
Active: active:opacity-80
```

### Typefaces
```
Heading: font-serif font-normal tracking-tight
Body: font-sans
Mono: font-mono
```

### Type scale
```
Hero: text-4xl md:text-6xl
H1: text-3xl md:text-5xl
H2: text-2xl md:text-4xl
H3: text-lg md:text-xl
Body: text-sm md:text-base
Small: text-xs
```

### Spacing
```
Section: py-12 md:py-20
Container: px-6 md:px-10
Card: p-7
Gap sm: gap-3
Gap md: gap-[19px]
Gap lg: gap-8
```

### Color roles
```
Background primary: bg-[#fafaf8]
Background secondary: bg-[#eeeeeb]
Background accent: bg-[#2152e7], bg-[#111212]
Text primary: text-[#202220]
Text secondary: text-[#686b64]
Text muted: text-[#73766e]
Button primary: bg-[#202220] text-[#fafaf8]
Button secondary: bg-transparent text-[#202220] border border-[#d9dbd5]
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `blur`
- `backdrop-blur`
- `shadow-lg`
- `shadow-xl`
- `rounded-none`

### Banned patterns
- matches `^blur(?:-|$)`
- matches `^backdrop-blur(?:-|$)`
- matches `^shadow-(?:lg|xl|2xl)$`

### Why they are banned
- `blur`: Keep discrete strokes sharp.
- `backdrop-blur`: Use opaque card surfaces.
- `shadow-lg`: Separate cards through color and spacing.
- `rounded-none`: Use 17-pixel card corners.

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
font-sans
focus-visible:outline-2
```

### Every card must include
```
rounded-[17px]
overflow-hidden
```

### Every input must include
```
border
focus-visible:outline-2
```

---

## [COMPARE] Quantized Line Field wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="font-sans focus-visible:outline-2 bg-[#202220] text-[#fafaf8]">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="rounded-[17px] overflow-hidden p-7">
  <h3 class="font-serif font-normal tracking-tight text-lg md:text-xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="border focus-visible:outline-2" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Quantized Line Field page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#fafaf8] text-[#202220] border border-[#d9dbd5] px-6 md:px-10">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-[19px]">
    <a href="/" class="font-serif font-normal tracking-tight text-lg md:text-xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-[19px] font-sans text-xs">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#2152e7] text-[#202220] py-12 md:py-20 px-6 md:px-10">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-serif font-normal tracking-tight text-4xl md:text-6xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="font-sans focus-visible:outline-2 bg-[#202220] text-[#fafaf8]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#fafaf8] text-[#202220] py-12 md:py-20 px-6 md:px-10">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-serif font-normal tracking-tight text-2xl md:text-4xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[19px]">
      <!-- Card template - repeat for each card -->
      <div class="rounded-[17px] overflow-hidden p-7">
        <h3 class="font-serif font-normal tracking-tight text-lg md:text-xl">{CARD_TITLE}</h3>
        <p class="font-sans text-sm md:text-base text-[#73766e]">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="border focus-visible:outline-2" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#eeeeeb] text-[#686b64] py-12 md:py-20 px-6 md:px-10">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <span class="font-serif font-normal tracking-tight text-lg md:text-xl">{LOGO_TEXT}</span>
        <p class="font-sans text-xs">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-serif font-normal tracking-tight text-lg md:text-xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-xs">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Quantized Line Field post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `font-sans focus-visible:outline-2`
- [ ] Card includes: `rounded-[17px] overflow-hidden`
- [ ] Input includes: `border focus-visible:outline-2`

### Forbidden check
- [ ] Not using `blur`
- [ ] Not using `backdrop-blur`
- [ ] Not using `shadow-lg`
- [ ] Not using `shadow-xl`
- [ ] Not using `rounded-none`

### Style rule check
- [ ] Use bg-[#fafaf8] paper and bg-[#eeeeeb], bg-[#2152e7], bg-[#111212] card surfaces
- [ ] Use font-serif display type, font-sans interface text, and font-mono coordinates
- [ ] Use rounded-[17px] cards with generous spacing and consistent proportions
- [ ] Sample each path once into a 60-by-60 luminance table
- [ ] Rebuild marks with 60 columns, 30 segments, and exactly four stroke weights

### Style drift check
- [ ] Does not violate: Do not replace the line-drawn marks with logo images or SVG elements
- [ ] Does not violate: Do not read pixels every frame or resample paths on resize
- [ ] Does not violate: Do not obscure strokes with blur, backdrop-blur, or shadow-lg
- [ ] Does not violate: Do not describe scan boxes as real AI recognition results
- [ ] Does not violate: Do not use continuous stroke weights; retain four discrete levels

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Quantized Line Field

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- replace the line-drawn marks with logo images or SVG elements
- read pixels every frame or resample paths on resize
- obscure strokes with blur, backdrop-blur, or shadow-lg
- describe scan boxes as real AI recognition results
- use continuous stroke weights; retain four discrete levels
- omit keyboard focus, touch interaction, or a motion toggle

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not replace the line-drawn marks with logo images or SVG elements
- [ ] do not read pixels every frame or resample paths on resize
- [ ] do not obscure strokes with blur, backdrop-blur, or shadow-lg
- [ ] do not describe scan boxes as real AI recognition results
- [ ] do not use continuous stroke weights; retain four discrete levels