A guide for any AI building interfaces for Janith. Based on what worked in the Pulse app (expense tracker) and the habit tracker — and why it worked, rooted in who they are.
Reference apps: apps/app/pulse/client/ (best example), apps/app/habit-tracker/client/
The visualization fade applies to UX. If they open something and see a wall of inputs or steps, motivation drains before they start. The first screen should require zero thinking to do the most common action.
What Pulse did: The home screen IS the action. Tap a category, numpad appears, tap numbers, tap "Intentional" or "Just happened." Done. No forms, no modals, no "new entry" button to find first.
- Reduce the most common action to the fewest taps possible
- The landing state should be the doing state, not a dashboard that links to the doing state
- Quick-add shortcuts for repeat actions should be visible on the first screen (the habit tracker's +250, +500 calorie cards)
- Pre-fill what you can. The exercise page defaults to 6am, Kesbewa Lake, 4km, 200cal — because that's what they actually do
The computer is the body-free space. The UI should feel like that — clean, dark, nothing competing for attention. Every element serves a function. No decorative elements.
The palette:
--bg: #0a0a0c (near black)
--bg-card: #111114 (cards, elevated surfaces)
--bg-hover: #1c1c22 (hover/active states)
--text: #c8c5be (body text — warm gray)
--text-dim: #7a7874 (secondary, labels)
--text-bright: #eae7e0 (emphasis, headings)
--accent: #5c9a7d (primary action — muted sage green)
--accent-dim: #3d7a60 (hover on accent)
--border: #242228 (very subtle dividers)
--error: #c97b7b (muted red, not alarming)
Typography:
- System font stack:
system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif - Body: 0.85-0.9rem. Small but readable.
- Section labels: 0.65rem, uppercase, letter-spacing 0.18-0.2em,
--text-dimor--accent - Headings: 1-1.15rem, weight 600,
--text-bright - Tabular numbers for amounts:
font-variant-numeric: tabular-nums - Anti-aliased:
-webkit-font-smoothing: antialiased
Spacing:
- Max container width: 400-520px, centered
- Padding: 0.75-1.25rem on containers
- Gap: 6-8px between list items
- Generous vertical rhythm but compact horizontal density
Don't impose categories, fields, or taxonomies. Let them build their own. This maps to the rebellion — don't tell me how to organize my life.
What Pulse did: Categories start empty. You add your own. They form a tree you navigate by tapping. No predefined "Food / Transport / Entertainment" — you build what makes sense to you, including the hierarchy depth.
- Start with empty states, not templates
- Empty states should be inviting, not sad: "Nothing here yet. Add your first category to get started."
- Let the user define the structure through use, not through a setup wizard
- Optional fields stay optional. Tags on food items? Optional. Distance on exercise? Optional.
If there's a domain-specific way to enter something, build a custom input. Don't default to <input type="text"> and a system keyboard.
What Pulse did: A full custom numpad for amounts. Large keys (1rem padding), 3-column grid, backspace key, decimal point. The amount displays above in real-time at 3rem. No keyboard popup, no cursor, no selection.
What the habit tracker did: Custom time input with segmented spinners — up/down arrows around hour/minute/AM-PM blocks. 68px height touch targets. 15-minute step intervals.
- Numpad for money/calories/numbers
- Spinners for time
- Chips/pills for categories (tap to select, not a dropdown)
- Swipe for edit/delete (not visible buttons cluttering the default view)
- Only fall back to text input for genuinely freeform text (names, notes)
The words in the UI do as much work as the layout. Janith doesn't respond to moralizing. The language should be observational, not prescriptive.
What Pulse did:
- "Intentional" vs "Just happened" — not "necessary" vs "impulse." No judgment. Just: did you choose this?
- "See the pattern" — not "track your spending"
- "Build the map. Log the spend. See the pattern." — the guide page title
- The guide explicitly says: "Not good vs bad. Just: did you choose this, or did it happen? That's the only question."
Rules for copy:
- Describe what IS, not what SHOULD BE
- Status chips say "On target" or "Over" — factual, not "Great job!" or "Warning!"
- No tutorial tone. No exclamation marks. No encouragement.
- Short. 1 sentence max for descriptions. If you need more, the design is too complex.
- Use symbols where they're clearer than words:
~for home/root,›for breadcrumb separators,✓for intentional,×for delete
Visual patterns over numbers. Color over text. The brain should see the answer before reading it.
What Pulse did: Monthly spending is a GitHub-style heatmap, not a table. 5-level green intensity scale (--heat-0 through --heat-4). You see which days were heavy before reading a single number. Tap a day for the detail breakdown.
What the habit tracker did: Calorie progress bar that changes color dynamically — green to amber to red based on thresholds. Status chip ("On target", "Recommended") color-coded.
- Heatmaps for patterns over time
- Progress bars with color transitions for status
- Color-coded chips/labels for categorical states
- Reserve numbers for when you need precision. For overview, use color intensity.
Not everything is the same shade of green. Emotionally distinct categories deserve visually distinct treatment.
What Pulse did: A secondary warm palette specifically for "Wife / Transition" categories:
--warm: #c4894a (amber/warm orange)
--warm-dim: #9a6835 (muted warm)
--warm-bg: #1e150a (warm background tint)
This isn't cosmetic. It means when you see an amber chip in your expense list, you know it's in a personal/relationship category before reading the label.
- Use the warm palette for personally meaningful or relationship-related categories
- The accent green is for functional/neutral actions
- Error red (
--error) is muted, not alarming — it's information, not a warning
The default view should be the cleanest possible. Secondary actions (edit, delete, settings) exist but don't compete for attention.
What Pulse did: Category chips are clean pill buttons. Swipe left to reveal edit and delete behind the chip. 140px action panel, two equal halves with icons only. The swipe gesture is mobile-native and keeps the surface uncluttered.
What the habit tracker did: Entry rows show a × delete button on the right, but it's --text-dim and only turns red on hover.
- Swipe-to-reveal for list items on mobile
- Dim secondary buttons that brighten on hover
- No confirmation dialogs for reversible actions (deleting an entry). Just do it.
- Settings and configuration live in their own tab/page, not inline
They want information density — lots of content scannable at once. But not visual density — not cramped, not cluttered.
- Max width: 400px (Pulse) to 520px (habit tracker). Phone-first, always.
- Font sizes are small (0.8-0.9rem body) but line-height is generous (1.5)
- Section labels are tiny (0.65rem) but have wide letter-spacing (0.18em) for legibility
- Cards have breathing room (1-1.25rem padding) but list items are tight (0.5rem padding)
- Borders are barely visible (
--border: #242228) — structure without weight - Touch targets: minimum 44px height. The numpad keys are ~56px. Time spinner blocks are 68px.
No locked onboarding. No "complete your profile." No required steps before using the core feature.
- The app should be usable within 2 seconds of opening it
- Empty states guide but don't block: "Nothing here yet" + an add button. Not a 5-step wizard.
- No tutorial overlays or coach marks
- If there's a guide, it's a separate page they can visit if they want (Pulse's
?nav link) - Back navigation should always work. Breadcrumbs, not wizard steps.
When the app needs to explain itself, use visual demos, not text paragraphs.
What Pulse did: The Guide page renders mini versions of each UI component inline — a tiny numpad, a tiny category tree with breadcrumb, a tiny swipe demo, a tiny heatmap. Each has a 1-sentence description underneath. The guide IS the app in miniature.
- Build mini/preview versions of components for guide pages
- Show the actual UI element, then explain it in one line
- Keep the guide in the same visual language as the app itself
- Number the steps if there's a flow. Use the same visual system (numbered circles, same fonts).
Fast and subtle. The UI should feel responsive without being animated.
- Hover/focus: 0.12-0.15s ease
- Tab transitions: 0.2s fade
- Slide reveals (swipe): 0.2s ease
- No bounce, no spring, no overshoot
-webkit-tap-highlight-color: transparenton all interactive elementstouch-action: manipulationon buttons to kill 300ms delayuser-select: noneon interactive elements
Before shipping a screen, ask:
- Can they do the main action within 2 taps of opening?
- Is every visible element functional? (no decorative elements)
- Is the copy observational, not prescriptive?
- Are secondary actions hidden until needed?
- Does it work at 400px width?
- Are touch targets at least 44px?
- Did I use a custom input where a generic one would add friction?
- Can they start using it with zero setup?
Written by Atlas. Based on building Pulse and the habit tracker with Janith, Feb-Mar 2026.