CSS Superlative Design Grammar
The Last CSS Variable Color Design Grammar You'll Ever Need To Know
- Grammar Monster
- A superlative is the form of an adjective or an adverb used to compare three or more things.
- Merriam-Webster
- Constituting the degree of grammatical comparison that denotes an extreme or unsurpassed level or extent.
- Cambridge English Dictionary
- The form of an adjective or adverb that shows the thing or action described has more of the quality than all others of the same type.
- Clinton Gallagher
- This is the last CSS variable color design grammar you’ll ever need to know…
| /** Superlative Design Grammar **/ | |
|---|---|
| --blue-lightest: | #bcc7d7; |
| --blue-lighter: | #90a2bc; |
| --blue-light: | #647ca1; |
| --blue-basic: | #375786; |
| --blue-dark: | #1a3660; |
| --blue-darker: | #142948; |
| --blue-darkest: | #0d1b30; |
- We’re going to use this HTML Color Picker courtesy of Tutorial Republic to generate a list of color values as shown above.
- Select one of the colors you intend to use for the color palette being used for the website your are building. Selecting the ‘Update’ button will generate a list of ~21 colors.
- Clinton Gallagher’s CSS Superlative Design Grammar uses seven color adjectives: one basic color, three shades and three tints of superlative adjectives: lightest, lighter, light (tints) — basic– dark, darker, darkest (shades.)
Use the color value smack dab in the middle of the list of ~21 color values generated by the HTML Color Picker; it will be labeled SELECTED and that value is used as the ‘basic’ color of its type from which all other superlatives are derived.
We’ll use the Rule of Three to build our superlative adjectives.
The Rule of Three
The rule of three states that objects arranged in odd numbers are more interesting and eye-catching than even-numbered groups. This applies to visual artworks, photography, film, theatre, architecture, writing –just about everything– and as you may already know: web design color palettes.
The classic Rule of Three coincides with our use of superlative adjectives. Ergo, you can rely on the rule to avoid falling into a rabbit hole: over-kill.
There may be exceptions we’ll have to make to comply with color contrast when we focus on accessible web design. We have a good tool available from WebAIM Color Contrast Checking Tool.
To get started building your superlative grammar pick every third item from the list generated by the HTML Color Picker. Adjust your list picks accordingly. You might want to use every second listed color value which will remain consistent with a superlative grammar that uses the Rule of Three for three light tints and the Rule of Three for three dark shades.
Repeat this process for each of the three colors you’ve decided to use in your palette and you’ll have a color schema that will serve you and all users of your websites well.
RESULTS:
A scalable, replicable, self-documenting, explicitly expressive CSS color variable design grammar that is derived from the art and the science of linguistics.
Ready to implement or go further with CSS for your business?
“Let’s make it happen. With my expertise and hands-on we will achieve your goals. Fill out the Contact Me form below and let’s start working it out together.”