GoalTeller design system, Veer Singh

RoleProduct Design Intern

Duration3 months, 2026

ProductSaaS web app, desktop

ToolsFigma, Google Fonts

01 · Context

Money screens need to read the same everywhere.

GoalTeller's web app is where investors check their net worth, holdings, returns and SIPs. When ₹5,42,000 shows as "5.42L" on one screen and "542000" on another, people stop trusting the numbers. The system had to cover the screens where those numbers live.

02 · Starting point

No design language yet. Every decision was open.

When I joined, there was no system to inherit. Before designing screens, I listed the questions every screen would raise, so each one got answered once instead of per page.

QUESTION {{ d.before }}

→

ANSWER {{ d.after }}#047857 with +, #DC2626 with −

03 · Approach

Decide once, then reuse everywhere.

04 · Foundations

Tokens before components.

Every component draws from four sets of values. Click a colour to copy it; each one shows its contrast against white, which is how I caught the problem with the brand blue and the semantic colours below.

Aa Poppins, from Google Fonts, in 400, 600 and 700. Sizes step from 32 down to 11, with line heights on a 4px rhythm.

A 4px base grid. Token names match the CSS variables engineers use.

Accessibility fix I split the brand blue into two tokens. White text on the original #00A8FF measured 2.6:1, below the 4.5:1 that WCAG AA asks for. Primary Blue moved to #0077B6 for buttons, links and active states. The bright #00A8FF stays as Sky Blue for charts, highlights and focus rings, where it carries no text. I applied the same check to the semantic colours: green, amber and red moved to #047857, #B45309 and #DC2626 so returns and alerts stay readable.

Update Data Before · #00A8FF · 2.6:1, fails AA

Update Data After · #0077B6 · 4.9:1, passes AA

05 · Number rules

In a finance product, numbers are components too.

I wrote formatting rules for currency, returns, rates and table figures, using the Indian numbering system. Try a value.

Amount in rupees ₹

Return, in percent %

06 · Components

12 component groups, each with a job.

Every group documents its states and when to use it. These specimens are live, so hover and click them.

ButtonsThree levels of emphasis

HIGH · PRIMARY

PREMIUM · GRADIENT

MEDIUM · SECONDARY

Tab togglesSegmented control

Grey container, the active item in white with a soft shadow. Used to switch views of the same data.

Filter pillsActive and inactive

Active: Primary Blue fill, white text and a shadow. Inactive: white with a border. Used to narrow a list.

Badges & tagsStatus and category

DEMAT SEEDER ACTIVE INVESTED PENDING

Mutual Funds Bonds Bank Savings

One rule for every badge: a light shade background (100–200) with a dark shade text (700–900) of the same colour.

Search input44px height

Search your asset 16px padding after the icon. Focus shows the primary border and a soft ring; hover it to see.

Alert bannerAction required

! Action requiredAs per SEBI's latest rules, you need to provide your complete details to continue investing.

Warning amber, reserved for regulatory and account issues that block the user.

07 · Patterns

The holdings table, specified line by line.

The table is the densest screen in the product. Hover a row to see its menu, or pick a rule to highlight where it applies.

ASSET NAMEINVESTEDMKT. VALUERETURNS

{{ h.name }}{{ h.badge }} {{ h.inv }} {{ h.mkt }} {{ h.ret }} ⋯

Rule: {{ ruleText }}

08 · Layout

One page frame for every screen.

Sidebar256px Header64px · sticky Main contentmax 1280px · 32px padding

09 · Reflection

One design language for a wealth dashboard