Skip to content

HERO-2026-05-12 Document Spine Helix Concept

HERO-2026-05-12 Document Spine Helix Concept

Purpose

Explore a homepage hero image for HELIX around the “document spine” concept. The accepted homepage hero at capture time uses the headline “Product lifecycle for AI.”

Design intent

The image should make the core HELIX metaphor immediate: human judgment and agent execution are two intertwined strands, while documents form the structural rungs that keep AI-assisted work aligned. It should relate visually to the existing double-helix brand mark without duplicating the worked-example graph.

Refined generation prompt

Create a premium editorial hero illustration for a documentation website called HELIX. The concept is a document spine shaped like a DNA double helix.

Two elegant intertwined strands form a clear DNA-like helix: one warm red strand for human judgment and quality, one cool blue strand for AI execution. Instead of biological peptide/base-pair rungs, use small layered document sheets as the connectors between the strands. The documents should look like clean Markdown or technical specification pages but contain no readable text, no letters, no UI labels, and no logos.

The helix should feel like a structural backbone for AI-assisted software work: precise, architectural, calm, and trustworthy. The documents should be the visual spine, not decorative papers floating around. Avoid anatomical medical imagery; this is a conceptual technical-documentation illustration, not a literal human spine.

Composition requirements:

  • Hero-ready composition with generous negative space for text on the left.
  • Main visual weighted to the right or center-right.
  • Clear silhouette at small sizes.
  • No embedded typography or readable symbols.
  • Refined vector-like edges, subtle depth, soft shadows, and high-end technical documentation aesthetic.
  • Color palette: off-white documents, warm red human strand, cool blue AI strand, restrained violet alignment accents.

Dark-mode adaptation requirements:

  • Must work on both light and dark backgrounds.
  • Use luminous but restrained edge highlights so documents remain visible on a dark navy/charcoal background.
  • Avoid pure white fills that would glare in dark mode.
  • Preserve enough contrast between red strand, blue strand, and document rungs in both modes.
  • Prefer transparent or softly atmospheric background rather than a hard white rectangular backdrop.

Output style: polished conceptual illustration, no text, no people, no screens, no generic dashboard UI, no medical spine, no literal DNA labels.

Generated output

To be filled after image generation.

  • Original generated image: /home/erik/.codex/generated_images/019e1a76-d345-7883-b144-318eecedc765/ig_05f22e0b169935ab016a0338cf9bb08190a6ebafea8333609e.png
  • HELIX design artifact copy: docs/helix/02-design/hero-image-concepts/HERO-2026-05-12-document-spine-helix.png
  • Website static concept copy: website/static/hero/concepts/document-spine-helix-2026-05-12.png
  • Review copy: /tank/home/erik/Downloads/document-spine-helix-2026-05-12.png

Critical review and next iteration

The first refined output successfully communicated the document-spine helix, but it should be improved before use as a site hero asset:

  • Generate separate light and dark variants instead of relying on one split-background image.
  • Align colors explicitly to the HELIX design tokens from .stitch/DESIGN.md.
  • Ensure documents act as clear strand-to-strand rungs, not merely stacked pages near the strands.
  • Reduce fake document markings so no pseudo-text competes with the hero headline.
  • Keep the asset crop-safe for desktop, tablet, and mobile.

Light-mode prompt

Create a premium hero illustration for HELIX, a documentation website.

Core metaphor: a document spine for AI work. Two intertwined strands form a clear DNA-like double helix. The left strand is human judgment in terracotta coral (#C44B2F). The right strand is AI execution in indigo blue (#3B6BA8). Violet connection accents use #6842A8.

Instead of biological base-pair rungs, use small clean document sheets as the rungs connecting the two strands. The documents must visibly bridge strand-to-strand. They should look like blank technical Markdown/specification sheets, with no readable text, no letters, no logos, no UI labels, and minimal abstract line marks only if necessary.

The helix should feel architectural, precise, calm, and trustworthy. It is a structural backbone for AI-assisted software work, not a medical spine and not literal biology.

Composition:

  • Main visual on the right or center-right.
  • Generous safe negative space on the left for headline text.
  • Clear silhouette at small sizes.
  • Crop-safe for desktop hero, tablet, and mobile.
  • No people, no screens, no dashboards, no generic SaaS UI.
  • Refined vector-like edges, soft dimensional lighting, subtle shadows.
  • Background should be transparent-feeling or softly atmospheric, not a hard white rectangle.

Generate as a light-mode hero concept with off-white documents and restrained highlights. Avoid overly electric blue. Keep colors close to the HELIX design tokens.

Dark-mode prompt

Create the matching dark-mode variant of the same HELIX document-spine double helix hero illustration. Preserve composition and silhouette. Use charcoal/navy atmosphere, toned off-white document rungs, restrained luminous edges, terracotta human strand (#E07A5F), indigo AI strand (#6B9FD4), and violet connection accents (#9B74D4). Avoid glare, pure white fills, and excessive neon. No text, no letters, no logos, no UI labels, no people, no screens, no generic SaaS dashboard elements.

Light/dark variant outputs

Generated from the refined DESIGN.md-aligned prompt set:

  • Light source output: /home/erik/.codex/generated_images/019e1a76-d345-7883-b144-318eecedc765/ig_05f22e0b169935ab016a033af7e18881908c4d16534407b881.png
  • Dark source output: /home/erik/.codex/generated_images/019e1a76-d345-7883-b144-318eecedc765/ig_05f22e0b169935ab016a033b49818081908df490d6eed52437.png
  • Light HELIX artifact: docs/helix/02-design/hero-image-concepts/HERO-2026-05-12-document-spine-helix-light.png
  • Dark HELIX artifact: docs/helix/02-design/hero-image-concepts/HERO-2026-05-12-document-spine-helix-dark.png
  • Light site asset: website/static/hero/concepts/document-spine-helix-light-2026-05-12.png
  • Dark site asset: website/static/hero/concepts/document-spine-helix-dark-2026-05-12.png
  • Light review copy: /tank/home/erik/Downloads/document-spine-helix-light-2026-05-12.png
  • Dark review copy: /tank/home/erik/Downloads/document-spine-helix-dark-2026-05-12.png

Brand-color regeneration outputs

Regenerated to correct palette drift and remove framed/window composition.

Palette constraints:

  • Light human strand: #C44B2F
  • Light AI strand: #3B6BA8
  • Light connection/documents: #6842A8
  • Dark human strand: #E07A5F
  • Dark AI strand: #6B9FD4
  • Dark connection/documents: #9B74D4

Output paths:

  • Light source output: /home/erik/.codex/generated_images/019e1a76-d345-7883-b144-318eecedc765/ig_0eb99041dc1e287c016a0341d7fba081949b9534f68fa6bcd8.png
  • Dark source output: /home/erik/.codex/generated_images/019e1a76-d345-7883-b144-318eecedc765/ig_0eb99041dc1e287c016a03421f2c008194ab43b99cdba32b1f.png
  • Active light site asset: website/static/hero/concepts/document-spine-helix-light-2026-05-12.png
  • Active dark site asset: website/static/hero/concepts/document-spine-helix-dark-2026-05-12.png
  • Light review copy: /tank/home/erik/Downloads/document-spine-helix-light-2026-05-12.png
  • Dark review copy: /tank/home/erik/Downloads/document-spine-helix-dark-2026-05-12.png

Muted dark-mode regeneration output

Regenerated the dark-mode asset after visual review found the prior version too neon, too electric blue, and too orange. This pass constrains the image to a matte deep-charcoal field with subdued HELIX dark tokens only.

Palette constraints:

  • Background: #14181F
  • Human strand: #E07A5F, muted terracotta/coral, not orange/fire/copper
  • AI strand: #6B9FD4, muted slate indigo, not cyan/teal/electric blue
  • Connection/documents: #9B74D4, muted violet, not magenta/neon purple

Output paths:

  • Dark source output: /home/erik/.codex/generated_images/019e1a76-d345-7883-b144-318eecedc765/ig_0eb99041dc1e287c016a034306ede081948a867cfb03d421de.png
  • Active dark site asset: website/static/hero/concepts/document-spine-helix-dark-2026-05-12.png
  • Dark review copy: /tank/home/erik/Downloads/document-spine-helix-dark-2026-05-12.png
  • Named dark review copy: /tank/home/erik/Downloads/document-spine-helix-dark-muted-2026-05-12.png

High-fidelity transparent cutout outputs

Regenerated after the first transparent cutout solved the rectangular-background problem but lost too much helix quality. This pass keeps the yellow-key transparent workflow while restoring more dimensional ribbon geometry, richer card perspective, and smoother subject detail.

Output paths:

  • Active light site asset: website/static/hero/concepts/document-spine-helix-light-2026-05-12.png
  • Active dark site asset: website/static/hero/concepts/document-spine-helix-dark-2026-05-12.png
  • Light review copy: /tank/home/erik/Downloads/document-spine-helix-light-quality-cutout-2026-05-12.png
  • Dark review copy: /tank/home/erik/Downloads/document-spine-helix-dark-quality-cutout-2026-05-12.png
  • Light screencheck: /tmp/helix-screencheck/home-light-quality.png
  • Dark screencheck: /tmp/helix-screencheck/home-dark-quality.png

Accepted homepage hero box implementation

Status: accepted for the current homepage pass on 2026-05-12.

Design decision:

  • Use the higher-quality opaque light and dark hero images, not chroma-key cutouts.
  • Make the hero container itself a solid compositing surface.
  • Match the hero surface to the opaque image background instead of relying on a page-wide gradient.
  • Clip the hero image inside the hero surface so the graphic does not escape the box.
  • Use image-panel overlay gradients to dissolve the opaque image edges into the solid hero surface.
  • Keep light and dark images separate because the dark image requires different color and background treatment.

Active assets:

  • Light site asset: website/static/hero/concepts/document-spine-helix-light-2026-05-12.png
  • Dark site asset: website/static/hero/concepts/document-spine-helix-dark-2026-05-12.png
  • Light artifact copy: docs/helix/02-design/hero-image-concepts/HERO-2026-05-12-document-spine-helix-light.png
  • Dark artifact copy: docs/helix/02-design/hero-image-concepts/HERO-2026-05-12-document-spine-helix-dark.png
  • Light review source used for active asset: /tank/home/erik/Downloads/document-spine-helix-light-2026-05-12.png
  • Dark review source used for active asset: /tank/home/erik/Downloads/document-spine-helix-dark-muted-2026-05-12.png

Local server expectation:

  • Root-mounted local review server: http://eitri:1315/
  • Production/baseURL server may mount under /helix/; do not mix the two when checking CSS.

Verbatim homepage markup

Source: website/content/_index.md

<div class="helix-hero-layout">
<div class="helix-hero-copy">


  See the details






  Product lifecycle for AI.






  Agents do better work with context they can trust. HELIX is a document discipline for teams building software with agents. It turns project intent and evidence into shared memory, then keeps that memory current as the work changes.




</div>
<figure class="helix-hero-image-panel" aria-label="Document spine double helix">
  <img class="helix-hero-image helix-hero-image-light" src="hero/concepts/document-spine-helix-light-2026-05-12.png" alt="A document spine double helix connecting human intent, AI execution, and governed artifacts." />
  <img class="helix-hero-image helix-hero-image-dark" src="hero/concepts/document-spine-helix-dark-2026-05-12.png" alt="" aria-hidden="true" />
</figure>
</div>

Verbatim hero CSS

Source: website/assets/css/custom.css

.helix-hero-layout {
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 2.8vw, 2.5rem) 1rem clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
  border-radius: 42px;
  background: #fbf6eb;
}

.dark .helix-hero-layout {
  background: #111721;
}

.helix-hero-layout::before {
  content: none;
}

.dark .helix-hero-layout::before {
  content: none;
}

.helix-hero-text,
.helix-hero-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.helix-hero-copy {
  flex: 1 1 58rem;
  max-width: 62rem;
}

.helix-hero-image-panel {
  position: relative;
  flex: 0 1 min(58vw, 56rem);
  min-width: min(100%, 34rem);
  margin: clamp(-1.2rem, -1.8vw, -0.6rem) clamp(-1rem, -1.4vw, -0.35rem) clamp(-1rem, -1.4vw, -0.5rem) clamp(-1.5rem, -2vw, -0.75rem);
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.helix-hero-image-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, #fbf6eb 0%, rgba(251, 246, 235, 0.96) 8%, rgba(251, 246, 235, 0) 28%),
    linear-gradient(180deg, #fbf6eb 0%, rgba(251, 246, 235, 0) 16%, rgba(251, 246, 235, 0) 78%, #fbf6eb 100%);
}

.helix-hero-image-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(251, 246, 235, 0), #fbf6eb 78%);
}

.helix-hero-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center right;
  filter: saturate(0.95) contrast(0.98);
  mix-blend-mode: normal;
  opacity: 0.98;
}

.helix-hero-image-dark {
  display: none;
}

.dark .helix-hero-image-panel {
  background: transparent;
  box-shadow: none;
}

.dark .helix-hero-image-panel::before {
  background:
    linear-gradient(90deg, #111721 0%, rgba(17, 23, 33, 0.96) 8%, rgba(17, 23, 33, 0) 28%),
    linear-gradient(180deg, #111721 0%, rgba(17, 23, 33, 0) 16%, rgba(17, 23, 33, 0) 78%, #111721 100%);
}

.dark .helix-hero-image-panel::after {
  background: linear-gradient(180deg, rgba(17, 23, 33, 0), #111721 78%);
}

.dark .helix-hero-image {
  filter: saturate(0.94) contrast(0.98) brightness(1.01);
  mix-blend-mode: normal;
  opacity: 0.98;
}

.dark .helix-hero-image-light {
  display: none;
}

.dark .helix-hero-image-dark {
  display: block;
}

@media (max-width: 767px) {
  .helix-hero-layout {
    flex-direction: column-reverse;
    text-align: center;
  }

  .helix-hero-proof,
  .helix-hero-actions {
    justify-content: center;
  }

  .helix-hero-image-panel {
    flex-basis: auto;
    width: min(100%, 30rem);
  }

  .helix-hero-image {
    aspect-ratio: 4 / 3;
  }
}