# Warden visual guidelines

Warden is an iPhone app for blocking selected apps with daily limits, recurring schedules and focus sessions. Users can manage early access, ask a trusted person to approve it, or choose Lockdown until the block ends.

## Mark

Use the supplied W symbol without changing its shape or proportions. The lime app icon is exported from the current, owned 1024px iOS artwork, including its original ribbon shading. It is distinct from the flat #C6E63C interface accent. Transparent black, warm-white and silver symbols use the existing native W contour for other backgrounds. Keep clear space around the mark. Do not use it to suggest an endorsement or partnership.

## Color

- Lime #C6E63C: primary actions and selected brand details.
- Pure black #000000: the public page canvas.
- Warm white #F4F3ED: headings and primary text.
- Soft black #0E0E0E: panels, forms, and secondary surfaces.
- Muted gray #B7B7B2: supporting text.

Keep the palette restrained. Lime buttons use charcoal text; dark surfaces use warm-white text. Body copy stays high contrast. Never use a low-contrast accent to carry essential information.

## Typography and spacing

Native SF/system typography, generous headings and regular prose. Primary buttons use capsule shapes, with quieter rounded form fields. No font files are included or downloaded. Public pages share a 1280px outer grid, responsive gutters and an 820px reading column. Article and policy headings align with the text below them. Controls, reading, product explanations and diagrams each use spacing suited to the task.

## Product examples and copy

Explain what a user can do with static content. Do not add a simulated app or request flow to the homepage. Do not use invented testimonials, usage figures or guarantees. The website should explain the product thoroughly without repeating the same claim in different words.

## Interaction

Primary actions are lime, secondary actions are neutral. All controls have clear focus and state feedback. Use a dark-only public theme, with keyboard access, enlarged text and reduced-motion support. Do not add an appearance switch. Branding should not make a page or control harder to use.

For questions about use of the name or mark, contact contact@warden.to.

## Whitespace

Leave room around headlines and between subjects. Introduce one point at a time on the homepage, with fuller explanations on the existing detail pages. Do not use decorative underline effects, dense repeated cards or extra interactive demonstrations. Keep real forms, navigation and search. Signup belongs on the waitlist page; main navigation opens dedicated pages rather than scrolling Home.

## Photography and motion

Use muted forest photography with generous space and large SF system typography. Photographic apertures connect public pages to the homepage. Keep image saturation and brightness restrained against the pure-black canvas. Page-entry zoom is subtle and never changes scroll position; disable it when reduced motion is requested.


## Choosing a file

- App icons: `lime/warden-icon-{32,180,192,512,1024}.png` and `warden-icon-{512,1024}.png`. These preserve the current iOS app artwork; do not add another background or recolor them.
- Transparent symbols: `neutral/warden-symbol-black.svg` and `neutral/warden-symbol-white.svg`, with PNG counterparts. Use the warm-white symbol on dark surfaces and black on light surfaces.
- Transparent mark exports: `warden-mark-{black,white,silver}.svg` and 512/1024px PNGs. Their names describe the actual mark color; none contains a lime square.
- Wordmarks: `warden-wordmark-{black,white}.svg` and 512/1024/2048px PNGs. Lettering is outlined from native system typography so it does not depend on installed fonts. No font files are distributed.
- `warden-icon.svg` is a self-contained wrapper of the canonical raster app artwork, not an invented vector reconstruction. Use the transparent symbol SVGs when a true vector mark is required.
- Browser icons and both download ZIPs are generated from the same sources. `warden-brand-kit.zip` and `warden-web-brand-kit.zip` contain the complete current kit without nested archives.

## Reproducible exports and preserved originals

The editable sources are in `design/brand/source/`. Run `node scripts/export-brand-assets.mjs` from the web project to regenerate the kit and browser icon files using the installed renderer. Original files, including the earlier download ZIPs, are preserved in `design/brand/originals-20261019.zip`; they are not part of the public downloads. The iOS app assets are not modified by this export process.