edenvidal/israel-next
# the template
a brand as one folder: the brand, how it is presented, and where it lives — nothing of the sprint that made it.
every word is a line in `index.brand`, the look is `design/styles.css`, the mark is `design/logo.svg`, and
every slide and the site are made of those three; none of them says the brand itself.
```
python3 -m http.server then http://localhost:8000 — no build, no install, any static server
```
```
index.brand every word: the name, the six, the story, the idea, why each chapter is what it is, the dials
design/ the brand's look. everything else is made only of index.brand and what is in here
styles.css the look: three colours, the face, the scale, every surface
logo.svg the mark, in one colour, with no ground
type/ the face. a stand-in so the template renders: replace it with the brand's own and its licence
brand.js puts the words and the mark on every page
sources/ the references the brand was drawn from, a bookmark each
sprint.md how it was made: the proofs, where each one is, and what was decided
deck/ the deck, NN-word.html a slide. the number is the order — bike presents them in it
deck.html the deck, presented: a slide at a time, the arrows under it; its slides are listed in it
index.html the website: what goes live when the folder has a domain, and the page bike reads its look from
```
## the rules
1. **the words are said once.** every word of the brand is a line in `index.brand`; a line with lines indented
under it, like the story, is paragraphs. a page marks the place (`data-brand="name"`) and `brand.js` fills
it. a line left empty shows its question wherever it lands, so an unfinished brand says what is missing:
a chapter opens with its `-why` line — the question before it is decided, the reason after.
2. **the look is said once.** `design/styles.css` is all of it; a new look is a change there, never a style on a page.
the mark is asked for with `<svg data-logo>` and takes the colour of wherever it lands.
3. **colour is a role.** three are decided — `--paper`, the ground; `--ink`, the voice; `--accent`, the brand's
own — and the rest follow. `.on-ink` turns the ground over for everything inside it. the palette and the
specimen read themselves off the stylesheet, so no colour or size is ever typed twice.
4. **the mark breathes.** nothing comes closer than `--clear` of its height, and nothing shows it smaller than
16px.
5. **a thing is shown in the world.** every printed thing is a flat, drawn on its slide from the words, the
look and the mark. once it is photographed — blank, then with the flat printed into it — the slide shows that
photograph (`<img class="photo">`) and nothing over it. no words on a photograph, ever.
6. **things are wished, people are photographed.** a photograph of a thing is made from layered text, never
from a prompt written by hand, and a room with people in it is taken by a camera. the tool is
structural intelligence's `design/photo/wish.py`: copy it into `design/photo/` when the brand gets there.
## to add a slide
a new `deck/NN-word.html` where it goes, and its link in `deck.html`. a slide is named for what it is after its number, so a move is a rename and
nothing points at a number.
