Typography
Colour
Elements
Docs
I am Riya

Welcome to my digital garden!🌱

I'm a simple human, a designer/engineer, a feminist, and an over-thinker!

This is my digital space were I put my work, curated reads, listenings, random musings, and mid-night questions. Think of it as a digital garden, where I plant ideas, grow questions, and occasionally harvest some wisdom.

In a journey of figuring things out (adult life!)
Notes
A note on my design journey, values, wins, failures, and whatnot!
View Docs
design journey, values, wins, failures, and whatnot!
WINS & FAILURES
What's happening lately

1. Becoming a podcast host @Design and Dialectics with Pravallika
2. Improved my cooking skills and made some savory dishes
3. Designing & building a Webflow website for a NGO with my
Develop for Good team
4. Completing my 2nd speech in Toastmasters
5. Learning to ask business questions, and success metrics and prioritizations
6. Networking with a meaningful intention
7. Learning to swim
8. Creating a design system component without atomicity
9. Creating 5 more components with atomicity
10. Presented at ACM Richard Tapia Conference regarding "Protecting vulnerable people from scams"

JOURNEY
Becoming a conscientious designer...

I have always loved complexity and problem-solving, so it was a no-brainer for me to pursue Computer Engineering. However, I also wanted to be more creative and exploratory, which led me to Product Design which enabled me to leverage my technical and design side.

Soon, I realized the impact of design and engineering on society through empowering communities, changing situations, supporting causes, or simply improving our lives. However, it's important to acknowledge that design can also influence people, create biases, and start conflicts. After all, it's a creation made by people, but it's for people.

Therefore, I aspire to become a conscientious designer who upholds my values, adapts to change, unravels ambiguity and complexity, continues to learn new things, and creates a meaningful impact. This is my commitment to making a small yet significant difference through design.

VALUES
Empowering . Usable . Intentional . Beautiful

I strive to make my work usable, intentional, empowering, and beautiful. Lately, I’m finding ways to solve problems around my surroundings with thoughtful solutions but with a strategy. I believe the best things happen with collaboration and I value ambition, failures, learning from mistakes, and continuously questioning and constantly improving and growing both in design and life.
‍
Beyond my craft, I believe in giving back and supporting my community. In an unequal world, I believe it's our responsibility as humans to make it better. To me, this means treating everyone with equality, and respect, and offering support to others. I prioritize empathy in my interactions and intentions be it design or in life, and sustainability as a key focus for a better future - if not now, when?

NOTES

A note on my design journey, values, wins, failures, and whatnot!

Lists
I spend a lot of time listening, watching, and reading a bunch of stuffs and this is
a curated list of some of my favorites!
View Docs
A CURATED LIST on SOME OF MY FAVORITES
LIST 03
Recently discovered gems

1. Arc Browser ↗
2. Matter ↗
3. Mastodon.social ↗
4. Last.fm ↗

LIST 02
Read List ↗
LIST 01
Listen List ↗
Lists

I spend a lot of time listening, watching, and reading a bunch of stuff and this is
a curated list of some of my favorites

Typography
View Docs
Preview
.Heading-100
Jump really high

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.Heading-90
Zelda might fix the job growth plans very quickly

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.Heading-80
Zelda might fix the job growth plans very quickly on Monday.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.Heading-70
A quivering Texas zombie fought republic linked jewelry. The five boxing wizards jump quickly.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.Heading-60
A quivering Texas zombie fought republic linked jewelry. The five boxing wizards jump quickly.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.Heading-50
A quivering Texas zombie fought republic linked jewelry. The five boxing wizards jump quickly.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.Heading-40
The five boxing wizards jump quickly

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.Heading-30
The five boxing wizards jump quickly

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.Heading-20
The five boxing wizards jump quickly

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.Heading-10
The five boxing wizards jump quickly

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

Headings

Use the panel on the right to adjust the size, leading and tracking of your heading styles.

Placeholder paragraph copy has intentionally been added beneath each heading to provide real-world context.

Preview
.text-90
Dynamically maintain high standards in solutions without prospective potentialities. Enthusiastically repurpose extensive processes rather than vertical partnerships.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.text-80
Dynamically maintain high standards in solutions without prospective potentialities. Enthusiastically repurpose extensive processes rather than vertical partnerships.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.text-60
Dynamically maintain high standards in solutions without prospective potentialities. Enthusiastically repurpose extensive processes rather than vertical partnerships. Distinctively optimize emerging communities.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.text-70
Dynamically maintain high standards in solutions without prospective potentialities. Enthusiastically repurpose extensive processes rather than vertical partnerships. Distinctively optimize emerging communities.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.text-50

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.text-40

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.text-30

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.text-20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.text-10

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

TEXT

Use the panel on the right to adjust the size, leading and tracking of each of your project's paragraph styles.

Placeholder paragraph copy has intentionally been added beneath lead paragraphs to provide real-world context.

Preview
.richtext-Basic

The Boxing Wizards

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Zelda might fix the job growth plans very quickly on Monday.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a image caption

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a text link to any collection and then connect a rich text element to that field in the settings panel. Voila!

  1. Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
  2. Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
  • Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

RICH TEXT

Use the panel on the right to adjust the size, leading and tracking of each of your project's richtext elements.

Colours
View Docs
Preview
.F0 T-A
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F0 T-B
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F0 T-C
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F0 T-D
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.LINK
.on--f0
.A
This is a text link
.LINK
.on--f0
.B
This is a text link
.btn
.on--f0
.A
Button
.btn
.on--f0
.B
Button
BG Fill #0
Background Fill
text a
text b
text c
text D
Link A
Link B
Button A
Button B
Preview
.F1 T-A
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F1 T-B
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F1 T-C
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F1 T-D
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.LINK
.on--f1
.A
This is a text link
.LINK
.on--f1
.B
This is a text link
.btn
.on--f1
.A
Button
.btn
.on--f1
.B
Button
BG FILL #1
Background Fill
text a
text b
text c
text D
LINK A
LINK B
Button A
Button B
Preview
.F2 T-A
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F2 T-A
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F2 T-A
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F2 T-A
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.LINK
.on--f2
.A
This is a text link
.LINK
.on--f2
.B
This is a text link
.btn
.on--f2
.A
Button
.btn
.on--f2
.B
Button
BG FIll #2
Background Fill
text a
text b
text c
text D
Link A
Link B
Button A
Button B
Preview
.F3 T-A
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F3 T-A
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F3 T-A
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F3 T-A
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.LINK
.on--f3
.A
This is a text link
.LINK
.on--f3
.B
This is a text link
.btn
.on--f3
.A
Button
.btn
.on--f3
.B
Button
Bg FIll #3
Background
text a
text B
text c
text D
Link A
Link B
Button A
Button B
Preview
.F4 T-A
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F4 T-B
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F4 T-C
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.F4 T-D
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.LINK
.on--f4
.A
This is a text link
.LINK
.on--f4
.B
This is a text link
.btn
.on--f4
.A
Button
.btn
.on--f4
.B
Button
BG: FIll #4
Background
text a
texT b
text c
text D
Link a
Link B
Button A
Button B
Preview
.IMG T-A
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.IMG T-B
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.IMG T-C
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.IMG T-D
Example Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.LINK
.on--IMG
.A
This is a text link
.LINK
.on--IMG
.B
This is a text link
.btn
.on--IMG
.A
Button
.btn
.on--IMG
.B
Button
BG: IMAGE
text a
texT b
text c
text D
Link a
Link B
Button A
Button B
Elements
View Docs
Layout
Sections
.SECTION
.IS--XSM
.SECTION
.IS--SM
.SECTION
.IS--md
.SECTION
.IS--LG
.SECTION
.IS--XLG
Containers
.container
.IS--SM
.container
.IS--MD
.container
.IS--LG
.container
.IS--XLG
Buttons
.btn body
.IS--SM
Learn More
.btn body
.IS--md
Learn More
.btn body
.IS--lg
Learn More
.btn body
.IS--xlg
Learn More
Forms
.form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Image Containers
.img container
.IS--16:10
.img container
.IS--10:16 vert
.img container
.IS--16:9
.img container
.IS--16:9 vert
.img container
.IS--3:2
.img container
.IS--2:3 vert
.img container
.IS--4:3
.img container
.IS--3:4 vert
Elements

Use the panel on the right to adjust the size and padding of your global layout elements.

I value

In an unequal world, I believe it's our responsibility as humans to make it better. To me, this means treating everyone with equality, respect, and offering support to others. I value ambition, making mistakes but learning from them, questioning my beliefs and embracing change, and committing to continuous improvement. I prioritize empathy in my interactions and intentions be it design or in life, and sustainability as a key focus for a better future - if not now, when?

I'm listening ↗
I'm good at
  • Interaction design
  • Design System
  • Analyzing complex problems
  • Product Strategy
  • Team collaboration
  • Designing edge cases

More Vibrant
Than Ever

I'm working on
  • Speaking up & overcoming imposter syndrome in group settings
  • Balancing design decisions for business needs over task specifics
  • Engaging in public speaking through Toastmasters

More Vibrant
Than Ever

Goals for 2024
  • Write more design articles
  • Master After Effects and Blender
  • Read 12 books
  • Start kickboxing!
  • Atleast do 3 of these things :)
I'm reading ↗
Outside work

More Vibrant
Than Ever

Find me trying out cuisines, hitting the gym, chilling with friends, scrolling Reddit, researching circular fashion, thrifting, making leather from kombucha, and most importantly, catching up on sleep!

These inspired me..

Found interesting/need help/talk? Let's chat

Browse my work

Linkedin
Mail
Podcast
Behance