01 · Brand essence
What the brand is and how it speaks.
Positioning
Applied AI that removes operational drag for Indian businesses.
Personality
India-rooted, world-class. Never loud, never hypey, never “web3”.
Voice
Clear, confident, quietly technical, no fluff. Short sentences. Concrete nouns. Claims we can defend. We describe what the software does, not how disruptive it is.
Do
- “Bills go out on WhatsApp. Payments reconcile themselves.”
- “Live in 48 hours, with your own bill templates.”
- “We add ₹0 of our own fee to your UPI collections.”
- “In active development. We are onboarding design partners.”
Don't
- “Revolutionising the future of fintech with AI.”
- “10× your collections overnight.” (unprovable)
- “Leveraging synergistic next-gen paradigms.”
- “Trusted by hundreds of businesses.” (not yet true)
02 · Logo and mark
Primary lockup, stacked lockup, and the aperture mark for small sizes.
Primary lockup — dark-on-light. Minimum width 140px. Clear space = height of the mark on all sides.
ILMORA
AI TECHNOLOGIES
Stacked lockup — light-on-dark wordmark for navy surfaces, footers and dark UI. Tracking 0.16em on the wordmark, 0.28em on the descriptor.
Aperture mark — the network/aperture form reduced to a concentric aperture for app icons, favicons and 16px use. Detail drops out as size drops.
Product lockup
BillFlow India carries its own logo and tagline (“Present. Collect. Reconcile. Simplify.”). Product surfaces use the BillFlow mark; the corporate ILMORA lockup appears once, in the footer, as “An ILMORA AI Technologies product”. Never combine the two marks side by side in a header.
03 · Colour tokens
Ink and accent scales run 50–900. Body text on surface-50 and white passes WCAG AA at all sizes; white on accent-500 and darker passes AA for 16px+ text.
Ink / primary — navy
Accent — electric blue
Secondary indigo · warm highlight · neutrals
Usage rule: one dark navy surface and one light surface per page, accent-500 for action, indigo-500 only as the far stop of the hero gradient, amber once per view for a single emphasis. Semantic colours never carry brand meaning.
04 · Typography
Space Grotesk (geometric grotesque) for display; Source Sans 3 for body and UI; IBM Plex Mono for numbers, IDs and code. Loaded from Google Fonts with display=swap; self-host for production.
Display XL · Space Grotesk 700 · 56/1.05 · -0.02em
Applied AI, in production
Display L · 40/1.1 · H2
Billing that runs itself
Heading M · 24/1.25 · H3
Automatic reconciliation
Body L · Source Sans 3 400 · 19/1.65
Lead paragraphs and hero support copy. Sits at 19px on desktop, 17px on mobile, never below 16px.
Body M · 17/1.75 — default
Default running text, including legal pages. Measure capped at 62–70 characters. Weight 600 for inline emphasis, never italic for emphasis.
Label / Eyebrow · 12/1.4 · 0.14em · uppercase 700
Featured product
Mono · IBM Plex Mono 500 · 14/1.5 — identifiers & amounts
CIN U62099TS2026PTC213579 · ₹12,480.00 · INV-2026-04-0093
05 · Iconography and imagery
24px grid, 1.6px stroke, round caps and joins, no fills. Imagery is abstract: fine grids, soft navy→indigo gradients, aperture and node motifs, generous negative space. No stock photos of people, no robot or brain art.
Icon set sample
[ product-ui screenshot ]
Product imagery placeholder pattern: striped surface plus a monospace label naming what belongs there. Replace with real BillFlow UI captures before launch — never with stock photography.
06 · Components
Buttons, cards, inputs, badges, tiles, navbar and footer — the parts every page is assembled from.
Buttons
Radius 10px · min height 48px · hover darkens one step · focus is a 3px accent-300 ring at 3px offset · never more than one primary per view section.
Card · elevation 1
White surface, 1px border-100, radius 16px, shadow 0 1px 2px rgba(11,18,32,.04). Padding 28–32px.
Feature tile
Card with a 4px accent cap for stepped or ordered content. Cap colour rotates accent → indigo → amber.
Inverted card
Navy surface for emphasis blocks and vertical cards. Body text at #C6D2E4, headings at white.
Form inputs
That email address doesn't look right.
✓ Success state — message sent.
Badges
Spacing · radius · elevation
Spacing scale 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 56 · 72 · 88px. Section padding 88–96px desktop, 56px mobile. Radius 8 chips, 10 buttons/inputs, 16–20 cards, 999 pills. Elevation: 0 1px 2px rest, 0 6px 18px action, 0 12px 30px hero CTA.
Navbar and footer
Navbar: 1200px container, 14px vertical padding, 92%-opacity white with 14px backdrop blur and a border-100 hairline; current page marked with a 2px accent underline and aria-current. Footer: ink-900, four columns collapsing to one at 640px, every statutory identifier present on every page.
Grid and motion
12 columns, 24px gutters, 1200px max content width, 24px page margin. Breakpoints 375 · 768 · 1280 · 1440. Content grids use repeat(auto-fit, minmax(280px, 1fr)) so cards reflow without media queries.
Motion: 150–240ms, cubic-bezier(.2,.6,.2,1), opacity and 4–8px translate only. No parallax, no autoplaying loops longer than 10s, no motion that conveys information on its own. Every animation sits inside a prefers-reduced-motion: reduce guard that disables it.
07 · Applying the system
The six live pages built on these tokens.