  
    CSS

WALLIS WILLIAMS DESIGN

Testing out css borders/shadow.

  
    

box-shadow:
    0 1px 3px rgba(37, 99, 235, 0.08),
    0 4px 16px rgba(37, 99, 235, 0.06),
    0 0 0 1px rgba(37, 99, 235, 0.04);

box-shadow: 0 1px 3px rgba(100,60,30,0.08), 0 0 0 1px rgba(100,60,30,0.04);
box-shadow: 0 4px 16px rgba(100,60,30,0.10), 0 1px 4px rgba(100,60,30,0.06);
box-shadow: 0 12px 40px rgba(100,60,30,0.12), 0 2px 8px rgba(100,60,30,0.06);
}
  

Theme

All Examples · Live Demo

The One Color Decision That Makes a UI Look Expensive

Every example from the article rendered live. Switch the theme above. The tokens rewire the entire page instantly.

Tinted Neutrals

Pure grey disconnects the brand from the surface. Every neutral, background, border and muted text carries a trace of the brand hue. Not visibly. Just enough to lean the same direction.

Dead. Pure grey. Belongs to no brand.

#F8F8F8 background

#FFFFFF surface

#E5E5E5 border

#6B6B6B muted text

#2563EB brand

The brand floats. It belongs to a different universe than everything around it.

Alive. Every neutral leans blue.

#F4F6FA background

#FAFBFD surface

#DDE3EE border

#7A8BA0 muted text

#2563EB brand

The brand is an intensification of the hue already running through the entire surface.

Alive. Every neutral leans warm amber.

#F7F3EE
bg

#FDFAF7
surface

#E8DDD2
border

#9A8878
muted

#C4502A
brand

Shadows That Carry Temperature

Pure black shadows read as Photoshop effects. A shadow is the absence of light. Its color is shaped by the ambient temperature of the surface. Blue surface, blue shadow. Warm surface, amber shadow.

Generic. Pure black. Pasted on.

Feature card

The shadow belongs to nothing

0 1px 3px rgba(0,0,0,0.10)
0 4px 16px rgba(0,0,0,0.08)

Stat card

It reads as a black sticker

Premium. Shadow carries brand hue.

Feature card

The shadow belongs to this surface

0 1px 3px rgba(37,99,235,0.08)
0 4px 16px rgba(37,99,235,0.06)
0 0 0 1px rgba(37,99,235,0.04)

Stat card

It reads as light, not paste

Warm brand. Amber shadow.

Pricing card

Warm shadow, warm surface

0 1px 3px rgba(120,80,40,0.08)
0 4px 16px rgba(120,80,40,0.05)
0 0 0 1px rgba(120,80,40,0.04)

Feature card

Everything speaks the same language

Text Color Hierarchy

Pure black on white is the accessibility floor. Not the target. Near-black with a hue shift, muted text that leans warm or cool. The contrast budget stays intact. Temperature gets added inside it.

Flat. No temperature. No relationship.

Primary. Heading level.

#000000

Secondary. Body and descriptions.

#666666

Muted. Labels, captions, metadata.

#999999

Warm. Every tier leans amber.

Primary. Near-black, warm undertone.

#1A1410

Secondary. Mid-dark, same warmth.

#4A4440

Muted. Still warm. Not a grey.

#9A8E85

Cool. Every tier leans blue-grey.

Primary. Near-black, blue undertone.

#0F1520

Secondary. Slate mid-tone. Same family.

#3D4A5C

Muted. Blue-grey. Never straight grey.

#7B8CA0

The Full Card Component

All three decisions applied together. Tinted background. Brand-tinted shadow. Temperature-matched text. A badge using brand-subtle instead of a generic tint.

Design System

Warm brand. Editorial and premium SaaS.

Amber-leaning neutrals, rust brand, amber shadows. Every surface carries the same temperature.

Warm System

Warm · #C4502A

Design System

Cool brand. Developer tools and B2B tech.

Blue-leaning neutrals, electric blue brand, blue shadows. A coherent cool field throughout.

Cool System

Cool · #2563EB

Design System

Dark mode. Tinted, not black.

Navy-dark backgrounds. Glow instead of shadow. Cool-leaning off-white text at every tier.

Dark System

Dark · #5B8DEF

Token	Warm	Cool	Dark	Purpose
--color-bg	#F7F3EE	#F4F6FA	#0F1117	Page background
--color-surface	#FDFAF7	#FAFBFD	#161B27	Card, panel
--color-border	#E8DDD2	#DDE3EE	#1E2738	Dividers, outlines
--color-text	#1A1410	#0F1520	#E8EDF5	Primary text
--color-brand	#C4502A	#2563EB	#5B8DEF	CTA, links, accents
--color-brand-subtle	#F5EAE4	#EEF3FF	#1A2540	Badges, highlights

Dark Mode. Tinted, Not Black.

Zinc-900 is a default. It has no hue and no temperature. On dark backgrounds, shadows become glows. The hairline border reads as luminance separation rather than depth.

Generic. Zinc-900. No hue.

Article

The background has no temperature

Zinc-900 and zinc-800 are perfectly neutral. No brand. No ambient direction. It looks like a browser default.

Background

#18181B · Surface: #27272A

No shadow character. No glow. Nothing to tie the surface to a brand.

Premium. Navy-dark. Clearly blue-family.

Article

The background leans somewhere

Near-black with blue-dark undertone. The surface is in the same family as the brand. The hairline glow replaces the shadow.

Background

#0F1117 · Surface: #161B27

Glow: rgba(100,140,255,0.06). Same principle. Opposite direction.

Live System. Switch Themes Above.

Every token from the article. Background, surface, border, text hierarchy, brand-subtle badge, brand-tinted shadow. The theme switcher rewires it all through CSS custom properties.

your-product.com/dashboard

Typography

Font Pairings That Actually Work

10 underrated combos free on Google Fonts. Chosen for screen fidelity and optical contrast.

10 Combos

Color

The Temperature Decision

Every neutral in this UI carries a trace of the brand hue. That is the entire secret.

Deep Dive

Design Systems

Tokens That Scale

Six tokens. Three themes. Zero pure greys. Build once and apply everywhere.

Reference

The Greyscale Test

Desaturate the screen. If hierarchy still reads, the temperature work is invisible and correct. If the design collapses, the tints were doing structural work they should not be doing. Color temperature is a layer on top of a sound greyscale system.

Click to run the greyscale test

Warm brand

Does hierarchy survive?

The amber tints carry no lightness difference. Only hue. In greyscale they disappear. Hierarchy stays.

Warm System

Cool brand

Depth without color

Blue tints are hue-only. The greyscale exposes the underlying luminance structure. It should hold.

Cool System

Dark mode

Glow as depth signal

The hairline glow creates subtle separation. In greyscale it reads as a faint luminance edge.

Dark System

Three Rules That Apply Everywhere

Never use a pure neutral

#FFFFFF, #000000, #808080 belong to no brand. Every neutral in a production token set carries a hue, even if it is just 2 percent.

Match shadow color to brand temperature

Blue brand, blue shadows. Warm brand, amber shadows. Pure black shadows belong to nothing and look like it.

Tint every interactive state

Hover, focus, active. All use brand-subtle or a more saturated surface color. Never a flat grey overlay on a tinted system.

JAVASCRIPT

CSS