No idea on the color scheme, I haven’t noticed a common practice here.
With the layout, there are a few “standards” out there. The most common (but as @Robert_Mathijs will likely point out - not most finger-drumming ergonomic) layout is where the most common sounds are arranged, starting bottom left. There’s no 100% agreement, but I think its roughly this:
Bottom Row: Kick, Snare, Hat Closed, Hat Open (This is very established)
From there, I’m not sure if there are any conventions anymore. In the second row from bottom, I usually then see alternatives to the first row, like a Rimshot or Clap above the Snare, and other cymbals above the Hats (like second Hat Closed, Ride and Crash).
Third row from bottom is then usually toms (TH, TM, TL), percussion, rather flexible.
Forth row is sometimes not even set (12 sounds are plenty), but if they are, it’s usually then percussion, samples.
Here are screenshos of Bitwig Drum Maschines, they follow this convention I’ve also seen elsewhere (I think NI Maschine, Atlas has the same conventions?)
Or this: https://forum.bfddrums.com/uploads/default/original/2X/7/78bef1ac29b95dcfbfe8bc1faecb28efd5708e32.png (very typical Machine layout)
For your website, you have several sounds that never change when changing the drum-set. I would optimize toward those also staying on the same pad with 4x4 layout. You have 11 sounds, so you’d only fill the first 3 rows.
So maybe it’s something like this (or Rim/Clap reversed), basically a 4x3 layout:
(empty), (empty), (empty), (empty)
HT/HC, MT/MC, TL/LC, (empty)
Cowbell, Clap/MA, Rimshot/Clave, CY
Kick, Snare, Hat Closed, Hat Open