Skip to content

UI: declutter result, redesign chemicals and shops, add design skills - #42

Merged
benweru merged 1 commit into
mainfrom
ui/declutter-shops-chem
Nov 4, 2026
Merged

benweru merged 1 commit into
mainfrom
ui/declutter-shops-chem

Conversation

@benweru

@benweru benweru commented Nov 4, 2026

Copy link
Copy Markdown
Owner

Ben asked for one focused UI pass. Do not merge: Ben merges.

Declutter

  • Removed every use of text-sun (#ffc21a) for text. On field and card it reaches only 1.38:1 and 1.59:1, which fails WCAG AA. Those labels now use ink or cream. Removed the yellow hovers.
  • Deleted severityBorder (the red/amber/green left border on #diagnosis-card). Severity is now shown by the words in the heading.
  • "What stands out" no longer has yellow side bars. It is now a numbered list with hairline dividers.
  • The quality-hold box now uses border-ink/20 bg-field with ink text.
  • Removed the hover glow on the primary button.

Chemicals and fertilizer

  • Added a "Why this" line at the top of the section.
  • Each product name is now a heading, with an aligned Type, How to use and Ask for (brands) list.
  • A calm "Before you spray" note sits underneath.

Shops and prices

  • Shops are grouped by product in a comparison table (Shop, Brand and pack, Grade, Price) with prices right-aligned in tabular numbers.
  • On mobile, each shop is a stacked row with the price on the right.
  • The note that prices are indicative is kept.

Agent rules

  • Added BedSense UI rules to AGENTS.md and .github/copilot-instructions.md.
  • Vendored three design skills, each with its upstream license and a SOURCE.md:
    • .github/skills/frontend-design (anthropics/skills)
    • .github/skills/impeccable (pbakaus/impeccable, lean copy: SKILL.md and reference/ only)
    • .github/skills/web-interface-guidelines (vercel-labs)

The new strings have Kiswahili in lib/copy.ts. Lint, typecheck, build and all 274 tests pass.

- Remove yellow text (1.4:1 contrast) and coloured severity side borders
- Numbered observations instead of yellow side bars; calm quality-hold box; drop hover glow
- Chemicals: product headings with an aligned Type / How to use / Ask for list, a Why this line, and a calm Before you spray note
- Shops: per-product comparison table with right-aligned tabular KES prices, stacked on mobile
- New EN/SW strings in lib/copy.ts
- AGENTS.md and .github/copilot-instructions.md UI rules; vendor frontend-design, impeccable and web-interface-guidelines into .github/skills
@vercel

vercel Bot commented Nov 4, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
bedsense Ready Ready Preview Nov 4, 2026 8:16pm UTC

@benweru
benweru merged commit 91b1a71 into main Nov 4, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant