Chitra

Chitra Design System

The Official Brand Design System of subhankarrout.in

v2.0 · चित्र — Chitra — Picture · Image · Visual Expression · Released June 2026 · Last updated 2nd July 2026

A unified design framework that brings together design, storytelling, creativity, and technology through a shared visual language. Every token, component, and pattern — the single source of truth for all of Subhankar Rout's creative work.

Idea Expression Experience Impact
Introduction — Chitra Design System
What is Chitra, why it was built, and the vision behind the name.
Chitra Design System — Figma file cover

Chitra Design System v2.0

Official Brand Design System of "subhankarrout.in"

Open in Figma Chitra Design System
The Name — Chitra (चित्र)
चित्र
Chitra
Sanskrit · noun

In Sanskrit, Chitra means "image", "picture", or "a wonderful work" — one of the oldest words in the Indian vocabulary for visual creation. It encompasses everything drawn, painted, imagined, or seen.

चित्र
Still image
→
चलचित्र
Moving image · Cinema
→
Digital Design
Interactive · Today

Chitra is history — from the cave painting to the canvas, from the canvas to the film reel, and from film to the pixel. The word didn't change; the medium evolved. Subhankar lives at that same frontier: a Product Designer who makes still frames feel alive, an Author who puts images into words, and a Filmmaker who turns images into motion.

This design system carries that same spirit — not just a style guide, but the visual language that carries every idea from thought to experience. Every token, component, and pattern is guided by one journey:

Idea → Expression → Experience → Impact
Chitra Identity Mark

The visual mark of the Chitra Design System — used only on this page, not on any other page of subhankarrout.in.

Chitra — Full Mark
Icon, name, and vision — the complete mark.
Chitra Icon Mark
Icon Mark
The image before the word.
Chitra Wordmark
Wordmark
चित्र — the name is the mark.
Brand Identity — subhankarrout.in
The site logos, usage rules, and where each variant lives across all 11 pages.
Site Logo Variants

Two variants used across all 11 pages — header, footer, and offcanvas menu. Class: .tp-logo.

Logo — Blue
Primary — Blue
White or light bg · scrolled header state. File: logo-blue.png · Class: .tp-logo · height 36–40px
Logo — White
Reversed — White
Dark bg · transparent header, footer, offcanvas. File: logo-white.png · Class: .tp-logo
Logo on dark gradient
On Dark Gradient
Hero sections (index, books, S4 Cinesphere). Always logo-white.png here.
Favicon
Favicon / Tiny Mark
Browser tab · <link rel="shortcut icon"> · File: favicon.png 32×32px
Clear Space & Sizing Rules
Logo
Clear space = logo height on all sides
Minimum height desktop: 36px
Minimum height mobile: 28px
Always maintain aspect ratio — never stretch
Do not place on mid-grey backgrounds — use light or dark only
Do not use blue logo on dark bg (low contrast)
Do not apply filters, shadows, or colour tints
Logo in Context — Where it Lives
Desktop Header — Scrolled (white bg)
Logo nav items Portfolio
logo-blue.png · height 36–40px · .tp-logo
Footer (dark bg)
Logo White social icons
logo-white.png · height 36–40px · .black-bg footer
Transparent Header (on page load)
Logo White nav items Portfolio
logo-white.png · transparent header · swaps to blue on scroll
Mobile Offcanvas Panel
Logo White offcanvas
logo-white.png · .tpoffcanvas top-left · always white on dark panel
Design Tokens
The single source of truth. All values live in :root in styles.css.
Border Radius
--radius-sm
10px · Buttons
--radius-md
16px · Cards
--radius-lg
24px · Large cards
--radius-xl
32px · Portrait frame
100px
Pills · Kickers · Tags
Elevation / Shadows
--shadow-card
Default resting state
--shadow-hover
On hover / active
Transitions
--transition 0.35s cubic-bezier(0.16, 1, 0.3, 1) — Default. Smooth spring feel. Used on cards, hover states.
--transition-fast 0.2s ease-out — Quick micro-interactions. Links, icon hovers.
--transition-btn 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86) — Snappy button fill animation (tp-btn split fill).
Mobile menu 0.25s — .tpoffcanvas slide-in. Intentionally fast to avoid UX lag.
Spacing Scale

13-step scale on 4px grid · Float Variables · Bound to padding, gap, itemSpacing

--space-1 4px Micro — icon gaps, badge padding, inline offsets
--space-2 8px Tight — nav item gaps, small button padding, tag rows
--space-3 12px Snug — pill vertical padding, icon row gaps
--space-4 16px Base — standard padding, form fields, list items
--space-5 20px Relaxed — card body gap, tag padding
--space-6 24px Comfortable — card padding, sidebar nav groups
--space-7 28px Button-pad — .tp-btn left/right padding
--space-8 32px Component — between components within a section
--space-9 36px Medium — filter tab rows, medium gaps
--space-10 40px Card-pad — card padding, nav item height
--space-11 48px Section — top/bottom padding on page sections
--space-12 80px Large — gap between major page sections
--space-13 120px Hero — hero sections, footer top padding
Color System
Brand colors, semantic aliases, and surface tokens.
Brand / Primary
Violet --tp-theme-1 / --accent-violet #5956E9
Violet Dark --tp-theme-2 #423EF3 · Button hover fill
Yellow --tp-theme-primary / --accent-yellow #FFDC60 · CTAs, underline, tp-btn hover
Yellow Light (hardcoded) #ffe980 · hm-btn-yellow hover
Cinematic Red (hardcoded) #FF3366 · s4cinesphere page only
Green (hardcoded) #22c55e · Online / status dots only
Text & Neutral
Primary --tp-common-black / --text-primary #0D0D12
Secondary --text-secondary / --tp-text-body #6B7280
Tertiary --text-tertiary #9CA3AF · Timestamps, meta
White --tp-common-white #FFFFFF
Surface & Border
White --tp-common-white #FFFFFF · Cards, sidebar, modal bg
Light 1 --surface-1 #FAFAFA
Light 2 --surface-2 #F4F4F6 · Table headers, muted bg
Grey BG --tp-grey-1 / --ds-bg #F7F8FD · Page background
Dark --surface-dark #0D0D12 · Dark hero, footer, marquee bg
Border --tp-border-1 / --ds-border #E8ECF2 · Dividers, card outlines
Gradients
Name Type Color Stops Usage
Gradient/Hero Dark LINEAR #181530 → #0D0D12 index.html · books.html hero bg
Gradient/Hero Cinematic LINEAR #1a0508 → #0f0305 → #000012 s4cinesphere.html hero bg
Gradient/Cinematic Red Glow RADIAL rgba(230,57,70,.28) → transparent s4cinesphere.html radial overlay
Gradient/PR Dot Grid RADIAL rgba(89,86,233,.05) → transparent pr.html hero bg subtle violet overlay
Gradient/Stats Number LINEAR #5956E9 → #FFDC60 → #22c55e pr.html stat numbers · background-clip:text
Gradient/Avatar Violet LINEAR #5956E9 → #423EF3 Testimonial + review card avatars
Gradient/Ambient Violet RADIAL rgba(89,86,233,.35) → transparent index.html hero blobs · testimonials glow
Gradient/Ambient Yellow RADIAL rgba(255,220,96,.18) → transparent index.html hero bottom-left blob
Gradient/Kicker Shimmer LINEAR transparent → rgba(255,255,255,.4) → transparent .pr-hero__kicker::after pseudo-element
Gradient/Marquee Edge Fade LINEAR transparent → black 8% → black 92% → transparent All 3 marquee wrappers · CSS mask-image
Typography
Single typeface: DM Sans (Google Fonts). Weights 300–700, optical size 9–40.
Hero Headline
clamp(36px, 4vw, 72px)
weight 700 · lh 1.06
ls -0.025em
Hi, I'm Subhankar
Section Title
clamp(32px, 3.5vw, 52px)
weight 700 · lh 1.1
ls -0.02em
Work that moved things
Body / Sub-heading
17px · weight 400
lh 1.75 · max-w 480–540px
Designing products people use. Writing stories people feel. Filming moments people remember.
Kicker / Eyebrow
12px · weight 500–600
ls 0.08–0.12em · uppercase
Designer · Filmmaker · Author
Card Body
14–15px · weight 400–500
lh 1.6–1.7
A debut novel merging emotional depth with vivid storytelling. Featured across international media.
Meta / Label
11–12px · weight 500–600
color text-tertiary
Effective for www.subhankarrout.in · Last reviewed June 2026
Italic rule: Italic <em> inside headlines always takes color: var(--accent-violet). Exception on dark sections: color: var(--accent-yellow). Never italic for body copy — only headlines.
Button System
11 button variants across the site. Each has a defined context — never swap them freely.
Portfolio
Nav CTA Button
.tp-btn
Blue fill (#5956E9), height 70px. Hover: yellow fill (#FFDC60) via dual split-wipe animation from top-left + bottom-right. Text turns black on hover.
Used on Desktop header nav (Portfolio CTA) · Mobile offcanvas nav
Browse All Books Meet the Author
Book Hero Ghost Button
.book-ghost-btn
Transparent, white-tinted border on dark book-hero backgrounds. Always paired next to .tp-btn as the secondary action — its height breakpoints (70px desktop → 60px @ 991px → 56px @ 767px) are kept in lockstep with .tp-btn's so the pair never mismatches on mobile. (Preview forced to mobile height above to show the fix.)
Used on books.html & articles.html hero · one_year_many_lessons.html, the_uncharted_romance.html & the_good_bye_i_never_thought_to_say.html final CTA bar
My Portfolio
Yellow Primary CTA
.hm-btn-yellow
Yellow fill (#FFDC60), black text. Hover: lighter yellow (#ffe980) + lifts 2px. Weight 700. The highest-emphasis CTA — reserved for the most important action on a dark-background section.
Used on index.html hero "My Portfolio" · Book spotlight "Get Your Copy" · Books page hero CTA
Full Story
Violet Primary
.hm-btn-primary
Violet fill (#5956E9). Hover: darker violet (#423EF3) slides in from left via scaleX. Used on light-background sections when the primary action is navigation deeper into the site.
Used on index.html About section "Full Story"
My Books
Dark Ghost
.hm-btn-ghost
Transparent, white-tinted border (rgba 22%). White-ish text. Only used on dark backgrounds. Secondary action paired alongside hm-btn-yellow.
Used on index.html hero "My Books" (dark hero bg)
Press Release
Violet Outline
.hm-btn-outline
Violet border + violet text. Hover: fills solid violet, text turns white. Light-bg secondary action. Lower visual weight than hm-btn-primary.
Used on index.html About section "Press Release" (secondary to "Full Story")
View Work Contact
Page Hero Pair
.btn-primary-hero + .btn-ghost-hero
Black fill → violet slide-fill on hover. Ghost: light border → violet on hover. This pair is exclusive to white/light hero sections (not the dark home hero).
Used on portfolio.html hero · pr.html hero · about.html hero
Post Review
Book Review Submit
.hm-btn-yellow + .bk-form override
Uses hm-btn-yellow as base but the books page overrides hover to go violet (#5956E9) + white text — the reverse of the normal yellow button. Full-width inside form context.
Used on the_uncharted_romance.html · one_year_many_lessons.html — review form submit only
Watch Now Subscribe
Cinematic Red Pair
.dx-btn-primary + .dx-btn-ghost
Red fill (#FF3366) with strong lift + glow on hover. Ghost: white-border transparent. Exclusive to the S4 Cinesphere page — red is a brand signal for cinema/film.
Used on s4cinesphere.html only
Which button, when?
Situation Use this Reason
Primary CTA on dark hero (index, books).hm-btn-yellowYellow pops on dark — highest contrast
Secondary action alongside yellow on dark bg.hm-btn-ghostLow-key, doesn't compete with yellow
Primary action on light section (about, portfolio).hm-btn-primary or .btn-primary-heroViolet is readable on white
Secondary action on light section.hm-btn-outline or .btn-ghost-heroOutlined = less weight than filled
Desktop / mobile nav CTA.tp-btnTaller 70px height designed for nav bar
Secondary action beside .tp-btn on a book hero.book-ghost-btnLow-key outline, height synced to .tp-btn at every breakpoint
Form submit inside book page.hm-btn-yellow + bk-form overrideYellow start draws eye; blue hover confirms action
Any CTA on S4 Cinesphere page.dx-btn-primary / .dx-btn-ghostRed is the cinematic brand signal on that page
Labels & Kickers
Small contextual text elements that set up sections and headlines.
Product Designer
Kicker Pill — Violet
.pr-hero__kicker / .hm-hero__kicker — 12px uppercase, violet bg + border, pulsing dot. Hero kicker on light pages.
Amazon Bestseller
Kicker Pill — Yellow
.pr-hero__kicker--yellow — Same shape, amber text, yellow tint bg. Used for achievement / book context badges.
Case Studies
Section Label
.pr-section-label — 12px uppercase violet text with a 20px violet rule on the left. Appears above every section title on pr.html and portfolio.html.
Here He Is
HM Eyebrow Label
.hm-label — Violet text, yellow left-rule (not violet). Unique to index.html section openers. Slightly warmer feel than .pr-section-label.
UI Components
Reusable patterns across pages.
Product Designer   Available for work
Floating Tag Pills
.pr-hero__tag — White card, pill shape, colored dot, shadow. Float on portrait image in pr.html hero. 3 variants: violet, green, Figma-icon. Each animates independently (floatA / floatB / floatC).
Filter Tabs
.pr-filter-tab — Pill-shaped isotope filter. Active state: solid violet fill, white text. Used in portfolio.html to filter project cards by category.
LinkedIn Behance Instagram YouTube
Quick-Links Bar
.pr-hero__links — 4-column grid below the pr.html hero. White bg, shared border, each link has brand icon color. Hover: violet text + very faint violet bg tint. On mobile: collapses to 2×2 grid.
Figma Filmmaking
Skill Chips (Marquee)
.hm-skill-chip — Pill border, icon + label. Used in the skills marquee strip (currently commented out). Two rows — row 1 scrolls left, row 2 scrolls right.
Book cover
Book Cover — Single Tilt
.bk-hero__single-cover — 320px wide, border-radius 12px, default rotate(-3deg). Hover: straightens + lifts 8px. Only on books.html hero.
English Hindi
Language / Edition Switcher
.lang-switch — Reusable pill-group component. Selecting a pill swaps cover image, title, subtitle, price, delivery note, and CTA label/href anywhere in the nearest [data-lang-scope] ancestor via data-lang-field="..." attributes. One shared script (assets/js/lang-switch.js) drives every instance on the page — no per-page JS to write. Add .lang-switch--compact for dense card grids. Fixes a past bug where swapping editions permanently killed the cover's hover-lift animation (was set as an inline style; now toggled as a CSS class instead).
Newsletter Input
.tp-footer-widget__input — Dark bg, white-tinted border, plane icon submit. Posts to Google Forms. Used in footer "Get Update" column on all pages.
Animations
Keyframe animations, entrance staggering, and ambient motion.
Yellow Name Underline
Subhankar Rout
.hm-name::after — Grows from 0→100% via hm-lineGrow (1.2s, 1s delay). Height 3px, yellow, border-radius 2px. Lives in styles.css.
↑
heroFadeUp
Opacity 0→1 + translateY(30px→0). 5 stagger variants (.1 to .78s delay)
0.8s ease · .hero-anim-1–5
→
heroFadeRight
Opacity 0→1 + translateX(40px→0). Right column (image side)
0.9s · .hero-anim-right
blobFloat / hm-blobDrift
Translate + scale drift. Hero ambient background gradient blobs
12–20s infinite · 3 blobs
◉
kickerPulse
Opacity + scale 0.8 on the dot inside kicker pills
2s ease-in-out infinite
⟳
marqueeScroll
Infinite horizontal ticker. translateX(0→-50%). Pauses on hover
24s linear infinite
↕
floatA / B / C
Tag pills on portrait image. Each has unique Y offset + timing offset
5–7s ease-in-out infinite
✦
ph-shimmer
Glossy shimmer sweep across kicker pills. White light gradient slides through
3.5s · 1.8s delay · infinite
⏳
Slow-Load Message
If page loads >3s, #preloader-slow-msg fades in with emotional copy. Cleared on window.load
setTimeout 3000ms · opacity 0.6s
Scroll-Down Reveal Animations — 3 Systems
System 1 — WOW.js (animate.css classes) assets/css/animate.css + wow.js
WOW.js watches the viewport. When an element with .wow enters view, it adds .animated so the CSS animation fires. data-wow-delay staggers multiple elements. Used on most section blocks across all 11 pages.
Before scroll (off-screen)
opacity:0; transform:translateY(30px)
After scroll (enters view)
.animated.fadeInUp — opacity:1; transform:none
Stagger pattern (data-wow-delay)
0ms
200ms
400ms
600ms
800ms
Each card fires 200ms later than the previous.
Effect: a smooth cascade from left to right.
<div class="wow fadeInUp" data-wow-delay="0.2s" data-wow-duration="0.8s"> ... </div>
Common classes used: fadeInUp · fadeInLeft · fadeInRight · zoomIn. All from assets/css/animate.css.
System 2 — Custom IntersectionObserver (.hm-reveal) styles.css §16 + script.js
Used on index.html "About" and "Book Spotlight" sections. Elements start off-screen (left or right) and slide in when they enter the viewport. script.js adds .is-visible via IntersectionObserver.
.hm-reveal.from-left
→ slides in from left
translateX(-60px)→0 · opacity 0→1 · 0.7s ease
.hm-reveal.from-right
← slides in from right
translateX(60px)→0 · opacity 0→1 · 0.7s ease · delay 0.2s
<div class="hm-reveal from-left"> text content </div>  /* starts invisible */
<div class="hm-reveal from-right"> image </div>
/* script.js adds .is-visible when scrolled into view → animation plays */
System 3 — [data-pr-reveal] (PR page) styles.css §23 + script.js
Used only on pr.html. A simpler IntersectionObserver pattern: adds .pr-visible to elements with [data-pr-reveal] attribute.
[data-pr-reveal] — initial state
.pr-visible added → plays in
<div data-pr-reveal>...</div>
/* CSS: opacity:0; transform:translateY(28px); transition:.55s */
/* .pr-visible: opacity:1; transform:none */
Which scroll system to use where
System Pages Animation CSS Source
.wow.fadeInUp All 11 pages Fade up from Y+30px animate.css
.hm-reveal.from-left/right index.html only Slide in from side styles.css §16
[data-pr-reveal] pr.html only Fade up from Y+28px styles.css §23
Breakpoints
Responsive system. Mobile-friendly via Bootstrap grid + custom media queries.
🖥️
Desktop
> 1080px
2-col hero grids · Sticky header shown · Quick-links 4-col · Footer 4-col · Yellow underline max-width 90%
📱
Tablet
768px – 1080px
Same 90% underline · Buy-bar stays 2×2 · Some sections stack · Custom max-width breakpoint (not 1024 — intentional)
📲
Mobile
< 768px
Single col · Yellow underline 100% · Mobile menu (offcanvas) · Buttons full-width in forms · tp-btn height 56px
♿
Reduced Motion
prefers-reduced-motion
All keyframe animations disabled. Transitions set to 0.01ms. Section in styles.css §20.
Bootstrap Grid in use
Bootstrap 5 via bootstrap.bundle.min.js. Key grid classes used: col-xl-3 col-lg-4 col-md-6 pattern for footer · container-fluid for header · container for content sections. Custom grid overrides live in styles.css for hero sections (CSS Grid, not Bootstrap).
Accessibility
Lighthouse accessibility 82–92%. These patterns are applied across all pages.

Skip Link

<a class="skip-link" href="#hm-main"> — Visually hidden until focused. Appears at top-left with violet bg on Tab key. On all pages.

Focus Styles

All interactive elements (a, button, input, [tabindex]) get outline: 2px solid var(--accent-violet); outline-offset: 3px on :focus-visible. Defined globally in styles.css §03.

ARIA Labels

All nav elements have aria-label. Images have descriptive alt. Decorative elements use aria-hidden="true". Offcanvas: role="dialog" aria-modal="true". Hamburger: aria-expanded toggled by JS.

Image Loading

Hero LCP image: loading="eager" fetchpriority="high" + <link rel="preload">. All below-fold images: loading="lazy". Width + height attributes on logo images to prevent CLS.

Performance (Lighthouse)

Non-critical CSS deferred via media="print" onload="this.media='all'" + noscript fallback. All JS (except jQuery + Bootstrap) uses defer in dependency order: plugins first, then main.js, then script.js. Clarity + Chatbase at bottom. DNS prefetch for third-party domains.

Page Reference
What's on each page, its hero background, and which button variants it uses.
Page File Hero Theme Primary CTA Secondary CTA
Home index.html Dark gradient .hm-btn-yellow .hm-btn-ghost
Portfolio portfolio.html Light white .btn-primary-hero .btn-ghost-hero
About about.html Light white .ab-btn-primary .ab-btn-ghost
Books books.html Dark gradient .tp-btn (Browse All Books) .book-ghost-btn (Meet the Author)
Articles New · unlinked articles.html Dark gradient .tp-btn (Read on Medium) .book-ghost-btn (Browse Articles)
The Uncharted Romance the_uncharted_romance.html Dark book hero .tp-btn (Buy) .hm-btn-yellow (Review form)
One Year, Many Lessons one_year_many_lessons.html Dark book hero .tp-btn (Buy) .hm-btn-yellow (Review form)
The Goodbye I Never Thought to Say New · pre-release the_good_bye_i_never_thought_to_say.html Dark book hero .tp-btn / .tp-btn-yellow (Notify Me at Launch) .book-ghost-btn (Explore His Other Books)
Press Release pr.html Light / grid bg .btn-primary-hero .btn-ghost-hero
S4 Cinesphere s4cinesphere.html Dark cinematic .dx-btn-primary (red) .dx-btn-ghost
Privacy Policy privacy-policy.html Dark hero strip — —
Shared across ALL pages
Header: .tp-header-area-two + mobile .tp-md-header-area + .tpoffcanvas offcanvas
Footer: .black-bg.pt-130.pb-30 · 4 columns · Google Forms newsletter
Analytics: Microsoft Clarity (r08p4eibkc) · Chatbase chatbot
Fonts: DM Sans via Google Fonts · Font Awesome Pro icons
Custom cursor: .cursor-dot (8px violet) + .cursor-ring (36px → 56px on hover). Hidden on touch.
Preloader: #pr-preloader · Dismissed on window.load · Slow-load message after 3s.
Cards
Every card pattern across all 11 pages — with live preview and CSS source.
Project / Portfolio Card styles.css §10
.pr-badge--pr
UX Case Study — Fintech App Redesign
2024 · UX Design
Classes:
.pr-card — wrapper (white bg, 18px radius, hover lift)
.pr-card__fig — image container (aspect-ratio 4/3)
.pr-card__img — cover image (scale on hover)
.pr-card__overlay — dark overlay with action icons (opacity 0→1 on hover)
.pr-card__act — glassmorphism action button (36×36, blur backdrop)
.pr-card__badge — top-left pill badge
.pr-badge--pr / .pr-badge--awd / .pr-badge--video — badge color variants
.pr-card__body — text content padding
.pr-card__title — 15px/700, hover→violet
.pr-card__meta — 12px, icon+text, tertiary color
Filter: .pr-filter, .pr-filter.active — pill tabs, active=violet fill
AI Tool Card styles.css §09
AI Writing Tool
Generates story outlines and scene drafts with context-aware suggestions.
GPT-4 Writing
Classes:
.pr-ai-card — dark glass card (dark bg, rgba border, hover lifts + border glows violet)
Icon wrapper: 44×44px, 12px radius, rgba(89,86,233,.15) bg
6 icon variants: wand-magic-sparkles, brain, robot, microchip, code, film
.pr-ai-tag — tiny pill badge, violet tint, used for tool category labels
Grid: 3-col on desktop, collapses to 1-col mobile
Story / Chronicle Card — Swiper Carousel styles.css §14
Short Film
The Last Frame
A story about finding your last shot when time runs out.
Novel
The Uncharted Romance
Where every heartbeat wrote a new chapter.
Non-Fiction
One Year, Many Lessons
365 days that changed everything about who I am.
.pr-story-card — dark glass card (rgba bg + border). Hover: border turns violet. Tags: category pill (violet, yellow, or teal tint). Pagination: .pr-chronicles-dots — custom elongated active dot. Carousel: Swiper (slidesPerView: 1.15 mobile → 2 at 576px → 3 at 992px → 4 at 1200px). Active slide: border glows. 6 slides total: Short Film · Novel · Non-Fiction · Figma MCP Training at Capgemini (delivering_Figma mcp_training_capgemni.jpg) · SAP Impulse India '25 Event Coordinator & Volunteer (sap_impluse_2025.jpg). Images in assets/img/pr/details/. No external link on image — body tag only.
About Page — Highlight Card & Meta Item styles.css §20
Amazon #1 Bestseller
Debut novel ranked #1 in Kindle store within first week.
IMDb Listed Filmmaker
Short films listed on IMDb with international festival selections.
Location
Bhubaneswar, India
Available remote worldwide
.ab-highlight-card — white card, 16px radius, icon + title + body. Hover: soft violet shadow + lift 3px. Icon box: 40×40, rounded, tinted bg matching icon color.
.ab-meta-item — label (uppercase/tertiary) + value + sub-label. Used for location, availability, etc.
Process Step Card styles.css §13
01
Research
User interviews, competitive analysis, defining problem space.
02
Define
Synthesizing insights into clear design principles and goals.
03
Design
Wireframes, prototypes, and final Figma handoff.
04
Test
Usability testing, iteration, and launch validation.
.pr-step — 4-col dark grid. Step number: large, faded violet. Active step: brighter border. Used in index.html "Process" section.
Book Product Display — 2-Column Layout book.css + styles.css
.bk-hero__single-cover
Romance · Novel
The Uncharted Romance
Where a chance meeting became the most defining journey of their lives. A debut novel that went straight to Amazon #1.
₹299
Kindle
₹449
Paperback
Amazon
Flipkart
.bk-form buy-bar — 2-col grid, Amazon violet, secondary ghost. Full-width on mobile.
.bk-hero__single-cover (book.css) — 320px wide, rotate(-3deg), hover straightens + lifts 8px.
Genre chips: pill badge above title. Price row: yellow Kindle price, white Paperback price.
Buy bar: 2→4 col responsive grid of retailer buttons. Review form below: .bk-form with .hm-btn-yellow (hover overridden to blue in book.css).
Review Card — Star Rating styles.css / book.css
"Absolutely loved this book. The way Subhankar writes emotions is unlike anything I've read before. Finished it in one sitting."
A
Ananya S.
Verified Amazon Purchase
"One Year, Many Lessons hit differently. Raw, honest, and full of wisdom. Every chapter felt like a conversation."
R
Rahul M.
Goodreads Reader
Stars: fas fa-star (filled, yellow #FFDC60) + far fa-star (empty, #E8ECF2). Reviewer avatar: 32px circle gradient. Quote in italic. Platform label in tertiary grey. Submit form below reviews uses .bk-form with name/email/review textarea + .hm-btn-yellow (hover turns blue in book.css).
YouTube / Channel Card styles.css (hm-yt-card)
Behind the Lens — Short Film Making
12K views8 min
.hm-yt-card — white card, 16px radius, thumbnail (16/9 aspect-ratio) + red play button + title + meta. Hover: lifts + shadow. Used in index.html "S4 Cinesphere" section and s4cinesphere.html.
Rocket Journey Card — Timeline Milestone styles.css §22
2020
Start
First Steps
Began the journey into product design and storytelling.
2022
Launch
Published Author
Debut novel became Amazon #1 Bestseller in first week.
2024
Now
Product Designer
Designing digital products and shipping internationally.
.rj-card — dark glass card, year in large faded violet, badge pill, title, description.
.rj-card-year / .rj-card-badge — year display + colored milestone badge.
Desktop: horizontal sticky scroll (CSS overflow-x scroll pinned). Mobile: .rj-mobile-timeline — vertical stacked cards.
Skill Group Card styles.css §11
Design
Figma UI/UX Prototyping
.pr-skill-group — white card with icon + group title + chip tags. .pr-skill-tag — pill chip (light grey bg, border, dark text). Used in index.html "Skills" section grid.
Marquees & Tickers
Four auto-scrolling strips across the site. All pause on hover.
Client / Company Chip — Dark Marquee styles.css §06
Companies & Clients
FlipkartAmazon KindleGoodreadsNotionFigmaIMDbYouTubeBehance FlipkartAmazon KindleGoodreadsNotionFigmaIMDbYouTubeBehance
.pr-client-chip — semi-transparent pill (dark bg), brand name in muted white, subtle border. Track: .pr-marquee-track with animation: prClientScroll 24s linear infinite. Mask fades edges. Pauses on hover. Used in index.html below hero.
Press Release "Featured In" Marquee — Light styles.css §23
Featured In
Hindustan Times Times of India The Indian Express ANI Yahoo News Hindustan Times Times of India The Indian Express ANI Yahoo News
.pr-featured wrapper — light grey bg (#f7f8fc), overflow:hidden. .pr-marquee — edge-faded mask. .pr-marquee__track — animates prScroll 24s linear infinite. .pr-marquee__item — 16px/700, grey text, right divider border, icon + label. Hover: text turns violet. Used in pr.html "Featured In" section.
Testimonial Card Marquee — Dark styles.css §14 portfolio.html

He is a talented product designer with a great eye for detail and a sharp instinct for what makes a user experience truly work.

M
Meera Nair Director of Product Management
LinkedIn

What stands out most is how fast he moves without losing quality. He analyses a brief quickly and delivers within — often ahead of — the agreed timeline.

A
Arjun Kapoor Design Lead, Product Team
Email
Cards scroll left continuously · Hover pauses · Right card = hover state (border glows)
Container: .pr-testi-marquee — overflow:hidden flex row, CSS mask fades both edges (mask-image: linear-gradient transparent → black 8% → 92% → transparent).
Tracks: .pr-testi-track + .pr-testi-track--clone — two identical flex rows, both run animation: pr-testi-scroll 32s linear infinite. Clone is aria-hidden. Together they create a seamless infinite loop.
Pause: .pr-testi-marquee:hover .pr-testi-track { animation-play-state: paused }
Card: .pr-testi-card — 360px fixed width, rgba(255,255,255,.04) bg, rgba(255,255,255,.08) border, --radius-lg. Hover: border-color → rgba(89,86,233,.45) only. No translateY lift — cards are in motion so vertical lift feels jarring.
Avatar: .pr-testi-card__avatar — 42px circle, violet gradient, letter initial.
Source badge: .pr-testi-card__source — 11.5px muted. Icon: fab fa-linkedin (LinkedIn) or fal fa-envelope (Email). Color: rgba(255,255,255,.22). Icon color: rgba(89,86,233,.5).
Reduced motion: Animation disabled; tracks become overflow-x: auto scrollable. Mask removed.
Stats & Data Display
Two stat strip variants — dark with gradient text (PR page) and about page yellow variant.
PR Page — Gradient Text Stats Strip styles.css §23
50+ Press Features
#1 Amazon Rank
2 Books Published
10K+ Readers
.pr-stats — dark bg (#0D0D12), top border. .pr-stats__grid — 4-col grid, dividers between cols. .pr-stat__num — 54px/800, gradient text-clip (violet → yellow → teal). .pr-stat__lbl — 12px/600, uppercase, muted. Animated via CounterUp.js on scroll.
About Page — Stats Bar styles.css §20
4+ Years Experience
20+ Projects
2 Books
50+ Press Features
.ab-stat-item — white bg, yellow number (#FFDC60), grey label. 4-col grid, divider borders. Animated via CounterUp.js on scroll.

Chitra Design System v2.0 · subhankarrout.in · Released June 2026 · Last updated 2nd July 2026 · Back to site →

noindex · Brand & Component Reference · Internal use only

A small honest note — this document captures the intended system. A few pages across the site may have their own little quirks, overrides, or one-off tweaks that don't follow every rule to the letter. That's okay — good design systems are living things, not strict courtrooms. Think of this as the north star, not the law.

Chitra Design SystemTM  ©  Subhankar Rout 2026. All rights reserved.