Principles
How a Jonesco site should feel. The values live in the foundations; these are the reasons behind them.
Look
- Black, white, newsprint. Newsprint is “paper”: use it behind artwork and printed things, and to block in or contain a section. Never as the whole page background.
- One accent per site. Magenta is the default. It marks hover and the one active thing; it’s not decoration.
- Yellow is the highlight. Black tags with yellow type, hover on black, text selection.
- Thick rules for structure, thin rules for lists.
- Square corners on anything with a border. Photos of rounded real objects can stay rounded.
- No shadows or gradients on UI. The only shadow is a soft one under a photographed product.
Type
- Headlines: Trade Gothic Bold Condensed No. 20, caps, tight, big. Condensed type reads small, so size it up.
- Labels: Trade Gothic Bold No. 2, caps, slightly open: nav, buttons, tags, list labels.
- Body: Trade Gothic regular, sentence case. Jonesco uses only Trade Gothic.
- Curly quotes and apostrophes in copy. American spelling.
Layout
- One centered 1200px column. Everything lines up on its edges, full-width bands included.
- Separate sections with a thick rule or a switch between white and black, not both.
- Pages close on black: a black band runs straight into the black footer.
- Headings get the same space above and below everywhere.
Behavior
- One highlight at a time. Hover color changes in .15s. Respect reduced motion.
Voice and art
- Short, specific, a little dry. Hand-drawn work is the hero; line art sits on newsprint; logos reverse to pure white on black.