Systems Design · Brand Architecture

Design
Systems.

A design system is the decision you make once so you never have to make it again under deadline pressure. Here are three systems I've built — one for a commercial client, one for a co-founded institution, and one for myself.

3
Token → Component → Governance
Jus Amazin · Svarnart · Sivnco
Bengaluru, IN
3
Design Systems Built
15+
SKU Variations Governed
100%
Token-to-Component Coverage
3
Brand Identities Systematised
What a Design System Is

In my
practice.

“A design system is the decision you make once so you never have to make it again under deadline pressure. It's not a collection of components — it's a set of principles made executable.”

— H P Shivaraj, Design & Communications Manager · Jus Amazin

Most designers maintain visual consistency through taste and habit. A design system makes consistency mechanical — so that anyone who picks it up maintains quality, even under deadline pressure, even across 15 SKU variations, even when you're not in the room.

01
Brand System — Commercial Client

Jus Amazin

Complete Brand System

A design system is the decision you make once so you never have to make it again under deadline pressure. For Jus Amazin — a D2C peanut butter brand scaling from 3 to 15+ SKUs — I built the full system from scratch: token layer, component layer, and governance rules.

Token Layer
  • Colour system: 6 primary + 12 semantic tokens mapped to retail and digital surfaces
  • Typography scale: 3-level hierarchy (display, body, label) with defined size ramps
  • Spacing grid: 8px base unit across all layout decisions
Component Layer
  • Label template system: 15+ SKU variants from one master source
  • Social post templates: feed, story, and ad formats from a single component set
  • Email header system: 4 modular blocks that recompose across campaigns
  • POS display: shelf talker and standee components using shared tokens
Governance
  • Visual consistency maintained across 15+ SKU variations without breaking the system
  • Handoff-ready: marketing team could apply system without design oversight
  • 176% revenue contribution attributable in part to consistent shelf-to-screen identity
02
Brand System — Co-Founded Institution

Svarnart Academy

Visual Identity System

Svarnart Academy needed an identity that could live across a PWA, printed admission forms, performance certificates, and social media — all designed and systematised by me as co-founder. The system had to honour both classical Indian roots and contemporary visual sensibility.

Brand Mark Construction
  • Custom wordmark built on a modular grid
  • Icon system derived from the letterform geometry
  • Clear space and minimum size rules documented for print and digital
Colour & Type System
  • Primary palette: warm deep tones evoking classical arts heritage
  • Typography: two-typeface system — display for identity, body for readability
  • Each colour and type decision rationale documented for future designers
Application System
  • Web: applied across the academy PWA (built in-house)
  • Print: admission forms, certificates, and event programmes
  • Social: recurring content templates derived from brand tokens
03
Brand System — Self Identity

Sivnco Studio

Self-Brand System

The site you are on right now is a design system. Sivnco Studio's identity — the Doto logotype, the warm-dark colour palette, the Poppins + Space Mono type pairing, the accent orange — is a system I designed and maintain. Every page on sivnco.in is a component that draws from shared tokens.

Identity Tokens
  • Colour: --accent (#D4600A), --bg (#0A0906), --ink (#F0EDE6) — consistent across every page
  • Type: Doto (display), Poppins (body), Space Mono (mono labels) — a three-role type system
  • Motion: scroll reveal timings, hover transition durations — all defined and reused
Component System
  • Shared nav and footer components
  • Glass card system with hover glow state
  • Metric counter, timeline, and bento grid — reusable across case study pages
  • Custom cursor — consistent interaction signature across the entire site
The Meta-Point
  • This portfolio is itself proof of design systems thinking
  • The system scales: each new case study page is a new component, not a new design
  • Maintainable by one person — which is exactly what a good system enables
04 — How I Build Systems

The process,
every time.

Step 1

Audit & Inventory

Map every visual decision already made: colours, type, spacing, components in use. Understand what is consistent and what is arbitrary.

Step 2

Token Definition

Extract design decisions from specific values into named tokens. A colour is not #D4600A — it is accent. A spacing is not 8px — it is base-unit.

Step 3

Component Architecture

Build reusable components from tokens. Define their variants, states, and behaviours. Document what each component is for, and what it is not for.

Step 4

Governance & Handoff

Write the rules for how the system grows. What gets added, what gets deprecated, who makes decisions. A system without governance is just a style guide that decays.

SIVNCO.
START A PROJECT
ASK SHIV'S AI