BLACK
& WHITE

EVERY INTERFACE SHOULD BE

smol
Heydon

This is half true.

#000 Metal

#000 Metal

#FFF
Chocolate

National
Socialist
Black Metal

+

=

Black
Metal

White
Power

Grey
Nazi
Bullshit

(snow is white)

DEAD == DEAD
BOB ROSS == DEAD

book.inclusive-components.design

#Beadz

every-layout.dev

WHY B&W
IS BEST

1. Contrast

Text

Text

Text

Text

white on white

black on black

oh no

Temper that shit though

What Visual Illusions + Contrast can teach us about Reading Disorders

high contrast

low contrast

2. Night mode is really fucking easy

:root {
  --dark: hsla(0, 0%, 5%, 1);
  --light: hsla(0, 0%, 95%, 1);
}

.night-mode {
  --dark: hsla(0, 0%, 95%, 1);
  --light: hsla(0, 0%, 5%, 1);
}

:root {
  --dark: hsla(0, 0%, 5%, 1);
  --light: hsla(0, 0%, 95%, 1);
}

.night-mode {
  filter: invert(100%);
}

night mode
!==
high contrast mode

(dark)

High
contrast

Also
high
contrast

3. It forces you to become color independent

WTF

WTF

WTF

WHITE IS AN
IDEOLOGY,
NOT A RACE

info

warning

fill: currentColor;

falls back to a solid border

Underline your fucking links you sociopaths

@RianRietveld

Underline your fucking links you sociopaths

“a collection of things lying about in an untidy state”

noun: clutter

Underline your fucking links you sociopaths

Underline your fucking links you sociopaths

Not linked

Linked

Fuck

Fuck

Fuck

Fuck

4. It reduces
complexity and confusion

What we use colors for:

• Decoration
• Signification

5. Constraints promote
creativity

h2 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 15 10'><circle cx='5' cy='5' r='4' style="fill: black" /><polyline points='2,2 8,8' /></svg>");
  background-size: 0.125rem;
  background-repeat: repeat;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 15 10'><circle cx='5' cy='5' r='4' 
style="fill: black" /><polyline points='2,2 8,8' />
</svg>");
  background-size: 0.125rem;
  background-repeat: repeat;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

CSS-in-HTML-in-SVG-in-CSS

.box {
  clip-path: polygon(3% 5%, 90% 5%, 100% 100%, 5% 95%);
}

.box:nth-child(2n) {
  clip-path: polygon(5% 3%, 95% 0%, 100% 93%, 3% 100%);
}

.box:nth-child(3n) {
  clip-path: polygon(0% 3%, 100% 5%, 95% 100%, 0% 93%);
}

2n

2n

3n

3n

*

*

<text-l words="100, 150"></text-l>

<p>
  <span>Lorem</span>

  <span>ipsum</span>

  <span>dolor</span>

  <span>sit</span>

</p>

text-l {
  background-image: paint(zig-zag);
  color: rgba(0,0,0,0);
  --thickness: 0.25rem;
  --interval: 0.5rem;
  --proportion: 0.6;
}

for (let i = 0; i <= steps; i++) {
      ctx.lineTo(xPos, this.floatBetween(
    this.isEven(i) ? size.height * proportion : size.height * 0.5,
    this.isEven(i) ? size.height * 0.5 : size.height * (1 - proportion)
  ));
  xPos += interval;
}

odd

even

odd

even

even

odd

odd

@font-face {
  font-family: ComedyGenius;
  src: local("Comic Sans MS");
  unicode-range: U+0065, U+0074;
}

:root {
  font-family: ComedyGenius, Times New Roman, serif;
}

filter: brightness(0);

filter: 
  brightness(51%) 
  contrast(10000%);

6. People have opinions about colours

Client: The blue
color isn’t working. Can you change it to the color of glass?
 

Designer: Glass is
clear.
 

Client: There are
many colors out there, surely you can find one for glass.

Designer: Any color preferences?

Client: I like orange, but not any more or any less than other colors.

Client: Can you just use neutral colors? You know, like lime green and neon orange?

Client: The colors need to be liquid-color.
 

Designer: More vibrant? Brighter?
 

Client: No, like the colors of liquids.

Client: I want the color to be kind of a mix between black and white.

+

=

Black
Metal

White
Power

Grey
Nazi
Bullshit