Direction

Web 2.0, built on the 90s web. Things have clear edges and vivid colour, like the web around 2006, and sit on bones from the oekaki boards a decade earlier: the painter's window chrome, graph paper under everything, hard pixels. The site should feel like a place where people draw, not like a product dashboard that happens to show pictures.

• Edges are drawn. Every box, control and bar has a line around it or between it and the next. Nothing is marked out by a shadow or a change of shade alone. Rows share one line between them, as the toolbar and its notices do.
• Colour is vivid. The ground is NEO's lavender and night blue. The cucumber lime means "do this" and appears once per view. Orange is for counts, red for what cannot be undone. Use saturated colours from the palette rather than neutral greys.
• The ground is graph paper. NEO's 14px grid runs under every page, so the site and the painter share one surface. Cards, fields and rows sit on it with solid fills and never let it show through.
• Depth is shallow and hard. Shadows have no blur: a raised control sits on a 1px ledge, and a floating menu or dialog casts a 3px offset block. There are no soft, wide glows, and frosted glass appears only where the platform uses it, as in the macOS app's toolbar.
• The 90s stay in the details. What belongs to drawing wears the painter's window: bevel, title bar, grab dots. Drawings keep square corners and a frame, and are never smoothed when scaled. Type is small and dense (13–14px for the chrome), and corners are rounded only a little.
• No gradients. Every fill is one flat colour: no gloss on buttons, no fades on bars, no sheen on cards. Depth comes from lines and the one small shadow, never from shading. CSS may still use linear-gradient() as a tool when both stops are the same colour or meet at a hard edge: the grid's 1px lines, a flat tint laid over the ground, a slider's filled part. What you see must never fade from one colour into another. The one exception is the painter itself, whose title bars are NEO's and stay exactly as NEO draws them.
• Native before custom. Use the browser's own element for a job whenever one exists (select, details, checkbox, radio, range, fieldset, table) and style it here, rather than building a widget from divs and script. Native elements work with the keyboard, screen readers and the phone's own pickers for free, and they survive old engines. Build a custom widget only when no native element does the job, or when the Firefox 56 floor rules the native one out.
• Avoid: gradients, borderless flat cards, grey-on-white minimalism, pill-shaped or heavily rounded boxes, large empty margins, and thin light type.

It all has to hold in Firefox 56, the engine oekaki users keep for the old applets. That is one more reason to use lines and solid fills rather than filters and blends.