Provide: a container with bf-tx plus one ground class (bf-tx-hero, bf-tx-film, or bf-tx-panel); add bf-tx-grain for texture and a scrim element when text sits on top.

• Tonal light (bf-tx-hero): the homepage hero stand-in and any large dark band that needs depth. Light pools upper right so left-aligned type sits in the darker area.
• Grain (bf-tx-grain): 1px dots on a 3px grid at 6% white. Use on tonal grounds and on the black film bands; never on the light theme or over photographs.
• Scrims (bf-tx-scrim-side, bf-tx-scrim-top): over photographs and tonal grounds whenever white text sits on them, so the copy holds 4.5:1. The top scrim sits behind a transparent header.
• Film frame (bf-tx-film): the ground of a video player before its poster loads, and of film cards awaiting a still.
• Panel (bf-tx-panel): secondary panels beside black, such as a full-screen menu's image side or a quote panel.

Order of layers, bottom to top: ground, grain, scrim, content.

Do: keep every treatment warm and neutral. Don't: tint them with amber or any color, add more than one pool of "light" per frame, animate them, or use them in place of real photography once it exists. In Wix Studio, build the grounds as section backgrounds with CSS gradients (or a single exported image), and the grain as a tiled 3px PNG at 6% opacity.

Provide: a short label in sentence case (the style renders it ALL CAPS), a link or action.

• Primary (bf-btn-primary): Burnished Amber accent fill, near-black on-accent label, accent-hover on hover. Use once per viewport: Get Started, Submit application, Play.
• Outline (bf-btn-outline): line-strong border, ink label; fills with ink on hover. Watch a film, Contact us. On photography use white border and label.
• Text (bf-btn-text): ink label with a line-strong underline and arrow; accent-text on hover. Teasers that link to deeper pages (Phase 2 homepage).
• Size: 52px tall, space-6 side padding, radius-xs. Small (40px) only in the site header.
• Type: the button style (Fira Sans Condensed Semibold 600, 13px, 0.16em tracking).

Do: keep labels to one to three words. Don't: put two primary buttons side by side, use amber for outline borders, or round the corners.

Wix Studio: create three Button presets in the Site Theme with these values and hover states.

Provide: the nav items for the current phase and the active page.

• Phase 1: Home, Get Started (anchor to the homepage form), Contact.
• Phase 2: Our Films, How It Works, Our Team, Preparing / FAQ, Contact, plus Get Started as a small primary button (label may become "Apply now" if the client wants a more selective feel).
• Log in sits to the left of the button in ink-muted dark value, as a utility link, not a nav item.
• black background, header-height (80px desktop, 64px mobile), nav type style, white links; the active page gets a 1px accent-text underline.
• Monogram at 28px tall (above the 40px minimum width).

On mobile, collapse nav into a full-screen black menu with links set in heading-2; keep Get Started visible in the bar. The header stays black in both themes.

This classic bar was confirmed by the client over a centered-masthead alternative. Keep the full stacked logo for the footer.

Provide: a photograph or still (real archival photography or a frame from a film, never an AI image presented as a photo), the headline, a one-sentence lede, two actions.

• Photo full-bleed under scrim; all text white.
• Eyebrow in accent-text, then the display-xl headline set one sentence per line ("Every life holds a great story. / Few get a great storyteller."), then the approved lede paragraph at measure width.
• Actions: primary Get Started, outline Watch a film.
• Text sits low-left, padded space-11 top on desktop.
• Optional: a slow 4% push-in on the still over 12 seconds; static under reduced motion.

Don't: center the text over a busy face, use a video background with sound, or add a second headline.

Provide: a Wix Video (or Vimeo Pro) embed with a clean poster frame, the film title (the subject's full name, e.g. Marty Hauselman), a caption, and the running time.

• Section on black in both themes; title in heading-1, eyebrow "A Biographical Film".
• Player 16:9, square corners, a 1px border in white at 18% opacity, and shadow-film. The video is shown whole on black (contain, never cropped).
• The round accent play button (88px, radius-full) sits centered at 60% opacity so type on the poster shows through, rising to full opacity on hover and keyboard focus. It starts playback, then hides and hands over to the player's native controls; it returns when the film ends.
• White monogram watermark low-right at 70% opacity (omit if the poster already carries the logo).
• Below the player: a hairline, the caption (caption) left, running time (nav style) right.
• Hide the host platform's logo, related videos, and title overlay.

Use one featured film on the Phase 1 homepage; on Our Films repeat this block per film with alternating section grounds (black and surface).

Provide: three steps, each with a short title and one or two sentences.

• Three equal columns on desktop, stacked on mobile; each step begins with a line hairline.
• Numerals 01 to 03 in the serif at 44px light, accent-text.
• Titles in heading-3, descriptions in body ink-muted.
• Phase 2 homepage: shorten descriptions to one sentence and add a text button "How it works" linking to the full page.

Keep it to three steps on the homepage. The full How It Works page may expand to five (getting to know you, story discovery, the interview, building the film, delivery).

Provide: a real portrait (4:5), heading, lede, and three credentials. Confirm credentials and wording with the client before launch.

• Two columns (5 / 7), portrait left with a caption.
• A · With portrait (default) (bf-portrait-photo): the biographer's photo in natural color with no filters or texture, cropped 4:5 with the face in the upper third, framed by a 1px border at 12% white. Favor portraits with similar, natural lighting so the roster looks consistent as it grows.
• B · Alternative Treatment (bf-portrait-tonal with bf-tx-hero bf-tx-grain): the same 4:5 frame filled with the tonal light gradient and film grain from the surface treatments. Use it when a suitable portrait isn't available, or to describe the biographers as a group rather than one person.
• Credentials as a hairline list: the honor in ink semibold, the title in ink-muted.
• Describe biographers generally as accomplished authors and journalists; do not list a roster until there is more than one active biographer.
• Phase 2: the same block, shortened, with a text button to Our Team.

Don't: use stock portraits, overstate ("the world's best"), or use amber for anything here but the eyebrow.

Provide: eyebrow text (two to four words), a heading, an optional one-sentence description.

• Two columns on desktop: eyebrow plus heading-1 left, description in body ink-muted right, bottom-aligned. Stacks on mobile.
• Hairline line below, space-5 above it.

Don't: add icons, center it, or use it more than once per section.

Provide: the quote (one or two sentences) and attribution. Use only real quotes from real clients, with permission. The preview text is sample copy.

• quote style, curly quote marks in accent-text, hairlines above and below, attribution in the eyebrow style, ink-muted.
• Max width measure.

Don't: invent testimonials, stack more than one quote together, or use it as a section heading.

Provide: the subject's full name, a one-sentence description, facts (born, biographer, running time; optionally places), the video embed, and the narrative (which can be drafted with AI from the transcript, then reviewed). The preview uses a fictional sample subject.

• Light theme by default for comfortable reading; dark is acceptable for families that prefer it.
• Eyebrow "A Biographical Film", name in display-l as "The Life of [Name]", lede in ink-muted.
• Facts as a hairline definition row: keys in eyebrow style, values in serif 20px.
• Player as in FilmFeature; the narrative below in body-serif at measure, with photographs full-width and captioned.
• Optional password gate before the page, styled with the ApplicationForm field and primary button.

Built as one Wix dynamic page template so each new film needs content only, not design.

Provide: the fields below (adjust with the client), the privacy policy link, and a confirmation message.

• Light theme. Eyebrow, heading-1, a reassurance line in ink-muted.
• Two-column grid on desktop, one column on mobile. Labels above fields in the label style; never use placeholder text as the label.
• Inputs: surface-raised fill, line-strong border, radius-xs, 50px tall; ink border on focus plus the focus ring.
• Errors: danger border plus a message that starts with "Error:", placed under the field.
• Vetting signals belong here: who the film is for, photo and home movie availability, important places.
• One primary button: Submit application. On success show a success confirmation: "Thank you. We review every application personally and will be in touch within a few days."

Wix Studio: build with Wix Forms (V2), map these styles in the form's design panel, and keep the consent checkbox required.

Provide: link groups for the current phase, copyright year.

• black in both themes; primary lockup at 160px (its minimum) with clear space respected.
• Column headings in the eyebrow style at the dark ink-muted value; links in white 14px.
• Base row above a hairline: copyright left, Privacy and Terms right. Log in appears here in Phase 2.
• Social links, if any, as text labels, not colored icons.