CA Ashama — Visual Redesign Directions

Evaluation document accompanying the 15 HTML mockups. Open index.html to browse them.

Why the current site reads as “AI-generated, no taste”

It isn’t the palette — the warm cream + bronze + forest-green is actually a decent foundation. The problem is execution, and there are four concrete tells:

Font incoherence. app/layout.js loads DM Sans + Sora as CSS variables, but app/globals.css overrides everything back to Poppins + Inter. The site ships commodity fonts and the two fonts it loaded go unused. No typographic point of view at all.
The gradient reflex. Every heading is a bg-clip-text gradient; every CTA card is from-primary/5 to-accent/10; every hero has blurred color blobs. This “depth-by-default” applied uniformly is the single biggest signature of generated UI.
47 stock shadcn/ui components, zero customization. Default “New York” radius, default shadows, default variants everywhere — nothing expresses a brand.
No spatial point of view. Every section is a centered container with a symmetric 3-up grid. Nothing breaks the grid, nothing is composed.

The encouraging part: because of the registry + base-layout architecture, roughly 10–12 files control ~95% of the visual surface. A proper re-theme is high-leverage — not a 200-page rewrite.

The five directions

Each mockup uses identical content so you’re comparing pure design. Three pages per direction: Home, a Blog post (the “Which Car By Income” guide, with an in-body calculator), and a Calculator (Income Tax, old vs new regime).

AThe Financial Broadsheet — editorial / print-journal

Reads like a respected financial publication (FT / Mint / Monocle), not a SaaS page. Authority through editorial restraint.

Type: Fraunces (high-contrast display serif) + Hanken Grotesk (UI/body).
Palette: warm newsprint paper, near-black ink, a single oxblood accent as hairline rules.
Signature: hairline dividers, small-caps kickers, drop caps, multi-column text, typeset ledger tables. No gradients, no shadows.
Best for: maximum credibility / gravitas.

BQuiet Luxury — private-wealth minimal

The calm of a boutique private-wealth advisor. Expensive-feeling restraint and air.

Type: Cormorant Garamond (elegant serif) + Jost (geometric humanist sans).
Palette: bone/ivory, charcoal, a single metallic-gold accent line, soft sage. Near-monochrome.
Signature: vast whitespace, borderless cards with hairline separators, tracked-out micro-labels, slow fades, serif numerals.
Best for: premium, discreet, high-net-worth positioning.

CFintech Terminal — precise, data-forward

Built around the fact that 62 calculators are the core asset. The energy of Mercury / Ramp / Linear, but warmer and light-first.

Type: IBM Plex Sans + IBM Plex Mono (every ₹ figure in monospace — instant “precise/financial” signal).
Palette: warm graph-paper white, ink, amber/bronze data accent, signal-green gains / muted-red losses.
Signature: faint graph-paper grid, crisp 1px borders, tabular figures, inline sparklines/donuts, side-by-side comparison bars, status chips.
Best for: making the tools the hero; differentiates hard from every other CA site.

DIndian Heritage-Modern — warm, rooted, contemporary

Emotionally resonant for the NRI diaspora — the warmth of home, executed tastefully (never kitsch).

Type: Marcellus (classical display) + Mukta (clean Devanagari-Latin sans), with a restrained Devanagari accent.
Palette: terracotta/sienna, marigold accent, deep indigo as the trust color, warm paper.
Signature: subtle jali / lattice patterns as dividers and faint backgrounds, warm confident cards, story-led layout.
Best for: emotional connection with the NRI / global-Indian audience.

EConfident Contemporary — soft neo-brutalist

Young creator-economy energy for the freelancer / content-creator segment. Bold and structured, but disciplined.

Type: Bricolage Grotesque (characterful display) + Schibsted Grotesk (clean body).
Palette: cream base, ink as a structural color, vivid teal + punchy coral as flat blocks (no gradients).
Signature: oversized headlines, 2px ink borders with hard flat offset shadows, full-bleed color-blocked sections, chunky buttons, color-block pull quotes.
Best for: standing out, energy, the younger creator/freelancer audience.

My recommendation

For a credibility-driven site whose core asset is calculators, my ranking is:

C · Fintech Terminal — most differentiated, makes your 62 calculators the hero, and “precise with money” is exactly the trust signal a CA wants.
A · Financial Broadsheet — the most tasteful and authoritative; ages well; excellent for long-form content.
A hybrid C + A — Broadsheet typography for content pages (blog, hacks), Terminal precision for calculators and the homepage. Likely the strongest real-world outcome.

D and E are the bolder bets — worth a look if you want emotional warmth (D) or a younger, more energetic skew (E).

How we re-skin the whole site properly (Stage 2)

A real re-theme centralizes the design language so ~10–12 files cascade across all 200+ pages:

Tokens — rebuild CSS variables in app/globals.css + tailwind.config.js. One source of truth for color, radius, shadow.
Fonts — fix the incoherence: wire chosen fonts via next/font in app/layout.js, align the type scale. Removes the biggest “generic” tell.
shadcn primitives — customize button, card, badge, input variants.
Base layouts — navigation.jsx, the extracted footer, BaseBlogLayout, BaseCalculator, HackDetailClient, RelatedItemsGrid + the shared CTA. These reskin every content page.
Listing / hero pages — homepage + calculators / blog / hacks heroes.
Kill the gradient/blob reflex — replace gradient headings, from-primary/5 cards, and blobs with the chosen depth strategy.
Blog prose theme + one restrained motion system.

All logic (calculators, registries, analytics) stays untouched — this is a visual reskin.

How to review

Open index.html. Pick a direction + page, then use the Desktop / Tablet / Mobile toggle. “Open ↗” pops the raw page in a new tab. Compare the same page across directions (e.g. everyone’s Calculator) to judge fairly. Then tell me your pick — one direction or a hybrid — and I’ll implement Stage 2 on the live site.

→ Open the comparison viewer