One codebase, three layers

The public newspaper, the editors’ console, and a structured content model behind both.

A typical reader journey

1. Push or WhatsApp

   A new issue or a flash arrives.

2. Home

   The lead story and the ticker.

3. Article

   Read, share, and find related stories.

4. Vroodim and the Club

   Greet, play, and come back.

5. Archive

   The printed issue as a PDF.

The main editor sees all nine admin sections. Content editors see Content, Flashes, Members Club and Vroodim. Readers never sign in unless an article is limited to residents.

A front page, not a feed

The layout borrows newspaper hierarchy so the community reads it like the paper they already know.

1. One lead story, full width

   A large photo and a 50 px headline give the page a clear entry point. Editors can pin any article as the lead.

2. “Flashes” as a red ticker

   Short alerts sit in a dated side column with red time stamps, so urgent items never compete with features.

3. Tunable typography

   Headline, subtitle, flash and date sizes are settings, not code. Editors adjust hierarchy without a redeploy.

4. Playful brand, serious grid

   The mascot and lime stripe carry warmth; underneath, a strict two-column grid keeps reading calm.

Color-coded rooms

Each section owns a tint and an icon, so readers know where they are before reading a word.

1. Section header as a signal

   A soft gradient band with the section name in heavy Rubik replaces a generic page title.

2. Art direction per device

   Each article stores a desktop and a mobile lead image with its own focal point, so faces are never cropped on phones.

One thumb, one green button

Most residents open the newsletter from a WhatsApp link on their phone, so the phone layout was designed first.

1. A three-target bottom bar

   Home, a big lime menu button in thumb reach, and the Members Club. Nothing hides in a hamburger corner.

2. Native-feeling details

   Pull-to-refresh, a red flash timeline with date pills, tap-through cards, and push notifications for new content.

Wandering, not scrolling

A commercial news site is built to keep you. A community newsletter is built to inform you, connect you, and let you go.

Colour as meaning

• Sky #A8DCFF

  Masthead. The sky band behind the mascot on every page.

• Grass #9DFF4D

  Stripe · menu button. The lime stripe under the header and the big thumb-reach menu button.

• Red #E3342F

  Flashes · urgent. Time stamps and pills in the flash ticker: read this now.

• Pink #F7C6D7

  Vroodim · joy. The pink page: greetings, celebrations, kids of the year.

• Blue #2F6DF6

  Links · actions. Every link and primary action across the site.

• Cream #FFF1CC

  Members Club. Games, puzzles and the leaderboard live on cream.

A newsroom CMS for volunteer editors

Editors are community members, not developers. The console hides complexity behind nine plain sections.

1. Nine sections, two roles

   Content, flashes, users, mailing, archive, Members Club, Vroodim, analytics and settings. Content editors get the four they need; the main editor sees all nine.

2. Block-based editor and publishing controls

   Text, image, row, button and file blocks; desktop and mobile lead images with focal points; drafts, scheduling, pinning, residents-only access and preview.

Three lenses on the same decisions

One product, one job: the home page is the tool

No marketing hero page stands between the visitor and the value. A flat, shallow tree where every page is one click away.

1. Every result is a landing page

   Each proofread has its own shareable page, which turns every result into a small landing page for the product.

2. One system, front and back

   The admin lives inside the same app and design system, so the owner edits any text on the site in minutes, in the same visual language.

Three panels, read right to left

Source text, corrected text and the correction report, in Hebrew reading order. Salmon means “this text has been edited”; the muted cream input stays quiet.

1. Report as a table

   Before, after, and the rule that was applied, each linked to the Academy of the Hebrew Language. The ✕ reverts one correction and updates the text.

2. Colour is data

   Four kinds of feedback, each with its own colour: the report in teal, headlines in navy, rephrasing in plum, the summary in orange.

3. Mobile: stack, don’t shrink

   Corrected text first, report below, a sticky + button for a new check and a “show original” toggle instead of a third column.

Warm paper, one bold accent

A cream canvas that feels like marking a printed page, with burnt orange reserved for the primary action.

• Cream #FFF7ED

  Canvas. The page itself: marking a printed sheet on a desk.

• Burnt orange #C2400D

  Brand · CTA. The one bold accent, reserved for the primary action.

• Salmon #FF946E

  Edited text. The output panel: this text has been changed.

• Teal #2E706B

  Report. The correction report tab and its table.

• Navy #1E3A8A

  Headlines. Suggested headlines get their own tab colour.

• Plum #5D3E54

  Rephrasing. Rewrites and rephrasing suggestions.

• Green #16A34A

  Sign up · pay. Registration and payment: the second, rarer action.

• Ink #191426

  Shadow Writer. The dark violet theme that flips on for the rewrite engine.

1. Components

   Pill buttons with a soft drop shadow are the only elements that float, so the eye lands on actions. White cards with a hairline border; text areas in a deeper cream read as a sheet on a desk.

2. Type and mark

   Heebo and Inter, right-aligned, with generous line height. The logo, a magnifying glass wearing reading glasses, doubles as favicon and app icon.

A second product in the same shell

Switching modes flips the entire theme to dark violet, so the user always knows which engine is working.

1. A brief, not a prompt

   Three plain questions (who reads it, what for, how long) plus optional house rules. The user never writes a prompt.

2. Sliders with words, not numbers

   Humour, formality and humanity run 1 to 5, but the labels speak: “WhatsApp to a friend” up to “royal letter”.

3. Four options, each explained

   The model returns four rewrites, each with “what makes this version different”. One tap sends the pick back to proofreading.

Designed at phone width first, then widened

Accessibility is a feature, not a plugin: preferences apply before the page paints, so nobody sees a flash of the default layout.

1. Context-aware menu

   Guests see Login and Register; members see Profile. Shadow Writer keeps its icon so it is recognisable in both.

2. Accessibility widget (Alt+A)

   Text size, line spacing, contrast, readable font, link and heading highlights, big cursor, stop animations. Saved locally. Israeli standard 5568 and WCAG 2.0 AA.

3. Consent before the first send

   Six plain sentences explain that AI processes the text and that the user keeps the rights. Shown once. A dedicated “paste text” button removes the long-press dance on mobile.

Run the business in the same system

A ten-section console with the brand palette inverted: orange rail, cream workspace, white cards. The owner never learns a second interface.

1. Overview

   Four KPI cards with trend chips.

2. Content CMS

   Every fixed string, with reset to default.

3. Bot settings

   Launch mode, instructions and data files.

4. Growth tools

   “Did you know” facts, codes and the inbox.

5. People and data

   Users, saved texts and message triage.

From first check to paid plan: one calm journey

Every conversion moment keeps the same visual rules: one orange action, everything else stays quiet.

1. Land on the tool

   No sign-up wall; value within seconds.

2. Consent, once

   Plain-language terms on the first send only.

3. Results you can keep

   Copy, download a .doc, or share a public page.

4. Register when it helps

   Email or Google, one card on a soft backdrop.

5. Upgrade with no surprises

   The total shows before any field.

1. Why it converts

   The order summary is the only orange block on the checkout page, so price and action are read as one unit.

2. Honest plans

   Plan cards on mobile keep the recommended plan first and the free plan honest, in the largest type on the site. The FAQ answers how long it is free and what happens after.