# NEI / Within — brand kit v1

Selected by the founder on October 2, 2026. This is the working design source of truth; formula, packaging, and launch content remain provisional.

## Brand foundation
NEI develops Chinese medicine–based powder packets for people experiencing recurring UTIs. The initial US website builds qualified interest and links to a hosted waitlist. Accessible positioning means readable information, approachable imagery, and transparent purchase details when sales open.

Warm: acknowledge the customer's experience. Grounded: explain concrete formulation decisions when confirmed. Quietly confident: use concise language and a distinctive visual identity without overstating outcomes.

Working introduction: “Meet NEI. A Chinese herbal approach to urinary wellbeing, in powder packets.” Heritage is central to the formulation story. Claims of prevention or soothing remain unverified product intentions. Avoid assertions that competing products never work.

## Logo system
Primary concept: NEI in Archivo Black paired horizontally with 內. Secondary: NEI alone when the full identity appears nearby. Character-only: small supporting seal or favicon study; final artwork requires review. Use the exact traditional character 內, not 内. Meaning: within. Pronunciation remains to be confirmed.

Clear space: at least half the wordmark's cap height on every side. Minimum digital wordmark width: 64px; paired lockup: 104px. Character: at least 24px in interface use. These minimums require checking final outlined artwork. Use wine on cream, ink on paper, or paper on wine. Keep upright and unstretched; do not add outlines, bevels, shadows, or decorative calligraphy. Font-rendered lockups are prototypes rather than final vector logo assets. Font licenses and final Chinese glyph artwork should be retained with production assets.

## Color roles
| Role | Color | Usage |
|---|---|---|
| Primary | #7A2E2E | Buttons, links, brand marks |
| Primary hover | #4E1D1D | Hover, deep brand surfaces |
| Background | #F5F0E9 | Main page ground |
| Surface | #FBF8F3 | Reading areas and product panels |
| Soft surface | #EAD8D3 | Select editorial sections |
| Text | #1F1A17 | Body and headings |
| Secondary text | #655B52 | Captions and supporting information |
| Decorative border | #DCD2C6 | Hairline dividers |
| Control border | #7E736B | Input boundaries |

Use light neutrals for most of a page, wine as a deliberate anchor, and blush in occasional sections. Do not use decorative borders as the sole boundary of interactive controls. Small text must meet 4.5:1 contrast; large text and required control indicators must meet 3:1. Actual selected pair ratios are in contrast-check.json. Text over photographs requires a solid surface or verified overlay/crop treatment.

## Typography
Newsreader regular: expressive headings. IBM Plex Sans regular/medium/semibold: body, labels, navigation, captions. Archivo Black: wordmark only. Drop Poppins and IBM Plex Mono from the website's default system to reduce competing voices.

H1: fluid 44–88px, 1.05 line height. H2: 32–56px, 1.1. H3: 24–32px, 1.2. Body: 16px minimum, 1.6. Lead: 18–20px. Captions: 14px. Keep body paragraphs roughly 45–65 characters wide. Labels remain readable rather than compressed into tiny uppercase text. Font fallback behavior is supported; final licensed font files should be hosted with the chosen platform.

## Layout and motion
4px spacing base: 4, 8, 12, 16, 24, 32, 48, 64, 96. Maximum content width 1200px; fluid page gutters 20–48px. Section spacing 48–96px. Use asymmetric editorial layouts on desktop and simple stacked reading order on mobile. Alternate cream, paper, and occasional blush/wine sections. Avoid decorating every paragraph with a card.

Buttons and fields: minimum 48px height; 2px corner radius. Subtle color changes at 180ms. Keep keyboard focus visible and unblocked. Honor reduced motion. No forced scroll effects or perpetual decorative animation.

## Photography and heritage
Product: true packet proportions, legible packaging, natural shadows, cream or tactile surfaces. People: comfortable everyday settings, varied adults, believable expressions. Botanicals: meaningful sourcing/formulation context; captions identify reference images until ingredients are confirmed. Quality images: use actual documented processes when available, not generic lab imagery as proof of testing.

Express Chinese heritage through 內, ingredient names and provenance, formulation explanations, and knowledgeable contributors. Use translations where useful. Existing mockup photographs are temporary assets with publication rights and accuracy still to be confirmed.

## Voice examples
Home: “Meet NEI. Rooted in Chinese herbal tradition.”
Customer recognition: “When urinary discomfort keeps coming back, it can take up more of your life than you want.”
Waitlist: “Get updates on the formula, ingredients, and launch.”
Support: “Tell us what you need help with. Our team will get back to you.”

Avoid blame, fear, guaranteed outcomes, invented reviews, artificial scarcity, or implied clinical proof. Describe the product's intended role only with approved wording. Never present the product as treatment for an active infection.

## Component specifications
Primary button: wine/paper; deep wine hover; 3px focus outline with 4px offset. Secondary: outlined wine; blush hover. Disabled: native disabled control and no actionable cursor. Loading: descriptive label and aria-busy, without changing layout.

Email field: visible label; optional helper text; no placeholder-only labels. Validation: error message tied to field, aria-invalid, preserve entered value. Confirmation: only after verified signup response. This site's first release links out to the hosted waitlist instead of duplicating collection.

FAQ: native details/summary, keyboard operable, clear expanded state. Navigation: understandable page labels, visible current-page state; mobile menu only once necessary. Product tile: actual price/options at commerce launch, never fabricated review counts. Educational section: source links and clear distinction between ingredient research and NEI-specific evidence.

## Homepage structure
1. Hero: product identity, Chinese herbal roots, powder packet format, waitlist action.
2. Recognition: acknowledge recurring urinary discomfort in plain language.
3. Approach: explain formulation philosophy with confirmed detail.
4. Format: packet imagery; add flavor and usage only when finalized.
5. Transparency: link to confirmed ingredient and quality information; reserve space internally until available.
6. Story: why NEI exists and the meaning of within.
7. FAQ: launch, packet format, what updates to expect, contact.
8. Closing waitlist action: link to the hosted waitlist URL.

## Asset and content inventory
Available: HTML mockup, extracted botanical images, reference workbook, chosen visual direction. Needed: final logo artwork, packet dimensions/artwork, real product photos or accurate renders, founder story/photo, formula and ingredient list, quality documentation, approved usage/claims, waitlist URL. Pricing, product range, and subscriptions are future commerce decisions.

## Next implementation deliverable
Design the homepage and Meet NEI page with this kit, desktop and mobile. Platform remains undecided; Shopify is a candidate for the later standalone store. Public launch and signup integration depend on confirmed content and the hosted URL.