MD Colors used on SC

MENU

Use MD colors, with Amber 500 as the prime color.

As a background, when designing the original site, I chose to use the basic color a shade of gold or yellow. Gold is the definitive Buddhist color. It is heavily emphasized in the Suttas, as the color of the Buddha’s skin, as well as countless similes. In Buddhist traditions, gold is used to represent the glory and value of the Dhamma. Further, as the color of the rising sun, it represents awakening and higher consciousness.

Note

Little known piece of history. When I first built the site, I wanted to use a vivid gold. However, the World Tipitaka site, which hosted our Pali texts at the time, also used this color. I didn’t want to make it look like we were imitating them, so went with a softer pastel.

In contrast with the bright and vivid colors and decoration used in traditional Buddhism, most modern Buddhist design is plain and drab. While we obviously don’t want to make the site look busy, unexpected and bold use of color engages interest and delight.

The color of the headers indicates a journey. The Home page has the primary color, amber/gold. This is reflected in the nav drawer, which echoes the same color. Tabular and search results pages use different colors—red and green, respectively—and when arriving at the Text pages, the primary color appears again: the journey is complete.

Use Cyan for the accent color.

This is a list of all the Material Design colors I use through Polymer Colors on the new site:

Colors for items used sofar:

Navbar
Top logo (SuttaCentral): --paper-indigo-500: #3f51b5;
Top logo background: --paper-amber-400: #ffca28;
Top logo bottom border: --paper-deep-orange-900: #bf360c;
Expanders:
Linked text: --paper-cyan-500: #00bcd4; (should maybe change)
Language: --paper-grey-600: #757575; (should maybe change to --secondary-text-color)

Toolbar:
Large: background: --sc-gold-500: #DF990A;
Small: background: --paper-deep-orange-900: #bf360c;
Authors: --paper-green-a700;
Original language: --paper-blue-700

Expanders & icons:
–disabled-text-color;

Suttaplex:
background: --paper-blue-grey-50: #eceff1;
ID/pali name/volpage: --secondary-text-color

Language-dropdown:
Language: --secondary-text-color

MENU

1 Like

@Sujato: I have updated the above color scheme to match MD colors and corresponding paper colors. Could you have a look and see what you think about that? It is not exactly the same as what is on the mockup now.

Sorry, I can’t really say, not without seeing the implementation and/or code. Let’s wait until we can talk.

And, as one teacher puts it, developing the self-sufficient capacity to generate sukha independently of external stimulus (e.g. with jhana), it like trading candy for gold.

2 Likes