---
name: tehom-design
description: Use this skill to generate well-branded interfaces and assets for the Tehom AI brand family (Tehom · Yehi · YHWH), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, UI kit components, and the Genesis-1 iconography family. The brand is dark-first, restrained, theological. Tehom and Yehi keep theology covert (stealth posture); YHWH bears the canonical Source as wordmark (explicit posture). Six colors. Three typefaces. One mark. One Name.
user-invocable: true
---

# tehom-design

Read the `README.md` file within this skill, and explore the other available files. The README is the orientation. **For any work touching theology, brand-family naming, or the YHWH sub-brand, also read `brand_family/yhwh-foundation.md` and `brand_family/v1-4-draft.md` first.**

## Core files

- **`README.md`** — brand orientation, content fundamentals, visual foundations, iconography, caveats.
- **`colors_and_type.css`** — drop-in CSS with locked color tokens, type scale, spacing, motion, button + card patterns. Import this from any HTML artifact.
- **`brand_family/`** — the family materials:
  - `yhwh-foundation.md` — theological foundation (read first for any theology-touching work)
  - `README.md` — three-sub-brand family overview
  - `yehi/` — Yehi methodology sub-brand kit
  - `yhwh/` — YHWH alignment-memory sub-brand kit (Hebrew + Latin wordmarks)
  - `v1-4-draft.md` — proposed brand-guidelines update (supersedes v1.3 when adopted)
- **`assets/logos/`** — the eight canonical Tehom SVG lockups (mark / wordmark / horizontal / stacked × dark / light). Do not redraw.
- **`assets/icons/`** — 47 hairline geometric icons (24×24, 1 stroke, `currentColor`).
- **`ui_kits/marketing/`** — high-fidelity recreation of the tehom.ai marketing site, broken into JSX components you can lift into prototypes.
- **`preview/`** — small per-card HTML files that demonstrate each token / component pattern in isolation.
- **`reference/`** — full brand guidelines v1.3, archetype profile, BrandScripts, the locked landing page HTML. Read these whenever you need to make a non-trivial judgment call.

## How to use this skill

If creating **visual artifacts** for Tehom or Yehi (slides, mocks, throwaway prototypes, marketing collateral):

1. Copy the assets you need (logos, icons, fonts) out of `assets/`.
2. Import `colors_and_type.css` into a new HTML file.
3. Use components from `ui_kits/marketing/` as starting points — they encode the brand's layout grammar.
4. Keep theology covert. No Hebrew on selling surfaces. Output a single HTML file unless asked otherwise.

If creating **visual artifacts for YHWH** (alignment surfaces, canon docs, scoring views, YHWH-OS UI):

1. Same base setup as above.
2. **Theology is explicit on YHWH surfaces.** Hebrew יהוה is the canonical wordmark; uppercase Latin `YHWH` is the operational form. Never `yhwh` lowercase — that reads as a vocalization and breaks the traditional non-pronunciation convention.
3. Scripture citations are permitted inline (Gen 1:3, Ex 3:14, 1 Cor 12:12, etc.) when a virtue or framework anchors to the verse. Never decoratively.
4. Gold (`--tehom-signal`) can run slightly more often than on Tehom proper — *light* and the signal-gold token share semantic weight. Still meaning, never decoration.

If working on **production code**:

1. Treat `colors_and_type.css` as the source of truth for tokens.
2. Treat `reference/tehom-brand-guidelines-v1.3.md` as canon until v1.4 commits (then `brand_family/v1-4-draft.md`).
3. Treat `assets/logos/` SVGs as the only valid Tehom logo files. Brand_family/yehi/ and brand_family/yhwh/ hold the sub-brand wordmarks.
4. Run any voice / copy decision through the do-words and don't-words sections of the README before shipping.

## Non-negotiables to remember

- **Dark-first.** `--tehom-deep` (#050A10) is the default background. Light mode is secondary.
- **Six color tokens, no more.** Gold for meaning, slate for function, terracotta only for errors.
- **No emoji. No gradients. No drop shadows. No rounded corners.** Hairline strokes, sharp corners, solid surfaces.
- **The mark's dot is always the brightest thing.** In light mode it inverts to a hollow circle (cream interior, deep stroke) — light entering darkness, never the reverse.
- **Tehom and Yehi: stealth theology.** Never put Hebrew script or Genesis framing in marketing copy, product UI, or paid-acquisition surfaces. It belongs in origin docs, internal references, business-card backs, and the about-page footer.
- **YHWH: explicit theology.** Hebrew יהוה is the canonical wordmark and may appear on YHWH product UI. Uppercase Latin `YHWH` is the operational form. Never `yhwh` lowercase. Never `Jehovah` or `Yahweh` (vocalized).
- **The voice is restrained.** Magician 60% / Sage 40%. Avoid disrupt, relentless, unleash, supercharge, AI-powered, intelligent (as marketing dust). The brand describes; it does not sell.
- **Always lowercase Tehom and Yehi wordmarks.** "tehom" and "yehi" in Fraunces Light at opsz 144. YHWH is uppercase or Hebrew — never lowercase Latin.
- **Dashed strokes = act-in-motion.** Solid strokes = stable artifact. Consistent across the icon family.

## If the user invokes this skill without other guidance

Ask them what they want to build or design. Useful clarifying questions:

- Which member of the family? Tehom parent, Yehi methodology, or YHWH alignment?
- Marketing surface, product UI, internal doc, or something else?
- One screen / artifact, or a set?
- Dark (default) or light mode?
- Do they want imagery (rare — flag it), or pure typography + the mark?
- Is the audience Tehom-aware, or hearing the name for the first time?

Then act as an expert designer who outputs HTML artifacts *or* production code, depending on the need.