Design system ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆ
Light paper, green ink
Version 2.1. Three voices of type, one dark green, a drafting grid, soft cards and four moves. Everything below is drawn from the live tokens, so flip the theme in the nav to see the night version.
Colour
The dark green does the talking; everything else steps back. Laterite is the only warm colour and it's rare.
Greens
- Pine
#053225 · --c-pineThe ink accent: accent words, Kannada, project pills, links, the picks’ cards - Mint
#9CD08F · --c-mintSoft fills; the accent at night. Never text on the paper - Sun
#FFBA07 · --c-sunHighlighter: the hero mark, the grid’s lit marks, selection. Never text - Rose
#E44A6E · --c-roseA rare spark: big or bold words and small accents only (3.8:1) - Snow
#FCFFFC · --c-snowThe paper
Warm
- Canopy Deep
#03231A · --c-canopy-deepA deeper Pine: green blocks - Moss
#4F9A5E · --c-mossIllustration and graphic fills, never text - Lichen
#D3EBCB · --c-lichenMint, lightened: soft fills behind dark text - Paper
#ECE7DA · --c-paperBehind sketchbook art
Day (default)
- Paper ground
#FCFFFC · --bgThe page (default theme): Snow - Card
#FFFFFF · --bg-tileSoft cards on the paper - Raised
#EFF4EF · --bg-raisedHover, inputs - Line
#E1E8E2 · --lineHairlines - Ink
#141A17 · --fgText, 17.5:1 on paper - Muted
#4A524D · --fg-mutedSecondary text, 8:1 - Subtle
#606A64 · --fg-subtleLabels and meta, 5.6:1
Night
- Night
#131313 · --c-nightThe page (dark theme): a greyish black - Surface
#1C1C1C · --c-surfaceCards at night - Raised
#252525 · --c-raisedHover, inputs - Line
#2F2F2F · --c-lineHairlines - Mist
#EDEDED · --c-mistText at night, 16.4:1
Type, three voices
1 · Names and headings
Let’s connect
Anek Latin, condensed uppercase. Loud, structural.
The accent word
Let’s connect
Same type, in green. One or two words per page. No italics anywhere.
2 · Everything else
Have a project, a role, or just a good idea?
Kumbh Sans. Body, labels, buttons.
3 · Kannada
ಸಂಪರ್ಕಿಸಿ
Noto Sans Kannada. Every page heading keeps its Kannada partner.
Together
I design products
ನಮಸ್ಕಾರ, ನಾನು
- Suhruth Simha
- Things I’ve shipped
- One brick at a time
- The problem nobody owned
- What we tried first
- I care about the boring parts of design: the ones that make a product feel obvious the second time.
- Most recently that was RetailIQ at GeoIQ, built with a team of four designers.
- Bengaluru · 2024 · Product design
- Things I’ve shipped
The drafting grid
72px cells, a small + where lines cross. On paper it fades out towards the edges (behind the hero portrait); on a green block it runs edge to edge in pale green. <DraftGrid fade tone />
Surfaces and buttons
.card-soft .u-lift
A soft card on the paper
22px corners, a hairline edge and a long, low shadow. Hover it.
.block-green
One dark green block per page
Canopy Deep with mist text; the serif word turns Fern here.
Motion, four moves
Springy and physical, never flashy. With "reduce motion" on, everything is simply there.
rise
How sections arrive: up 12px with a soft overshoot, one after another.
--dur-rise · --rise-y · --ease-spring · --staggerlift
How a card answers a pointer: up a little, a hair of tilt, a deeper shadow.
--lift-y · --lift-tilt · --dur-base · --shadow-lifttoss
How objects behave: pick them up, throw them, they glide and settle. For the green desk.
--ease-out (on release)jumble
The signature: letters shuffle and sort themselves back. Every CTA; words under 4 letters stay still.
data-jumbleThe loader
Once per visit. Two lines in two voices on the grid; the serif word arrives shuffled and sorts itself out, with ಸ್ವಲ್ಪ ತಾಳಿ (hold on a moment) underneath. Then the sheet wipes up, dark green edge last. About 2.2 seconds, never more than 6.
Watch it again