Ashish

Case Study

Rikencare Lifesciences

Brand identity design and website engineering for a WHO-GMP compliant, ISO 9001:2015 certified third-party pharmaceutical manufacturer in Nalagarh, Himachal Pradesh.

Brand StrategyIdentity DesignFront-end EngineeringData Pipeline2025
Rikencare monogram

Rikencare

Lifesciences

Part One

The Brand System

What Rikencare Is — and the Problem the Brand Solves

Rikencare Lifesciences manufactures pharmaceuticals on contract for healthcare brands in Nalagarh, Himachal Pradesh. Their buyers are procurement leads and quality managers — people who sign off on supply-chain decisions with real liability attached. These buyers don't care about the lowest quote. They care about not getting a recall, not failing an audit, and not having to explain a batch variance to their board.

The brand's job was to answer those fears before a conversation began. The positioning statement arrived at: “We don't chase volume. We protect reputations.” Rikencare is selective by design — a manufacturing partner that mirrors the client's brand requirements, holds a no-discount discipline, and treats every batch as a signed commitment. The identity had to embody that without saying it.

Three Pillars, One Mandate

Resilient · Robust · Refined. These aren't adjectives chosen for their sound — each maps to a specific buyer fear.

Resilient answers supply-chain instability: the plant runs, the documentation is in order, the batch ships on schedule. Robust answers batch variance: process discipline that removes human error from the repeatability equation. Refined answers regulatory exposure: a finish and a paper trail the client is proud to show an auditor.

Every design decision in the system was tested against one question: does this communicate process discipline, or does it undercut it?

“We sound like proof, not a pitch. Documented, not declamatory. Precise over persuasive.”

Brand Architecture: The Discreet Endorsement Model

Rikencare manufactures across four dosage divisions — tablets, capsules, ointments, and liquids. The architecture choice was a branded house: one master brand over all divisions, with divisional names kept descriptive rather than elevated to sub-brands. The consequence on packaging is deliberate: on a client's finished product, the Rikencare mark appears once, small — “Manufactured by Rikencare Lifesciences.” A discreet seal of compliance. The client's brand remains sovereign on their pack.

This architecture also has a practical compounding effect. Every audited batch, every clean inspection, every on-time delivery accrues to a single brand asset. The mark becomes more valuable each time it's associated with something that doesn't fail.

The Monogram: East + West in One Mark

Rikencare monogram close-up

The logo is a geometric monogram — a cropped, angular “R” shape that encodes four ideas simultaneously: the Latin R for Rikencare, the Devanagari character (ra) — the root sound of the name in Hindi — a cradle for the C of Care in its negative space, and at full abstraction, a capsule cross-section: a split circle cut along its horizontal diameter. East and West, Indian heritage and modern pharmaceutical engineering, in one mark.

The decision was to resist the visual vocabulary of pharma cliché — no molecule, no caduceus, no globe — and instead build something that earned its meaning. The wordmark uses custom geometric letterforms derived from Century Gothic Bold at −50 tracking. The display typeface is Sifonn Pro. The full lockup: symbol, hairline vertical divider, then “Rikencare / LIFESCIENCES.”

Colour: Restraint as a Premium Signal

Midnight

#0A1826

60% · Ground

Bone

#F1ECDF

30% · Reads

Clinical

#2F6FB0

10% · Accent

Sky

#7FB2E0

Light accent

Steel

#7E8FA3

Secondary text

The 60/30/10 ratio is enforced across every composition: Midnight carries the brand, Bone does the reading, Clinical punctuates what matters. The discipline is the message — a layout that deploys Clinical everywhere signals nothing with it. Used once per screen, it says: this matters. Restraint is the premium signal.

Accessibility was not a checkbox. Verified contrast ratios: Bone on Midnight at 14.8:1 (AAA), Sky on Midnight at 7.1:1 (AAA), Clinical on Bone at 4.6:1 (AA). A compliance brand that fails basic accessibility has already made an argument against itself.

Typography and the Hairline System

Three typefaces, three functions. Sifonn Pro for display headings — precision and weight at large sizes. Jost (approved open-source substitute for Century Gothic) for body and UI copy — geometric, clean, readable at 17px with 1.6 line-height and a measure of 60–75 characters. Spline Sans Mono for data, batch codes, licence numbers, statistics — the visual register of documentation.

The hairline system takes the vertical divider from the brand lockup and extends it as a structural device throughout the layout. It sections information, separates content blocks, draws the eye across data rows. A single-weight line, applied consistently, becomes a grammar: here is organised information, produced by an organised company.

Motion and Voice: Stillness Reads as Control

Every motion in the system follows one easing curve: cubic-bezier(.2,.7,.2,1)— ease-out only. Entrances fade up 12 pixels. Hairlines draw in left-to-right. The split-circle motif has one signature animation: a quarter-turn reveal, used only for page loaders. No bounce, no spin, no parallax, no autoplay. These aren't omissions — they're commitments.

“A pharmaceutical compliance brand that bounces its logo is not in control of its own presentation.”

The voice rule is equally direct. The difference between “Every batch ships with full GMP documentation, signed and traceable to source” and “Best rates — unbeatable quality, 100% guaranteed!!” is not a matter of style. It is the difference between a company that trusts its record and one that doesn't.

What Makes It Coherent

The strongest brand systems don't have great individual parts — they have a single idea expressed consistently across every part. Here that idea is: documented, repeatable, trusted. The split-circle logo encodes it geometrically. The Midnight/Bone palette encodes it tonally. The 60/30/10 discipline encodes it behaviourally. The hairline system encodes it structurally. The ease-out-only motion encodes it kinetically.

Every element is doing the same work in a different register. Building the site meant first understanding that as a designer — and then executing against it without compromise.


Part Two

The Website

The Objective

The brief was to turn a complete brand identity into a working “digital vault” — a trust instrument, not a brochure. The target audience is not a consumer browsing on a phone. It's a pharmaceutical procurement manager, a quality assurance director, or a regulatory affairs lead, likely on a desktop, with one question: can this manufacturer be trusted with my product? Every structural decision — information architecture, data presentation, enquiry flow — was made in service of that question.

Translating Brand into Product

The translation was mechanical before it was creative. CSS custom properties defined the five brand colours, the full type scale, and the ease curve as design tokens — the single source of truth for every rendered pixel. Sifonn Pro loaded via @font-face; Jost and Spline Sans Mono via Google Fonts. The 60/30/10 rhythm became alternating Midnight and Bone sections, with Clinical used only for accents and CTAs. Hairline dividers from the identity system became the structural element separating every content block.

The split-circle loader is implemented in SVG — a quarter-turn rotate(-90deg) reveal on page transitions, matching the motion spec precisely. Scroll-triggered reveals use IntersectionObserverto fade elements up 12px on entry with the brand ease curve. Nothing runs on a timer. Nothing loops. The fidelity wasn't incidental — the site is the brand's first impression on buyers who will spend weeks doing due diligence.

Information Architecture Across Eight Sections

Eight sections, navigable via a sticky top nav with in-page routing (no full-page loads): Home, About, Products, Services, Manufacturing, Quality, Careers, Contact. The sequence is deliberate. Home establishes what Rikencare is and surfaces the compliance credentials in the first viewport. Products is the heaviest section — the full approved catalogue. Quality is the trust anchor: certifications, documentation, the audit-readiness claim made explicit. Contact is minimal: an enquiry form and a response-time promise.

The Data Problem: 197 Real Products

The client provided their government-format “Approved Composition List” — a Word document with inconsistent formatting, merged cells, and no clear schema. I parsed this into a structured JSON array: 197 products, each with name, active composition, strengths, pharmacopoeial references (IP/BP/USP), and dosage category.

Every record was integrity-checked: all 197 present, none missing, none duplicated, none mis-categorised. The five dosage divisions broke down as: Syrups & Suspensions (98), Creams/Gels/Ointments (50), Capsules (22), Solutions & Mouthwash (17), Drops (10). The product grid renders with category filters, live text search, and product cards. The entire catalogue is client-side — sub-50ms filter response, no API call.

Engineering note

Reading a government Word document into typed JSON required pattern matching for irregular spacing, handling pharmacopoeial abbreviations as distinct fields, and reconciling product names that appeared in multiple forms across dosage categories. The final JSON is the authoritative source for both the product grid and the PDF generator.

The Packaging Configurator

Each product card opens a configurator allowing a buyer to specify packaging requirements: container type (bottle, tube, or strip — switching by dosage form), cap or closure, measuring aid, label specification, carton, and package insert. The configurator concludes with a buyer-liability declaration before the product is added to the enquiry cart. This is deliberate friction, not a UX oversight. Pharmaceutical procurement involves liability. The declaration surfaces that at the point of selection, not buried in a terms page.

The Enquiry Funnel: Why Not E-Commerce

The cart persists in localStorage. A buyer can add multiple SKUs at a 3,000-unit MOQ per product, edit the cart, then proceed to a checkout form capturing name, company, GST number, Drug Licence number, and a confirmation of authorised-buyer status. The form submits to a third-party form service; the buyer sees a success state.

There are no payments, no dashboards, no accounts. This was not a technical limitation — it was a deliberate model choice. Authorised pharmaceutical buyers in India do not transact on e-commerce rails. They send enquiries, receive quotations, sign purchase orders, and pay on invoice terms. Building an e-commerce flow would have produced a product that looked modern and was commercially useless.

“The enquiry/quotation model is how the market actually works. The product should fit the workflow, not ask the buyer to change it.”

The Brand-Styled PDF Generator

A buyer can download the complete 197-product Approved Composition List as a PDF, generated client-side via jsPDF and jspdf-autotable. The document opens with a Midnight cover page carrying the Rikencare logo and the three-pillar statement. Category sections use Clinical Blue header bands. Rows alternate between Bone and white. Strength values render in Spline Sans Mono. A procurement manager can open it, review it against their formulary, and share it internally — without a server call, a login, or an expiring download link.

Engineering note

Generating a brand-consistent PDF in the browser required embedding Sifonn Pro as a base64 data URI, canvas operations for precise logo cropping (pixel analysis to identify the transparent mark's bounding box), and per-category band logic that resets cleanly on each auto-paginated page.

Compliance, Trust, and Honest Metrics

The Quality section surfaces WHO-GMP and ISO 9001:2015 certification, Drug Manufacturing Licences on Forms 25 and 28, pharmacopoeial adherence (IP/USP/BP), and a response-time commitment. One judgment call is worth naming: the Brand Bible included “ESTD. 1988” — a founding-year reference that framed Rikencare within a longer institutional history. The manufacturing licences (Forms 25 and 28) were issued in 2022. The client confirmed 2022 as the correct, canonical year. I updated every instance accordingly.

A compliance brand that states an unverifiable founding date on its own website has already started the audit badly. The site makes no metric claims it cannot substantiate — no “500+ satisfied clients,” no “99.8% batch pass rate.” The credibility argument rests on documentation, not assertion.

Responsive, Accessible, Lightweight

The site is framework-free — one self-contained index.html and an assets/directory. No build step, no bundler, no Node runtime. The brand's verified contrast ratios (AAA on primary pairings) are met everywhere. Modals are keyboard-dismissible and full-screen on mobile. The mobile pass uses compact navigation, full-width CTAs, a single-column product grid, and a stacked trust strip. The theme-color meta tag is set to Midnight.

Performance is a consequence of the architecture. There is no JavaScript framework to parse, no component tree to hydrate. jsPDF loads deferred via CDN, after the page is interactive. The product catalogue renders entirely from a static JSON file.

Prototype Scope and What I'd Do Next

The current build is a complete, deployable front-end with a working enquiry flow. What it doesn't have: CRM integration to receive and manage enquiries, a product database with an admin interface for adding SKUs, and a backend that would enable authenticated buyer accounts or order tracking.

These are not omissions from the brief — they were a deliberate first scope. The site needed to go live, establish credibility, and start receiving enquiries. A version that waited for a custom CRM would not have shipped. The next phase is clear: a structured enquiry inbox, catalogue management via an admin interface, and — if enquiry volume justifies it — an authenticated buyer portal with saved carts and quote history.


Credits & Caveats

Roles, Provenance, and Honest Scope

Roles. Brand identity (logo, monogram, wordmark, brand guidelines, colour system, typography, motion specification, graphic language, and brand voice) and website design and engineering: Ashish Narayan. The work was produced with the assistance of AI tooling throughout — direction, decisions, and final approval are my own.

Client & status. Rikencare Lifesciences is a real client engagement. The live prototype is accessible at rikencare-demo.ashish.sbs. The demo domain is used for portfolio display; the client's production domain is managed independently.

Trademarks & IP.“Rikencare Lifesciences,” its logo, wordmark, and all associated brand assets are the property of Rikencare Lifesciences. Shown here for portfolio and case-study purposes.

Real vs. illustrative content.The 197-product catalogue is derived from the client's government-issued Approved Composition List and is shown with permission. Leadership names, testimonials, marquee client names, and contact phone number shown on the live demo are placeholders.

Prototype scope. Front-end only. Enquiries route via a third-party form service. There is no backend, no database, and no CRM integration. The map is a Google Maps embed.

No fabricated results. No conversion rates, revenue figures, or business results are claimed. No independently verified performance data is available at the time of publishing.

AI tooling disclosure. Portions of the brand copy and product descriptions were drafted with the assistance of AI language model tooling, then reviewed, edited, and approved before implementation.

Sector note. This site is designed for authorised pharmaceutical buyers operating within a B2B procurement context. Nothing on the page constitutes medical advice or a marketing claim about the safety or efficacy of any product.