yuradanilov.com

Design System

Everything below is generated from src/design/tokens.js. Change a value there and it changes on every page — nothing in the site hardcodes a color, a typeface or a size.

← Back to the site

Palette

Raw values. Nothing on the site points at these directly — they exist so the roles below can share them.

  • ink900 #0a0c0f
  • ink850 #14161b
  • ink800 #16191e
  • ink700 #1a1b26
  • ink600 #252628
  • ink500 #3a383f
  • ink400 #656565
  • ink300 #858585
  • ink200 #a8a8a8
  • ink100 #d5d5d5
  • ink050 #c8c8c8
  • paper #ffffff
  • paper2 #fafafa
  • paper3 #f4f4f4
  • paper4 #f6f6f2
  • cream #efefe0
  • slate #8f95a3
  • slateD #696f7c
  • graphite #3a3a3a
  • carbon #161516
  • carbon2 #2b2a2b
  • carbon3 #4a494a
  • hairline #e3e6ea
  • hairline2 #cfcfcf
  • hairline3 #c9ced4
  • blue #005cc4
  • blueHi #0071db
  • green #12910d
  • plum #2e1a45
  • void #0f0c17
  • black #000000

Semantic roles

What a color means. The home page and /visual use the dark set; the case studies switch to light with .is-light.

TokenDarkLight
--bg #0a0c0f #ffffff
--bg-mobile #252628 #ffffff
--surface #16191e #f6f6f2
--panel-deep #0f0c17 #0f0c17
--panel-invert #000000 #000000
--band-soft #16191e #fafafa
--panel-soft #16191e #f4f4f4
--bar-soft rgb(255 255 255 / 0.22) rgb(0 0 0 / 0.20)
--bg-visual #1a1b26 #1a1b26
--line #3a383f #e3e6ea
--rule-soft #3a383f #cfcfcf
--rule #656565 #c9ced4
--hero #efefe0 #3a3a3a
--text #ffffff #161516
--text-2 #d5d5d5 #2b2a2b
--text-3 #a8a8a8 #4a494a
--text-muted #656565 rgba(22, 21, 22, 0.58)
--text-dim #858585 rgba(34, 34, 34, 0.50)
--text-soft #c8c8c8 #2b2a2b
--accent #005cc4 #005cc4
--accent-hover #0071db #0071db
--accent-ink #ffffff #ffffff
--online #12910d #12910d
--control-bg #8f95a3 #8f95a3
--control-ink #1a1b26 #1a1b26
--control-bg-hover #696f7c #696f7c

Case-study identities

Each project keeps the accent and hero band it had in the original. The accent colors that project's section headings.

  • welltech #6450ae accent
  • mycointainer #6450ae accent #69baf4 band
  • kinchaku #ff3819 accent
  • orderbook #ff3819 accent
  • bitok #2e6be6 accent

Typography

Four families, one fluid scale. The display face stands in for the Adobe original — swap the stack in type.families.display.

  • display Aa Bb Cc 0123 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif
  • title Aa Bb Cc 0123 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif
  • body Aa Bb Cc 0123 'Roboto', system-ui, -apple-system, sans-serif
  • serif Aa Bb Cc 0123 'Merriweather', Georgia, serif
--fs-display clamp(2.75rem, 8.7vw, 5.5625rem) hero, uppercase

Lead Product Designer

--fs-title clamp(2.5rem, 7.5vw, 5.125rem) project pages

Orderbook.io

--fs-h2 clamp(2rem, 4.5vw, 3.1875rem) work list

Welltech.com

--fs-h3 clamp(1.75rem, 4vw, 2.5rem) case sections

Product & Services

--fs-stat clamp(2rem, 3.4vw, 3rem) figures

15+

--fs-lead clamp(1.125rem, 1.6vw, 1.375rem) card headings

Design Systems & Scalable Foundations

--fs-section 1.25rem uppercase eyebrow

Design Tokens

--fs-body 1.1875rem dark pages

I design complex digital products and platforms.

--fs-prose 1rem case studies

Building the product is an iterative process.

--fs-small 0.9375rem lists, labels

Researching & Synthesizing

--fs-caption 0.875rem italic, under figures

General Orderbook.io UX scheme

Measurements

Layout

--page-max
1024px
--prose-max
880px
--narrow-max
611px
--gutter
clamp(1rem, 4vw, 2rem)
--section-y
clamp(3rem, 7vw, 5.5rem)
--fig-min
680px
--block-y
clamp(2rem, 5vw, 3.25rem)

Radius

  • --radius-none0
  • --radius-btn999px
  • --radius-sm4px
  • --radius-md8px
  • --radius-lg12px
  • --radius-card20px
  • --radius-pill999px

Shadow

  • --shadow-card
  • --shadow-lift
  • --shadow-stage
  • --shadow-btn
  • --shadow-btn-hi

Motion

--ease
cubic-bezier(0.4, 0, 0.2, 1)
--dur
0.8s
--dur-ui
0.25s

Reveals and parallax both read --dur and --ease; reduced motion zeroes them.

Components

Download Resume Linkedin Small

Capsule controls. Translucent material, hairline rim, soft drop with an inner highlight; they lift on hover and spring on press.

  • Fintech
  • Wellbeing
  • Marketing
  • Loyalty

Tags share the material but stay inert — no lift, no press, no pointer.

Let’s build something that matters

The panel surface, radius and shadow all come from tokens.