BLACK
& WHITE
EVERY INTERFACE SHOULD BE
smol
Heydon
This is half true.
#000 Metal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334206/black_metal.gif)
#000 Metal
#FFF
Chocolate
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334206/black_metal.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334209/pasted-from-clipboard.png)
National
Socialist
Black Metal
+
=
Black
Metal
White
Power
Grey
Nazi
Bullshit
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334226/pasted-from-clipboard.png)
(snow is white)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334258/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334248/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334253/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334309/pasted-from-clipboard.png)
DEAD == DEAD
BOB ROSS == DEAD
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6350464/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6350478/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334313/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6794952/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334314/pasted-from-clipboard.png)
#Beadz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6433593/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6433594/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334315/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6433595/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6433598/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6433599/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6434025/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6434028/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6434031/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334334/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334335/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334347/abbath.gif)
WHY B&W
IS BEST
1. Contrast
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336030/pasted-from-clipboard.png)
Text
Text
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6335970/pasted-from-clipboard.png)
Text
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6335971/pasted-from-clipboard.png)
Text
white on white
black on black
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6335981/pasted-from-clipboard.png)
oh no
Temper that shit though
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336005/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336007/pasted-from-clipboard.png)
high contrast
low contrast
2. Night mode is really fucking easy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336030/pasted-from-clipboard.png)
: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%); }
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334314/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334314/pasted-from-clipboard.png)
night mode
!==
high contrast mode
(dark)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334314/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6334314/pasted-from-clipboard.png)
High
contrast
Also
high
contrast
3. It forces you to become color independent
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336030/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336165/pasted-from-clipboard.png)
WTF
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336165/pasted-from-clipboard.png)
WTF
WTF
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336261/white_boys.png)
WHITE IS AN
IDEOLOGY,
NOT A RACE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336180/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336187/pasted-from-clipboard.png)
info
warning
border-image: repeating-linear-gradient(-25deg,transparent,transparent 0.333rem, var(--dark) 0, var(--dark) 0.666rem) 25;
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336213/pasted-from-clipboard.png)
fill: currentColor;
falls back to a solid border
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336239/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6393960/pasted-from-clipboard.png)
Underline your fucking links you sociopaths
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6797559/pasted-from-clipboard.png)
@RianRietveld
Underline your fucking links you sociopaths
Underline your fucking links you sociopaths
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6339240/pasted-from-clipboard.png)
“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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6351319/pasted-from-clipboard.png)
Fuck
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6351319/pasted-from-clipboard.png)
Fuck
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6351319/pasted-from-clipboard.png)
Fuck
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6351319/pasted-from-clipboard.png)
Fuck
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6434311/pasted-from-clipboard.png)
4. It reduces
complexity and confusion
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336030/pasted-from-clipboard.png)
What we use colors for:
- Decoration
- Signification
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6339837/dunno.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6339846/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6339846/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6363070/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6363079/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6363090/pasted-from-clipboard.png)
5. Constraints promote
creativity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336030/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6342331/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6342331/pasted-from-clipboard.png)
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; }
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6342331/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6425094/pasted-from-clipboard.png)
.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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6425094/pasted-from-clipboard.png)
*
*
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6425123/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6399540/pasted-from-clipboard.png)
<text-l words="100, 150"></text-l>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6399540/pasted-from-clipboard.png)
<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; }
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6402604/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6371498/pasted-from-clipboard.png)
@font-face { font-family: ComedyGenius; src: local("Comic Sans MS"); unicode-range: U+0065, U+0074; } :root { font-family: ComedyGenius, Times New Roman, serif; }
Web Clerks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6339686/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6339686/pasted-from-clipboard.png)
filter: brightness(0);
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6339686/pasted-from-clipboard.png)
filter:
brightness(51%)
contrast(10000%);
6. People have opinions about colours
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/6336030/pasted-from-clipboard.png)
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
Why (short)
By heydon
Why (short)
- 2,596