Type Design
The Geometry of Devanagari
R.K. Joshi believed that designing with a deep understanding of letterforms, history, and the tools that create them produces work of lasting value. This system translates that conviction into digital components—replacing hard clinical angles with the organic warmth of the reed pen.
1. Style Foundations
Color, type, tokens, icons, and spacing—the building blocks that sync design and code.
Design philosophy
- Calligraphic warmth: Stroke-contrast typefaces and vermillion accents evoke the handwritten manuscript tradition without sacrificing screen legibility.
- Restraint over ornament: One display face, one body face, one accent hue. Each element earns its place—nothing decorative without function.
- Humanistic hierarchy: The visual rhythm mirrors how a scribe organizes a page: bold headings, generous body text, and clear sectional breaks.
- Cultural grounding: Color names (Vermillion, Core Ink), spacing metaphors, and content examples are rooted in Indian calligraphic practice rather than generic tech conventions.
Color palette
The palette draws from a scribe's workbench: deep carbon ink, clean white paper, and the vermillion used to mark titles in traditional Indian manuscripts.
Primary & secondary
Core Ink
#1A1A1A
Paper
#FFFFFF
Vermillion
#C1392B
Muted
#6B6B6B
Rule
#E0E0E0
Semantic
Success
#2E7D32
Warning
#D35400
Error
#C62828
Neutral / grayscale
50
--neutral-50
200
--neutral-200
400
--neutral-400
600
--neutral-600
900
--neutral-900
Typography
The type pairing is the conceptual core of this system. Rozha One was chosen for display because its extreme stroke contrast—thick verticals against razor-thin joins—mirrors the pressure dynamics of a reed pen on paper. It carries the visual authority of formal Indian calligraphy. Eczar, designed for screen readability with a generous x-height and sharp terminals, handles body text and UI labels. Together they create a hierarchy that feels both scholarly and modern.
Type scale
H1–Body scale
H1
Page
title
H2
Section
heading
H3
Subsection
label
H4
Subtitle
Body
The quick brown fox jumps over the lazy dog.
Iconography
Icons use a stroke-line style (never filled) to echo the calligraphic emphasis on line quality over mass. At 24×24 with stroke-width 2, they remain legible at small sizes while maintaining visual consistency with the thin joins found in Rozha One's letterforms.
Home
Search
User
Like
Add
Spacing
We use a strict 8px base grid because it maps cleanly to common screen densities and provides a vertical rhythm that mirrors the ruled lines of a manuscript page. The scale progresses from tight UI gaps (4px) to generous sectional breathing room (48–80px), reflecting how a calligrapher varies line spacing between body text and chapter headings.
Spacing tokens
--space-1 (4px)
--space-2 (8px)
--space-4 (16px)
--space-6 (24px)
--space-8 (32px)
--space-12 (48px)
2. Component Library
Components are designed to feel utilitarian and flat—no border-radius, no drop shadows, no gradients. This flatness is a deliberate choice: rounded corners and soft shadows belong to consumer SaaS products that optimize for friendliness. This system optimizes for authority and clarity, the same qualities a well-set manuscript page communicates. The vermillion accent color is reserved exclusively for primary actions and active states to prevent visual inflation.
Forms & inputs
Form inputs use the Eczar body face at 15px, maintaining readability without oversizing. Focus states shift the border to vermillion with a subtle warm wash, providing clear affordance without disrupting the page's visual calm. Labels are set in small uppercase to create a clear distinction from input content.
Form elements
Feedback
Toast notifications use full-width blocks with semantic background colors. We avoid icons-only patterns—every toast includes descriptive text because the system's calligraphic heritage values language as the primary communication tool.
Toasts & progress
Manuscript successfully digitized.
Error saving strokes.
Data display
Table & badges
Draft
New
Published
| Artifact | Century | Status |
|---|---|---|
| Rigveda Samhita | 11th C. | Verified |
| Arthashastra | 2nd C. BCE | Pending |
3. Pattern Library
Patterns are opinionated compositions. They codify the system's thinking about common UX scenarios—how a login flow should feel, what an empty state communicates—so that every screen in the product speaks with one consistent voice.
Authentication
The login card is centered and borderless in feel—a single 1px rule contains it without competing with the form fields inside. The display heading uses Rozha One to make the entry point feel intentional rather than generic.
Empty & error states
No Manuscripts Found
Try adjusting your search criteria or uploading a new palm-leaf scan to the database.
App Examples
These mockups test the system against real-world product patterns: a content feed, a social media app, and a data-dense sports scorecard. The goal is to demonstrate that a calligraphic aesthetic can feel natural in modern mobile contexts—not as decoration, but as genuine design language that improves scannability and emotional resonance.
Blog Feed
▲
142
142
▲
98
98
Calligraphy
Mastering the Reed Pen
▲
67
67
History
Brahmi to Modern Scripts
Social Media
You
akash_t
pune_art
rkjoshi_archive
243 likes
rkjoshi_archive A beautiful evening
reflecting on typography near the sea. #design
Cricket Score
IND vs AUS · FINAL
284/4
42.4 Overs
| Batter | R | B | SR |
|---|---|---|---|
| S. Tendulkar | 98 | 104 | 94.2 |
| V. Kohli | 45 | 32 | 140.6 |
Cross-platform
The calligraphic system must transcend mobile. These examples demonstrate that Rozha One's stroke contrast and the vermillion accent translate to a 10-foot TV interface, a glanceable watch face, and a productivity dashboard alike.
TV — Manuscript gallery
Collection · 14th Century
Gita Govinda Folios
48 folios · Mewar school · Gold leaf on indigo wash
View
Save
Watch — Word of the day
WORD OF THE DAY
Lipi
लिपि · noun
Script; a system of writing. From Sanskrit, 'to paint.'
Swipe for
etymology →
Laptop — Document manager
4. Governance & Rules
A design system without governance is just a component library. These rules ensure the system stays coherent as it scales across teams and products.
Accessibility (A11y)
Aesthetic choices must never compromise access. Every color pairing is tested for WCAG AA compliance.
- Contrast: Vermillion (#c1392b) passes 4.5:1 ratio against white background.
- Legibility: Eczar's generous x-height ensures readability at 16px.
- Focus States: Distinct stroke outline around all actionable components.
Content Strategy
Tone: Authoritative, Grounded, and Human. Avoid modern tech-jargon where appropriate.
Usage / Handover
Import the core CSS bundle in your application head:
<link rel="stylesheet" href="rkjoshi-system.min.css">