# How every ChabuLab product is made > The product, design, UI/UX and security standards every ChabuLab app, tool and game is held to, from the first sketch to the last fix. These are the rules each app, tool and game is held to, from the first sketch to the last fix. They are written down so they can be checked, and nothing ships until it meets them. ## Product Rich, never bloated. Solid on old devices. Your work is never lost. ### Rich, not bloated A rarely used feature is not bloat. Repetition is. - Keep a feature if it might help even a single person and is hard to find elsewhere. - Remove only what repeats without reason: two controls that do the same thing, a hint shown twice, duplicated lists, dead code. - When a feature nags, simplify it instead of removing it. ### Built for older hardware and software - Detect what the device can do and fall back gracefully. There is always one path that works everywhere. - What can't work on a device is shown disabled with the reason, never hidden. - Memory use is sized from the device, and heavy jobs warn with concrete advice before they start, not after a crash. ### Never lose the user's work - Autosave wherever work takes more than a moment to redo. - Saving and restoring fail safe: a failed load never overwrites saved data. - Old projects and settings keep opening after updates. They are migrated, never discarded. - Cancelling a job leaves nothing half-written. ### Ads with manners Some free tools and games earn from ads. The goal is a premium product that carries ads, never an ad page with a tool. - Ad slots are planned with the layout, at natural pauses: after a result is ready, between sections, on a level-complete screen. - At most two ads on a phone screen. Never above the tool, never next to a button, never inside the work area or the board. - No pop-ups, no countdowns before content, no autoplaying sound. Space is reserved, so nothing jumps when an ad loads. - Everything works fully with ads blocked. Rewarded ads in games are always optional, and the reward always arrives. ### Built to last - Dependencies stay on their latest stable versions, and only safe, actively maintained, fast libraries are used. - One job, one implementation: code is shared across products instead of copied, so a fix reaches every product at once. - Every build checks the licence of each shipped dependency against an allow-list and publishes the third-party notices. - Every fixed bug and every risky change gets a test, and reviews look for what people would feel: lost work, broken output, frozen screens. ## Design Every product gets its own design system, and every screen is crafted, not templated. ### Start from real references - Before a new product, study three to six real products that solve the same job, and note what to borrow and what to avoid. - Borrow patterns, never identity: no copied logos, illustrations, brand colours or signature layouts. - The visual direction comes from the product's subject and its people, not from defaults. ### A design system before any screen One source of truth, with a reference page that shows every component in every state, in light and dark. - Colours are named by role (surface, text, primary, danger, focus), with tinted neutrals instead of pure grey or black. - Spacing comes from one 4-pixel scale. Corner radius follows hierarchy, and nested corners stay parallel. - Buttons, inputs and selects share control heights, so a row always lines up. - Screens use only tokens and components. A visual change goes into the system, never onto one instance. ### Type that reads well, in Vietnamese too - Every font is rendered with a test line full of stacked Vietnamese marks, in every weight, before it is chosen. Fonts are self-hosted with the Vietnamese subset. - Body text is at least 16 px on phones with a line height of 1.5 or more, so marks never collide or get clipped. - Lines run 45 to 75 characters; numbers that change or line up use tabular figures. ### Colour and contrast - Text meets 4.5:1 contrast; control edges, focus rings and meaningful icons meet 3:1. - Colour never carries meaning alone: there is always an icon, a word or a shape too. ### Motion with a purpose - Motion answers what you did: opening, confirming, moving. Each page gets one orchestrated moment instead of effects everywhere. - Small UI moves in 150 to 250 ms, panels in up to 400 ms, easing out. Only transform and opacity animate. - Reduced-motion settings are respected, and looping illustrations pause when they leave the screen. ### No template look - Defaults are flagged and replaced: identical cards everywhere, one radius on everything, decorative gradients and glass, fonts picked by habit, every section fading in the same way, fake statistics. ## UI/UX A newcomer understands it, and it works the same on a phone as on a laptop. ### Words on screen - Labels are general, with helper text: “1 hour, gentle crossfades” with “good for café or study background”, not a cryptic preset name. - Buttons name the action, and the result uses the same verb: Export, then Exported. - A disabled control says why in one line, and how to turn it on. An error appears where it happened, with the fix. - Each thing is said once, in one place. ### Nothing important hidden - Core features never need a hover, long-press, swipe or overflow menu. Those hold secondary actions only. - Every gesture has a visible button or keyboard alternative. - Help comes in layers: helper text, an info button, empty states with a sample to try, a first-run hint, and a help page for complex tools. ### Clickable things look clickable - Buttons have a visible boundary. Borderless buttons appear only where the context already says “button”, like a toolbar or a menu. - One primary action per area. Destructive actions are confirmed or can be undone. - Every control has rest, hover, pressed, focus, disabled and loading states, and touch targets are at least 44 px. ### Layout follows the task - Every screen works on phone, tablet and desktop without being asked, with no sideways scrolling. - The main action is always within reach, and what you need while scrolling, like a player or a toolbar, floats without covering content. - A row of controls that would wrap on a phone becomes an ordered column instead. ### Same experience on every device Each component adapts to the input, while features, labels, order and results stay the same. - A select opens a popover with a mouse and a bottom sheet on a phone. - A tooltip on desktop is a tappable info button on touch screens. - Every control passes one test: is it as easy with one thumb as with a mouse? ### Accessible and complete - Semantic HTML, visible focus rings, full keyboard use, labelled icon buttons, announced status changes, and pages that zoom to 200%. - Empty, loading, error, offline, very long and very short states are all designed, and leaving with unsaved work asks first. ### Used as a newcomer before it ships - Every main task is done start to finish at phone and desktop width, by thumb and by keyboard, answering a fixed list of questions as a first-time user. - Screenshots at 390, 820 and 1440 pixels, in light and dark, in Vietnamese and English, are checked by eye, zoomed in on spacing and marks. - Automated checks cover contrast, overflow and wrapped rows, and each check is proven able to fail. ## Security Protection sized to each product, with no exceptions for people, money and infrastructure. ### Security tiers Each product gets a tier when it starts, and again when a feature adds sign-in, payments or control. The highest tier that applies wins, anything sharing a domain with a higher tier shares its tier, and deploy configuration always counts as infrastructure. | Tier | What it covers | What it must meet | | --- | --- | --- | | T0 Static | No accounts, no server state, no money. Code runs only in your browser, on your own files. | Safe handling of the files you open; no secrets in what ships. | | T1 Public | Public pages with forms, analytics or ad scripts, or a backend without accounts. | Plus a content security policy, a review of every third-party script, server-checked spam protection, consent and privacy basics. | | T2 People | Accounts, sessions, personal data or anything one person stores and another must not see. | Plus every rule for people below, and an audit before launch. | | T3 Money | Payments, licence keys, digital deliveries, or calls to paid services on a visitor's request. | Plus every rule for money below, with each payment flow reviewed on its own. | | T4 Infrastructure | Anything that can deploy, change DNS, hold cloud tokens or control a machine. | Plus every rule for infrastructure below, and a review of every change to a control path. | ### People: identity, data, sessions - Every endpoint that reads or writes someone's data checks, on the server, that this person may touch this exact record. - Roles, owners, prices and plans never come from the request. - Sessions use secure, HTTP-only cookies that rotate on sign-in and end on sign-out. Sign-in attempts are limited and links are single-use. - Personal data stays out of logs, URLs and analytics. Site analytics are cookieless. ### Money: payments, licences, spend - The server is the price authority. Amounts, currencies and discounts come from server data, never from the browser. - Payment notifications are verified before anything is granted, and each order is fulfilled exactly once, even on retries. - Licence seats and balances change atomically in a strongly consistent database. Refunds revoke what was granted. - Paid downloads use signed, short-lived links, and paid services a visitor can trigger have hard caps. ### Infrastructure: accounts, tokens, control - No secret ever lands in the repository, its history, a client bundle, a log or an error page. - API tokens are scoped to the account, zone and permission they need, with an expiry where possible. - Owner dashboards sign in with passkeys and check every request on the server. - Anything that can deploy or control a machine accepts only allow-listed actions, keeps an audit log and has a kill switch. ### Reviews and fixes - Every project is scanned for leaked secrets, across its whole history, and for vulnerable dependencies. Projects with accounts or money also get static analysis. - A finding counts only with evidence, and it is confirmed by a reviewer who did not find it. - A critical or high finding on people, money or infrastructure stops the release. Exposed secrets are rotated first, and every fix gets a regression test.