├── .github
└── workflows
│ └── toc.yml
├── CONTRIBUTING.md
├── LICENSE
├── PERF.md
└── README.md
/.github/workflows/toc.yml:
--------------------------------------------------------------------------------
1 | on: push
2 | name: TOC Generator
3 | jobs:
4 | generateTOC:
5 | name: TOC Generator
6 | runs-on: ubuntu-latest
7 | steps:
8 | - uses: technote-space/toc-generator@v2
9 | with:
10 | MAX_HEADER_LEVEL: 3
11 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | feel free to open issues and PRs, but i do reserve the right to accept/reject resources based on arbitrary criteria as this thing is primarily for personal use (tho its clearly grown a bit beyond that). i'm honestly not sure what i want this to ultimately end up being yet, but i hope to have a site up someday showing all these great options.
2 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019-2022 swyx
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/PERF.md:
--------------------------------------------------------------------------------
1 | ## Perf Tools
2 |
3 | simple ways to invisibly provide joy to your user by optimizing performance.
4 |
5 | ### Image Optimization
6 |
7 | - https://tinypng.com/
8 | - https://resizeimage.net/
9 | - https://squoosh.app/ (previously https://jakearchibald.github.io/svgomg/)
10 | - https://hotpot.ai/icon_resizer Resize images and icons for iOS, Android, and other platforms.
11 |
12 | ### Sample meta tags with preconnects
13 |
14 |
15 | ```jsx
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | {/* resource hints */}
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
44 |
45 |
55 | ```
56 |
57 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | > **Easy ways to add design flair, user delight, and whimsy to your product!**
4 |
5 | _The Spark Joy philosophy is explained in further detail [in my book](https://learninpublic.org/), check it out if you'd like to explore how this approach applies to a lot more than design utilities._
6 |
7 |
8 |
9 | **Table of Contents**
10 |
11 | - [Web Design in 4 minutes](#web-design-in-4-minutes)
12 | - [CSS/UI Templates](#cssui-templates)
13 | - [Serious CSS Frameworks](#serious-css-frameworks)
14 | - [Drop-in CSS Frameworks](#drop-in-css-frameworks)
15 | - [Fun CSS Frameworks](#fun-css-frameworks)
16 | - [No Framework](#no-framework)
17 | - [CSS Resets](#css-resets)
18 | - [CSS A11y Checkers](#css-a11y-checkers)
19 | - [Tailwind Component Libraries](#tailwind-component-libraries)
20 | - [React Component Libraries](#react-component-libraries)
21 | - [Layout](#layout)
22 | - [Stacking and Elevation](#stacking-and-elevation)
23 | - [2D Spacing](#2d-spacing)
24 | - [Responsive Layout Breakpoints](#responsive-layout-breakpoints)
25 | - [Layout Bleed](#layout-bleed)
26 | - [Other Layout Tools and tips](#other-layout-tools-and-tips)
27 | - [Typography](#typography)
28 | - [Fonts](#fonts)
29 | - [Line Height](#line-height)
30 | - [Line Width](#line-width)
31 | - [Kerning and char spacing](#kerning-and-char-spacing)
32 | - [Font Sizing](#font-sizing)
33 | - [Typography Talks](#typography-talks)
34 | - [Other Typography Resources](#other-typography-resources)
35 | - [Colors](#colors)
36 | - [Palette Generators](#palette-generators)
37 | - [Color Gradients](#color-gradients)
38 | - [Color Theory](#color-theory)
39 | - [Color Theory for Data Visualization](#color-theory-for-data-visualization)
40 | - [Backgrounds](#backgrounds)
41 | - [Background Gradients and Patterns](#background-gradients-and-patterns)
42 | - [Background Illustrations](#background-illustrations)
43 | - [Background SVG texture](#background-svg-texture)
44 | - [Misc Backgroundy Stuff](#misc-backgroundy-stuff)
45 | - [Icons and Favicons](#icons-and-favicons)
46 | - [Favicons](#favicons)
47 | - [`` tags and opengraph](#link-rel-tags-and-opengraph)
48 | - [Icons](#icons)
49 | - [Diagramming](#diagramming)
50 | - [General Purpose Diagramming](#general-purpose-diagramming)
51 | - [Software Arch Diagrams](#software-arch-diagrams)
52 | - [Sequence Diagrams](#sequence-diagrams)
53 | - [Entity Relationship Diagrams](#entity-relationship-diagrams)
54 | - [Cloud Architecture diagrams](#cloud-architecture-diagrams)
55 | - [Code-based Graph tools](#code-based-graph-tools)
56 | - [Graphics and SVG Illustrations](#graphics-and-svg-illustrations)
57 | - [Wireframing](#wireframing)
58 | - [Device Mocks](#device-mocks)
59 | - [Illustrations](#illustrations)
60 | - [3D illustrations](#3d-illustrations)
61 | - [Handwritten Look](#handwritten-look)
62 | - [Pixel Art](#pixel-art)
63 | - [ASCII Art](#ascii-art)
64 | - [matrix8967's list](#matrix8967s-list)
65 | - [DIY Graphic Design](#diy-graphic-design)
66 | - [Stock Photos and Videos](#stock-photos-and-videos)
67 | - [Stock Videos](#stock-videos)
68 | - [Video creation tools](#video-creation-tools)
69 | - [Avatars](#avatars)
70 | - [Individual HTML Elements](#individual-html-elements)
71 | - [Anything But Dropdowns](#anything-but-dropdowns)
72 | - [Buttons](#buttons)
73 | - [Forms](#forms)
74 | - [Tables](#tables)
75 | - [Datepickers](#datepickers)
76 | - [Sound](#sound)
77 | - [Lightweight Charts/Dataviz](#lightweight-chartsdataviz)
78 | - [Dashboarding](#dashboarding)
79 | - [Nice React Components](#nice-react-components)
80 | - [React Toasting](#react-toasting)
81 | - [React Gamification](#react-gamification)
82 | - [Misc Weird fun stuff](#misc-weird-fun-stuff)
83 | - [Pure CSS Tricks](#pure-css-tricks)
84 | - [SVG/Canvas Masking](#svgcanvas-masking)
85 | - [Animations & Transitions](#animations--transitions)
86 | - [Loading Spinners](#loading-spinners)
87 | - [React Animation Tools](#react-animation-tools)
88 | - [Ideas for Improving UX](#ideas-for-improving-ux)
89 | - [Onboarding](#onboarding)
90 | - [Empty states](#empty-states)
91 | - [Design Software](#design-software)
92 | - [Figma](#figma)
93 | - [Sketch](#sketch)
94 | - [Generative Design Tools](#generative-design-tools)
95 | - [Non-DOM Browser Technologies](#non-dom-browser-technologies)
96 | - [Canvas](#canvas)
97 | - [WebGL](#webgl)
98 | - [3D](#3d)
99 | - [Interaction/Design Inspo](#interactiondesign-inspo)
100 | - [Game design inspo](#game-design-inspo)
101 | - [Random Stuff That Doesn't Fit Anywhere](#random-stuff-that-doesnt-fit-anywhere)
102 | - [Mock APIs](#mock-apis)
103 | - [Useful big datasets](#useful-big-datasets)
104 | - [Copy and Emails](#copy-and-emails)
105 | - [UI Design Challenges and Copywork](#ui-design-challenges-and-copywork)
106 | - [Other Lists like this one](#other-lists-like-this-one)
107 | - [Helpful podcasts/talks/articles](#helpful-podcaststalksarticles)
108 | - [More Free Stuff](#more-free-stuff)
109 | - [Paid Design Services of Note](#paid-design-services-of-note)
110 | - [Courses](#courses)
111 |
112 |
113 |
114 | ## Web Design in 4 minutes
115 |
116 | Keep it simple: https://jgthms.com/web-design-in-4-minutes/
117 |
118 | ## CSS/UI Templates
119 |
120 | HTML/CSS nice templates
121 |
122 | - 🆕 https://shuffle.dev/ tailwind/bootstrap/materialui randomly generated templates
123 | - https://www.free-css.com/
124 | - https://www.creative-tim.com/
125 | - https://wickedtemplates.com using Tailwind v2 (and [wickedblocks](https://blocks.wickedtemplates.com/)) and https://wickedbackgrounds.com/
126 | - https://www.tailwind-kit.com/ free tailwind component kit
127 | - https://daisyui.com/ tailwind theme
128 | - https://themeselection.com/
129 | - https://html5up.net/
130 | - https://frontendor.com/ using bootstrap
131 | - https://preview.tabler.io/# using bootstrap
132 | - https://cruip.com/ HTML, React, Vue.js, and Tailwind templates
133 | - https://open-props.style/ design tokens using CSS variables
134 |
135 | ### Serious CSS Frameworks
136 |
137 | #### Professional Design Systems
138 |
139 | - https://designsystemsrepo.com/
140 | - Government
141 | - G10
142 | - The UK: https://design-system.service.gov.uk/
143 | - New Zealand is heavily based https://design-system-alpha.digital.govt.nz/
144 | - The US: https://designsystem.digital.gov/
145 | - Canada: https://www.canada.ca/en/government/about/design-system.html
146 | - Russia: http://gov.design/
147 | - Australia: https://designsystemau.org/
148 | - France: https://www.systeme-de-design.gouv.fr/
149 | - Germany: https://produkt.gsb.bund.de/DE/Home/home_node.html and https://styleguide.bundesregierung.de/sg-de/
150 | - Other
151 | - Argentina: https://argob.github.io/poncho/
152 | - Greece: https://guide.services.gov.gr/
153 | - Netherlands: https://www.rijkshuisstijl.nl/
154 | - Italy: https://designers.italia.it/
155 | - Singapore: https://www.designsystem.tech.gov.sg/
156 | - Europe
157 | - Estonia: https://brand.estonia.ee/
158 | - Czech Republic: https://designsystem.gov.cz/
159 | - Ukraine: https://diia.fedoriv.com/
160 |
161 | #### Heavier CSS Frameworks
162 |
163 | bigger learning curve, may have js, but more OOTB)
164 |
165 | - [Bootstrap](https://getbootstrap.com/)
166 | - [Foundation](https://get.foundation/sites/docs/)
167 | - [Blaze UI](https://www.blazeui.com/)
168 | - [PatternFly](https://www.patternfly.org/v4)
169 | - [UIKit](https://getuikit.com/docs/introduction)
170 | - [Numl](https://numl.design/#getting-started) - A UI Design Language, UI Library of Web Components, and Runtime CSS Framework for rapidly building interfaces that follow your Design System
171 | - Utility CSS
172 | - [Bonsai CSS](https://www.bonsaicss.com/)
173 | - [Tailwindcss](https://tailwindcss.com/)
174 | - Web Components
175 | - [Weightless](https://github.com/andreasbm/weightless)
176 | - [Shoelace](https://shoelace.style/)
177 |
178 | ### Drop-in CSS Frameworks
179 |
180 | lighter, no js. **preview some of these** with https://sites.yax.com/, https://www.cssbed.com/, https://dohliam.github.io/dropin-minimal-css/ and https://github.com/dbohdan/classless-css
181 |
182 | - No CSS Classes - Pure HTML
183 | - 🌟 https://andybrewer.github.io/mvp/ mvp.css
184 | - https://yegor256.github.io/tacit/
185 | - https://github.com/alvaromontoro/almond.css has thin fonts
186 | - https://picocss.com/ Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.
187 | - https://simplecss.org/demo 4kb incl dark mode
188 | - https://watercss.kognise.dev/ Small size (< 2kb)
189 | - https://github.com/xz/new.css (https://newcss.net/) 4.8kb
190 | - https://github.com/oxalorg/sakura supports extremely easy theming using variables for duotone color scheming.
191 | - https://github.com/susam/spcss
192 | - https://neat.joeldare.com/ https://github.com/codazoda/neatcss
193 | - https://concrete.style/ Tiny (< 1kb)
194 | - https://github.com/zichy/fieber (new, wants feedback)
195 | - https://mikemai.net/typesettings/index.html (new)
196 | - https://css.winterveil.net/ magick.css is a minimalistic, (mostly) classless CSS framework that is designed to be easy to use and easy to understand. It is contained in a single file, and every choice is commented. The goal is to achieve an elegant, but magically playful look, while maximizing readability and the ability to convey information; somewhat akin to the notes of a wizard.
197 | - https://github.com/neocities/element (inactive now)
198 | - [Spectre.css](https://picturepan2.github.io/spectre/index.html) lightweight (10kb), responsive and modern CSS framework for faster and extensible development.
199 | - https://purecss.io/ A set of small (3.7kb), responsive CSS modules that you can use in every web project.
200 | - https://gdcss.netlify.app/ (inspired by UK design system)
201 | - https://ajusa.github.io/lit/ lit has two modules: lit and util. lit contains all of the basics for a framework, such as a responsive grid, typography, and other elements. util has many CSS utility classes that can be used to extend lit, or any CSS framework.
202 | - https://luxacss.com/
203 | - https://jenil.github.io/chota/ good looking, lots of classes and utilities yet small
204 | - https://chr15m.github.io/DoodleCSS/ hand drawn look
205 | - https://codepen.io/web-dot-dev/pen/abpoXGZ the base classes for web.dev/learn/csss
206 | - https://open-props.style/ css variables framework - "tailwind without tailwind"id=30497165).
207 | - https://latex.vercel.app/ style your website like a LATEX document - (original version https://github.com/davidrzs/latexcss)
208 | - https://picnicss.com/ - lightweight bootstrap alternative ([2014 HN](https://news.ycombinator.com/item?id=8315616))
209 | - https://github.com/gduverger/screen (inactive now)
210 | - Collections of even more:
211 | - https://github.com/dohliam/dropin-minimal-css
212 | - https://github.com/dbohdan/classless-css
213 | - https://github.com/ubershmekel/cssbed (https://www.cssbed.com/)
214 | - https://thesephist.github.io/paper.css/ and https://thesephist.github.io/blocks.css/
215 |
216 | Superlight: [100 bytes of css to look great nearly everywhere](https://dev.to/swyx/100-bytes-of-css-to-look-great-everywhere-19pd)
217 |
218 | ```css
219 | html {
220 | max-width: 60ch;
221 | padding: 1.5rem;
222 | margin: auto;
223 | line-height: 1.5rem;
224 | font-size: 24px;
225 | }
226 | ```
227 |
228 | see also http://bettermotherfuckingwebsite.com/
229 |
230 | ### Fun CSS Frameworks
231 |
232 | focus is fun
233 |
234 | - https://www.getpapercss.com/ (handrwritingey css similar to roughjs)
235 | - https://terminalcss.xyz/
236 |
237 | focus is brutalism
238 |
239 | - https://secretgeek.github.io/html_wysiwyg/html.html This page is a truly naked, brutalist html quine.
240 | - https://mrcoles.com/demo/markdown-css/ CSS to make HTML markup look like plain-text markdown.
241 |
242 | focus is fun/nostalgia
243 |
244 | - [NES.css](https://github.com/nostalgic-css/NES.css): NES.css is a NES-style(8bit-like) CSS Framework.
245 | - [PSone.css](https://github.com/micah5/PSone.css): PS1 style CSS Framework, inspired by NES.css.
246 | - [LaTeX.css](https://latex.now.sh/)
247 | - Operating System CSS
248 | - [React95](https://react95.github.io/React95/)
249 | - [98.css](https://github.com/jdan/98.css): A Windows 98 inspired framework for building faithful recreations of old UIs.
250 | - [Office 97 clipart in svg format](https://archive.org/details/mso97clipart)
251 | - [XP.css](https://github.com/botoxparty/XP.css): A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css.
252 | - [7.css](https://khang-nd.github.io/7.css/)
253 | - [System.css](https://sakofchit.github.io/system.css/) Retro Apple-inspired UI
254 | - [Puppertino](https://github.com/codedgar/Puppertino) meant to mimic the look of macOS. [demo](https://codedgar.github.io/Puppertino/)
255 | - [Commodore 64 CSS](http://pixelambacht.nl/2013/css3-c64/)
256 | - DOS: [BOOTSTRA.386](https://github.com/kristopolous/BOOTSTRA.386): A vintage 1980s DOS inspired Twitter Bootstrap theme
257 | - [a2k](https://a2000-docs.netlify.app/): A Windows 2000 inspired web component library
258 | - [Text UI CSS](https://github.com/vinibiavatti1/TuiCss): bios like UI's
259 | - [New Dawn](https://github.com/npjg/new-dawn): A mac classic After Dark inspired stylesheet.
260 | - [Geocities Bootstrap theme](https://code.divshot.com/geo-bootstrap/)
261 | - [Metalmorphism](https://www.metalmorphism.com): High-quality metallic UI kit
262 | - more https://dev.to/iainfreestone/10-resources-for-recreating-old-school-retro-user-interfaces-today-hkj
263 |
264 | focus in futurism
265 |
266 | - Arwes - Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps https://arwes.dev/
267 | - http://augmented-ui.com/ - Futuristic, Sci-Fi shaping for any element
268 |
269 | ### No Framework
270 |
271 | Instead of using a framework, [consider not using one](https://www.smashingmagazine.com/2022/05/you-dont-need-ui-framework/).
272 |
273 | ### CSS Resets
274 |
275 | more control in exchange for more work on your part.
276 |
277 | - eric meyer v2 https://meyerweb.com/eric/tools/css/reset/
278 | - josh comeau reset https://www.joshwcomeau.com/css/custom-css-reset/ - [Chris Coyier comments](https://css-tricks.com/notes-on-josh-comeaus-custom-css-reset/)
279 | - https://github.com/jensimmons/cssremedy css working group's reset if it didnt have to worry about tech debt
280 | - https://github.com/tiaanduplessis/nanoreset
281 | - https://nicolas-cusan.github.io/destyle.css/
282 | - https://hankchizljaw.com/wrote/a-modern-css-reset/
283 | - udpated https://andy-bell.co.uk/a-more-modern-css-reset/
284 | - commentary https://chriscoyier.net/2023/10/03/being-picky-about-a-css-reset-for-fun-pleasure/
285 | - https://gist.github.com/DavidWells/18e73022e723037a50d6
286 | - http://necolas.github.io/normalize.css/ (yes, technically does more than a reset)
287 | - https://github.com/sindresorhus/modern-normalize is a smaller version that just supports latest Chrome, Firefox, and Safari
288 | - Tailwind's https://tailwindcss.com/docs/preflight/ is built atop normalize
289 | - https://github.com/kripod/css-homogenizer - a modern take on Eric Meyer's Reset, based upon direct comparison between user agent style sheets.
290 | - Jamie Kyle CSS preset https://twitter.com/buildsghost/status/1360343126510981122?s=20
291 |
292 | ### CSS A11y Checkers
293 |
294 | - https://github.com/jackdomleo7/Checka11y.css
295 | - https://ffoodd.github.io/a11y.css/
296 | - https://github.com/mike-engel/a11y-css-reset
297 | - chrome extension https://chrome.google.com/webstore/detail/a11ycss/iolfinldndiiobhednboghogkiopppid?hl=en
298 |
299 | ### Tailwind Component Libraries
300 |
301 | - https://github.com/thedevdojo/tails
302 | - http://tailwindcomponents.com/
303 | - https://tailwindui.com/components
304 | - https://merakiui.com/
305 | - https://www.gust-ui.com/
306 | - https://flowbite.com/docs/getting-started/introduction/
307 | - https://mertjf.github.io/tailblocks/
308 | - 🌟 https://www.hyperui.dev/
309 | - Tailwind visual builder
310 | - https://devdojo.com/tails
311 | - https://shuffle.dev/
312 | - https://daisyui.com/
313 | - https://www.tailwind-kit.com/
314 |
315 | ### React Component Libraries
316 |
317 | - [Recent comparison/discussion](https://www.reddit.com/r/reactjs/comments/vtgbai/comparison_of_ui_libraries_for_react/) of:
318 | - DaisyUI
319 | - React Bootstrap
320 | - ChakraUI
321 | - Tailwind UI
322 | - Flowbite React
323 | - Material UI
324 | - https://www.tremor.so/ Simple and modular components to build dashboards in a breeze. Fully open-source, made by data scientists and software engineers with a sweet spot for design.
325 | - [Radix UI](https://www.radix-ui.com/) Unstyled, accessible components for building high‑quality design systems and web apps in React.
326 | - [Mantine](https://mantine.dev/) More than 120 customizable components and hooks to cover you in any situation.
327 | - https://nextui.org/ uses Stitches, includes light and dark UI components out-of-the-box along with a default color palette that might be good for quickly building landing pages or other content that’s not initially tied to any branding.
328 | - https://akaspanion.github.io/ui-neumorphism/
329 | - https://component.gallery/
330 | - https://headlessui.dev/
331 | - https://ui.supabase.io/
332 | - https://ui.shadcn.com/ Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
333 | - https://magicui.design/ 20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
334 | - [Fancy Components](https://www.fancycomponents.dev/) ([tweet](https://x.com/nonzeroexitcode/status/1871259468597702962))): a collection full of fancy, fun, edgy and useless React components!
335 |
336 | ## Layout
337 |
338 | ### Stacking and Elevation
339 |
340 | Good idea to have an elevation system in place. Material's is pretty good: https://material.io/design/environment/elevation.html
341 |
342 | | Component | Default elevation values (dp) |
343 | | --------------------------------------------------------- | ----------------------------- |
344 | | Dialog | 24 |
345 | | Modal bottom sheet Modal side sheet | 16 |
346 | | Navigation drawer | 16 |
347 | | Floating action button (FAB - pressed) | 12 |
348 | | Standard bottom sheet Standard side sheet | 8 |
349 | | Bottom navigation bar | 8 |
350 | | Bottom app bar | 8 |
351 | | Menus and sub menus | 8 |
352 | | Card (when picked up) | 8 |
353 | | Contained button (pressed state) | 8 |
354 | | Floating action button (FAB - resting elevation) Snackbar | 6 |
355 | | Top app bar (scrolled state) | 4 |
356 | | Top app bar (resting elevation) | 0 or 4 |
357 | | Refresh indicator Search bar (scrolled state) | 3 |
358 | | Contained button (resting elevation) | 2 |
359 | | Search bar (resting elevation) | 1 |
360 | | Card (resting elevation) | 1 |
361 | | Switch | 1 |
362 | | Text button | 0 |
363 | | Standard side sheet | 0 |
364 |
365 | More notes on FAB implementation- https://youtu.be/RXopH5t2Kww
366 |
367 | ### 2D Spacing
368 |
369 | More. Spacing. Please.
370 |
371 | [Double your whitespace](https://learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-1.html#rule-3-double-your-whitespace)
372 |
373 | ### Responsive Layout Breakpoints
374 |
375 | When in doubt, use Material Layout: https://material.io/design/layout/responsive-layout-grid.html#breakpoints
376 |
377 | | Screen size | Margin | Body | Layout columns |
378 | | ------------------- | ------- | ------- | -------------- |
379 | | Extra-small (phone) | | | |
380 | | 0-599dp | 16dp | Scaling | 4 |
381 | | Small (tablet) | | | |
382 | | 600-904 | 32dp | Scaling | 8 |
383 | | 905-1239 | Scaling | 840dp | 12 |
384 | | Medium (laptop) | | | |
385 | | 1240-1439 | 200dp | Scaling | 12 |
386 | | Large (desktop) | | | |
387 | | 1440+ | Scaling | 1040 | 12 |
388 |
389 | - https://piccalil.li/tutorial/build-a-responsive-media-browser-with-css/
390 | - [Tailwind's breakpoints](https://tailwindcss.com/docs/breakpoints) don't come with layout recommendations but here they are:
391 | - sm: 640px
392 | - md: 768px
393 | - lg: 1024px
394 | - xl: 1280px
395 | - 2xl: 1536px
396 |
397 | ### Layout Bleed
398 |
399 | A nice bleed lets you put emphasis on things selectively.
400 |
401 | You want a normal width, a popout width, and a "full bleed" width. Optional for an intermediate one.
402 |
403 | This is the best version of bleed implementation https://ryanmulligan.dev/blog/layout-breakouts/
404 | (borrows from https://joshwcomeau.com/css/full-bleed/)
405 |
406 | This is adapted to be responsive
407 |
408 | ```css
409 |
451 | ```
452 |
453 | Then you can selectively use the `popout`, `feature`, and `full` classes as needed
454 |
455 | ```css
456 | .content > * {
457 | grid-column: content;
458 | }
459 | .popout {
460 | grid-column: popout;
461 | }
462 | .feature {
463 | grid-column: feature;
464 | }
465 | .full {
466 | grid-column: full;
467 | }
468 | ```
469 |
470 | ### Other Layout Tools and tips
471 |
472 | - 🌟 https://every-layout.dev/
473 | - https://web.dev/patterns/layout/
474 | - https://gedd.ski/post/article-grid-layout/
475 | - CSS grid generator tools
476 | - https://grid.layoutit.com/
477 | - https://cssgrid-generator.netlify.app/
478 | - https://layout.bradwoods.io/
479 | - https://uisual.com/
480 | - https://csslayout.io/ ([github](https://github.com/phuoc-ng/csslayout))
481 | - Visual Hierarchy https://youtu.be/qZWDJqY27bw
482 |
483 | ## Typography
484 |
485 | typography matters! https://twitter.com/kvncnls/status/1399077512014086150?s=21
486 |
487 | ### Fonts
488 |
489 |
490 |
491 |
492 | For speed, use [System Font Stacks](https://systemfontstack.com/) (incl. Segoe and Roboto)
493 |
494 | ([what are these?](https://css-tricks.com/snippets/css/system-font-stack/))
495 | - GitHub: `font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";`
496 | - [VS Code Autocomplete](https://twitter.com/kudapara/status/1093553125661773825?s=20): `font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`
497 | - [`font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;`](https://twitter.com/_etiennemartin/status/1221114860479696896?s=20)
498 | - [`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
499 | "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;`](https://twitter.com/laurosilvacom/status/1221138641923141632)
500 | - [`font-family: ‘system-ui’, sans-serif;`](https://twitter.com/esojrafael/status/1221107296127729664?s=20)
501 | - the ['system-ui' generic font family is new, standardizing name across Safari, Firefox and Blink](https://www.chromestatus.com/feature/5640395337760768)
502 | - [StackOverflow almost-system-font stack](https://news.ycombinator.com/item?id=31544613):
503 |
504 | ```css
505 | @ff-sans:
506 | -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS
507 | "Segoe UI", // Windows
508 | "Liberation Sans", // Linux
509 | sans-serif; // The final fallback for rendering in sans-serif.
510 | @ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
511 | @ff-mono:
512 | ui-monospace, // San Francisco Mono on macOS and iOS
513 | "Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas
514 | "Liberation Mono", // Linux
515 | Menlo, Monaco, Consolas, // A few sensible system font choices
516 | monospace; // The final fallback for rendering in monospace.
517 | ```
518 |
519 | - [Sanitize.css](https://github.com/csstools/sanitize.css#typography-uses-the-default-system-font):
520 |
521 | ```css
522 | html {
523 | font-family:
524 | system-ui,
525 | /* macOS 10.11-10.12 */ -apple-system,
526 | /* Windows 6+ */ Segoe UI,
527 | /* Android 4+ */ Roboto,
528 | /* Ubuntu 10.10+ */ Ubuntu,
529 | /* Gnome 3+ */ Cantarell,
530 | /* KDE Plasma 5+ */ Noto Sans,
531 | /* fallback */ sans-serif,
532 | /* macOS emoji */ "Apple Color Emoji",
533 | /* Windows emoji */ "Segoe UI Emoji",
534 | /* Windows emoji */ "Segoe UI Symbol",
535 | /* Linux emoji */ "Noto Color Emoji";
536 | }
537 | code, kbd, pre, samp {
538 | font-family:
539 | /* macOS 10.10+ */ Menlo,
540 | /* Windows 6+ */ Consolas,
541 | /* Android 4+ */ Roboto Mono,
542 | /* Ubuntu 10.10+ */ Ubuntu Monospace,
543 | /* KDE Plasma 5+ */ Noto Mono,
544 | /* KDE Plasma 4+ */ Oxygen Mono,
545 | /* Linux/OpenOffice fallback */ Liberation Mono,
546 | /* fallback */ monospace;
547 | }
548 | ```
549 | - [Some systems come with good premium fonts](https://twitter.com/MatiasEduardoPR/status/1093508700378144768?s=20) - Apple OSes have `“avenir next”, “avenir”, “proxima-nova”`
550 |
551 |
552 |
553 | See also [Modern Font Stacks](https://modernfontstacks.com/) - [discussion](https://news.ycombinator.com/item?id=35168652)
554 |
555 | - Simple: `font-family: system-ui, -apple-system, sans-serif;` ([has issues on old browsers + asian langauges]([url](https://news.ycombinator.com/item?id=31544075) - github and bootstrap have removed it fwiw))
556 | - Sans-serif `font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;`
557 | - Serif: `font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;`
558 | - Mono: `font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;`
559 |
560 |
561 |
562 |
563 | - Consider your site personality
564 | - Elegant/Classic: serif like [`Freight Text`](https://fonts.adobe.com/fonts/freight-text), [`Adobe Garamond`](https://fonts.adobe.com/fonts/adobe-garamond), [`PT Serif`](https://fonts.google.com/specimen/PT+Serif)
565 | - Playful: rounded sans serif like [`Proxima Soft`](https://fonts.adobe.com/fonts/proxima-soft)
566 | - Plain/Safe: neutral sans serif like [`Freight Sans`](https://fonts.adobe.com/fonts/freight-sans), [`Inter`](https://rsms.me/inter/), [`Proxima Nova`](https://fonts.adobe.com/fonts/proxima-nova)
567 | - Sciency/technical: squared off (geometric) sans like [`DIN`](https://fonts.adobe.com/fonts/din-2014), [`Industry`](https://fonts.adobe.com/fonts/industry)
568 | - monospace fonts
569 | - https://devfonts.gafi.dev/
570 | - https://coding-fonts.css-tricks.com/
571 | - Programming fonts
572 | - https://www.programmingfonts.org/ ([discussion](https://news.ycombinator.com/item?id=32032029))
573 | - [14 free programming fonts](https://twitter.com/zenorocha/status/1359508613606199301?s=20)
574 | - Variable fonts: https://whirlybirdie.com/
575 | - Erik Kennedy font https://mobile.twitter.com/erikdkennedy/status/1575135945359097864
576 | - Novelty: http://velvetyne.fr/
577 | - [use a Uniwidth font (not monospace) for interface design](https://uxdesign.cc/uniwidth-typefaces-for-interface-design-b6e8078dc0f7)
578 | - Fonts have [fashions/trends](https://twitter.com/jgulden/status/1507467476807806979?s=21). current vogue is Inter.
579 | - Free fonts that are great with examples (thanks [@edadams](https://github.com/sw-yx/spark-joy/issues/22))
580 | - Google Fonts - ([see Harry Roberts on Google Font loading perf](https://csswizardry.com/2020/05/the-fastest-google-fonts/) - you should [self host this](https://wicki.io/posts/2020-11-goodbye-google-fonts/))
581 | - https://www.colorsandfonts.com/font-pairing
582 | - https://www.nngroup.com/articles/pairing-typefaces/
583 | - https://fontflipper.com/upload Just upload an image, write some sample copy. And flip through 500 Google fonts one by one.
584 | - https://bueltge.de/free-web-font-combinations/
585 | - [40 best google fonts by Typewolf](https://www.typewolf.com/google-fonts)
586 | - [50 selections of google fonts](https://www.notion.so/e873b52e0cc54f2981acc430417ba61d?v=05acdd40b0564920be69f5347f619bc3)
587 | - [Noto Sans](https://www.google.com/get/noto/)
588 | - [Fira Sans](https://fonts.google.com/specimen/Fira+Sans) - related to [Fira Code](https://github.com/tonsky/FiraCode) for devvy stuff
589 | - [Raleway](https://fonts.google.com/specimen/Raleway)
590 | - [Open Sans](https://fonts.google.com/specimen/Open+Sans)
591 | - [Recursive](https://www.recursive.design/) - 1 variable font that can handle both monospace and UI usecases, very versatile
592 | - Cavivanar https://twitter.com/atav1k/status/1178096244490723328?s=19
593 | - Jack Butcher faves
594 | - Rubik
595 | - Work Sans
596 | - IBM Plex Family (Mono, Sans, Serif)
597 | - Fontshare 50 free fonts https://www.fontshare.com/
598 | - [Erik Kennedy picks from these](https://twitter.com/erikdkennedy/status/1374382006658723840?s=20)
599 | - Premium-looking Free Fonts https://learnui.design/blog/ultimate-guide-similar-fonts.html
600 | - Apercu · Avenir · Circular · DIN · Futura · Gotham · Helvetica · Proxima Nova · Times New Roman
601 | - https://beautifulwebtype.com/
602 | - Chivo https://www.latinxswhodesign.com/
603 | - [Lato](http://www.latofonts.com/) Well known, very readable, pretty, client favorite
604 | - [Libre Franklin](https://beautifulwebtype.com/libre-franklin/) Elegant and thin
605 | - [IBM Plex Sans](https://www.ibm.com/plex/) Loads of weights, beautifully done - example: https://thesephist.com/posts/inc/
606 | - [Clear Sans](https://01.org/clear-sans)
607 | - [Atkinson Hyperlegible](https://brailleinstitute.org/freefont) from Braille institue
608 | - [Inter](https://rsms.me/inter/) [Rasmus'](https://rsms.me/) typeface carefully crafted & designed for computer screens.
609 | - [Jetbrains Mono](https://www.jetbrains.com/lp/mono/) - Monospace font for devvy stuff
610 | - Handwritten Fonts - great for presentations, annotated illustrations
611 | - https://www.urbanfonts.com/fonts/handwritten-fonts.htm
612 | - Caveat and Reenie Beanie on google fonts https://twitter.com/round/status/1178090890004455424?s=19
613 | - https://fontsarena.com/
614 | - https://uncut.wtf/ 90 typefaces with a focus on contemporary, or modern, type.
615 | - "Open Source Beautiful Fonts" [by Gontijo](https://twitter.com/gontijodesign/status/1394624373823348737)
616 | - Font Pairing
617 | - https://fontpair.co/
618 | - https://fontjoy.com/
619 | - https://fontsinuse.com/ - see how [Steve Schoger uses it](https://youtu.be/S6-q5BheEYU)
620 | - http://femmebot.github.io/google-type/
621 | - https://www.boldwebdesign.com.au/
622 | - https://justmytype.co/
623 | - https://bueltge.de/free-web-font-combinations/
624 | - Canva has a great tool: https://www.canva.com/font-combinations/
625 | - https://www.colorsandfonts.com/font-pairings
626 | - Read: https://www.nngroup.com/articles/pairing-typefaces/
627 | - [Font variants and oldstyle numbers](https://www.jonathan-harrell.com/blog/better-typography-with-font-variants/)
628 | - steve schoger blessed typekit fonts **for UI's**
629 | - proxima nova
630 | - aktiv grotesk
631 | - acumin pro
632 | - Museo Sans ([example](https://youtu.be/ZJj7uNdzPpM?t=566)) and similar from [TypeKit](https://fonts.adobe.com/fonts?browse_mode=default&filters=cl:ss,rc:p,ns:uc)
633 | - https://practicaltypography.com/system-fonts.html
634 | - https://practicaltypography.com/free-fonts.html
635 | - eye catching fun fonts
636 | - https://www.haleyfiege.fun/fonts
637 | - pixel fonts https://twitter.com/castpixel/status/1281345373336985612?s=20
638 | - CSS 3D text https://markdotto.com/playground/3d-text/
639 | - JS 3D text https://bennettfeely.com/ztext/
640 | - TypeSpiration https://typespiration.com/ premade font pairings for you
641 | - more opinions places
642 | - https://muffingroup.com/blog/best-free-fonts/
643 | - https://type-scale.com/
644 | - https://practicaltypography.com
645 | - http://thinkingwithtype.com/
646 | - https://typographyforlawyers.com/
647 | - http://webtypography.net/intro/
648 | - https://www.youtube.com/watch?v=Vd6jZR-GknA
649 | - [6 ways to justify font choices in your designs](https://learnui.design/blog/justifying-font-choices.html)
650 | - [statistical data on font usage](https://dribbble.com/stories/2021/04/26/web-design-data-fonts)
651 | - Study of best font for online reading - inconclusive https://news.ycombinator.com/item?id=31156018
652 |
653 |
654 | Premium fonts and some examples
655 |
656 | - Proxima Nova https://a16z.com/ (on Typekit)
657 | - Graphik https://type.today/en/Graphik
658 | - https://www.typewolf.com/
659 | - MD Prime - used on CSS tricks https://www.youtube.com/watch?v=mTIatvwm1MM
660 | - Arida Black (maggie's font) https://www.myfonts.com/fonts/latinotype/arida/black/
661 | - [Dank Mono](https://dank.sh/)
662 | - Tekton https://twitter.com/round/status/1178090204562968576?s=19
663 |
664 | you can learn more about proofing premium fonts here https://www.typography.com/blog/text-for-proofing-fonts
665 |
666 |
667 |
668 | #### Font Loading Strategy
669 |
670 | - https://github.com/zachleat/web-font-loading-recipes
671 | - https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/
672 | - Everything [Harry Roberts](https://twitter.com/csswizardry) writes
673 |
674 | - [Google Fonts strategy](https://csswizardry.com/2020/05/the-fastest-google-fonts/)
675 |
676 | ```html
677 |
691 |
692 |
693 |
694 |
695 |
696 |
697 |
698 |
699 |
705 |
706 |
707 |
710 | ```
711 |
712 | - `font-display: optional` [may be good](https://css-tricks.com/a-font-display-setting-for-slow-connections/)
713 | - but harry roberts [doesnt like it](https://csswizardry.com/2020/05/the-fastest-google-fonts/#comparisons-and-visualisations)
714 | - don't load fonts if `prefers-reduced-data` [see Kilian Valkhof](https://css-tricks.com/responsible-conditional-loading/)
715 |
716 | ### Line Height
717 |
718 | https://www.thegoodlineheight.com
719 |
720 | ### Line Width
721 |
722 | Don't forget setting `max-width` - betweeen 60-75chars is good.
723 |
724 | - https://pearsonified.com/characters-per-line/
725 | - https://grtcalculator.com/
726 | - https://www.charactercountonline.com/
727 | - https://charcounter.com/en/
728 |
729 | You may wish to use `max-width: 60ch` on content. [Note on the `ch` unit not being EXACTLY 60 chars](https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/)
730 |
731 | ### Kerning and char spacing
732 |
733 |
734 |
735 | Don't forget setting Leading (line height) on your h1 text and minding kerning:
736 |
737 |
738 | 
739 |
740 | - https://creativemarket.com/blog/whats-the-difference-between-leading-kerning-and-tracking
741 | - https://99designs.com/blog/tips/11-kerning-tips/
742 |
743 |
744 |
745 | When you use allcaps section titles, set the tracking (`letting-spacing`) a little wider. ([Example from Steve Schoger](https://www.youtube.com/watch?v=S6-q5BheEYU))
746 |
747 | ### Font Sizing
748 |
749 | - DON'T GO CRAZY WITH FONT SIZES. Try to use 1-2 sizes and vary other things like weight, space/leading, color, casing.
750 | - Don't rely on varying fontsize to control hierarchy - also use font weight (normal = 400/500, heavy = 600/700) and color
751 | - Don't go under font weight 400, use a lighter color or smaller fontsize instead
752 | - Fluid typography with [`clamp`](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp): `font-size: clamp(1.125rem, 1rem + 2vw, 1.5rem)`
753 | - [CSS Tricks](https://css-tricks.com/design-v18/) v18: `font-size: clamp(2rem, calc(2rem + 1.2vw), 3rem);`
754 | - Another responsive typography fallback - [`font-size: calc(1rem + 2px + ((100vw - 550px) / 250))`](https://twitter.com/Kikobeats/status/1093620157912616966?s=20) - you can [fit text to screen width](https://twitter.com/shshaw/status/1240647643388395521?s=20)
755 | - demo it with this https://fluid-typography.netlify.app/
756 | - [Inter/Tailwind font-size combo](https://twitter.com/samselikoff/status/1204412222593568769?s=20)
757 | - [BAD, SLOW fontsize calc](https://twitter.com/drewml/status/1115339490179072000?s=20)
758 | - Note: `vw` has known a11y issues: Preserve Zooming. [Sara Soueidan](https://twitter.com/SaraSoueidan/status/1121645149983891457?s=20) recommends wrapping with `calc`, e.g. `font-size: calc(16px + .3vw);`
759 | - [Complete font-size notes](https://manishearth.github.io/blog/2017/08/10/font-size-an-unexpectedly-complex-css-property/)
760 | - the `hanging-punctuation` property in CSS https://news.ycombinator.com/item?id=38441747
761 | - Establishing your own type scale https://typescale.com/
762 |
763 | ### Typography Talks
764 |
765 | - Typography for Developers (2hrs) https://www.youtube.com/watch?v=agbh1wbfJt8
766 | - Adam Argyle on Typography https://www.youtube.com/watch?v=aaro26rK61o&t=874s
767 | - Web Typography (48mins) https://www.youtube.com/watch?v=hbIZX6tE9JY
768 | 1. Don't trust computers
769 | 2. Use the default font size for paragraph text
770 | 3. Adjust type size according to reading distance
771 | 4. Adjust the font size if the typeface requires it
772 | 5. Set tables to be read
773 | 6. Resize display text as you would an image
774 | 7. Reduce your playload
775 | 8. Optimise page render timing
776 | - https://www.youtube.com/watch?v=OgsHSVsNRdg
777 |
778 | ### Other Typography Resources
779 |
780 | - 5 minute guide to Typography https://www.pierrickcalvez.com/journal/a-five-minutes-guide-to-better-typography
781 | - Typography in 10 minutes https://medium.com/nextux/become-a-typography-nerd-in-under-10-minutes-5a7eda093cb3
782 | - Quick Guide to Typography for webdevs https://sinja.io/blog/web-typography-quick-guide
783 | - typography for long form articles - https://css-tricks.com/designing-for-long-form-articles/
784 | - Font smoothing - [explained](https://szafranek.net/blog/2009/02/22/font-smoothing-explained/), [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth)
785 | - Tool for learning what fonts other people use https://fontanello.oktavilla.se/
786 | - [FlowType.js](https://simplefocus.com/flowtype/)
787 | - [FitText](https://css-tricks.com/viewport-sized-typography/)
788 | - https://wh0.github.io/glitter/ It’s a generator that produces text in a glitter-like style, which you can save as SVG. Definitely not for 99% of your projects, but a pretty cool text effect.
789 | - if all letters at the same height all caps this is called [Majuscule](https://www.wordgenius.com/words/majuscule)
790 | - International fonts stack https://www.figma.com/blog/when-fonts-fall/
791 | - In future, try out [leading-trim](https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202)
792 | - https://piccalil.li/tutorial/improve-the-readability-of-the-content-on-your-website
793 | - css podcast primer on typography https://thecsspodcast.libsyn.com/tcp036-v2
794 | - https://www.typewolf.com/checklist
795 |
796 | If building a collaborative design tool that offers font choice, see how Figma does it https://youtu.be/kVD-sjtFoEI
797 |
798 | ## Colors
799 |
800 | Pick a primary "brand" color to match your personality. [DO NOT OVERUSE IT.](https://twitter.com/steveschoger/status/1299372332579008515)
801 |
802 | - Blue: safe, familiar
803 | - Gold: expensive, sophisticated ([Examples](https://twitter.com/erikdkennedy/status/948914185596960768), [again](https://twitter.com/erikdkennedy/status/1331236629571362816?s=20))
804 | - Pink: fun, not so serious
805 |
806 | You can also have a grey for secondary content, and lighter grey for tertiary content.
807 |
808 | Don't use system default/named colors, too brutal. Soften it a bit. "[Never use black](https://ianstormtaylor.com/design-tip-never-use-black/)" has been proposed as a rule, but [this is debated](https://news.ycombinator.com/item?id=24303042).
809 |
810 | Here's a [more complete primer on color personalities](https://99designs.com/blog/tips/logo-color-meanings/) with more examples.
811 |
812 | **Mind accessibility**. 1 in 12 men and 1 in 200 women have color blindness. Make sure to check that important distinctions can be perceived.
813 |
814 | - https://twitter.com/LoanReads/status/1313974210151305218?s=20
815 | - https://www.colourblindawareness.org/colour-blindness/
816 | - use the concept of "luminance contrast" https://twitter.com/swyx/status/1351566026090053632
817 | - https://randoma11y.com/?color=springgreen
818 |
819 |
820 |
821 | Example blueish palette
822 |
823 |
824 | Monotone:
825 |
826 | - White-ish Card background: #FCFCFC
827 | - Blueish-Black icons: #1C1E20
828 | - Lighter text on white: #485963
829 | - Bluish background: #202D34
830 |
831 | Multicolor:
832 |
833 | - Black: #1d1d1d.
834 | - purple: #b066ff;
835 | - blue: #203447;
836 | - lightblue: #1f4662;
837 | - blue2: #1C2F40;
838 | - yellow: #ffc600;
839 | - pink: #EB4471;
840 | - white: #d7d7d7;
841 |
842 |
843 |
844 |
845 |
846 | You may or may not want to use generic names if you want it swappable for dark mode:
847 |
848 |
849 | Example [yellowish palette](https://codepen.io/oliviale/full/XyqQYL):
850 |
851 | - primary-light: #FFD151 mustard
852 | - primary-dark: #FFAE03 UCLA gold
853 | - secondary-success: #20A39E light sea green
854 | - secondary-warning: #EF5B5B sunset orange
855 | - secondary-info: #08D377 dark cerulean
856 | - grays: #E8E9E9, #D1D3D4, #BABDBF, #808488, #666A6D, #4D5052, #333537, #1C1D1E
857 |
858 | Examples: https://dev.to/dcodeyt/add-dark-mode-to-your-websites-with-css-5bh4
859 |
860 | **Note - THIS IS DISPUTED!!!** Even Slack's impl has separate light and dark theming.
861 |
862 | > The problem is "primary" isn't a color, it's a measure of contrast in the current context. On the same page you might have a white panel with a black button and a black panel with a white button, and both of those buttons are "primary" even though they are different colors. - [Adam Wathan](https://twitter.com/adamwathan/status/1291724757402976257?s=20)
863 |
864 |
865 |
866 | One liner dark mode (careful about perf!): `filter: invert(100%) hue-rotate(180deg);` - more [filters here](https://svelte.dev/repl/defc901c5f434ed4a76161605cf1db76?version=3.29.0)
867 |
868 | https://workos.com/blog/5-lessons-we-learned-adding-dark-mode-to-our-platform?ref=sidebar
869 |
870 | ### Palette Generators
871 |
872 | - https://atmos.style A toolbox to create better UI color palettes.
873 | - https://colorgen.dev/
874 | - https://color.adobe.com/create
875 | - https://www.colorsandfonts.com/
876 | - https://colorswall.com/
877 | - https://coolors.co/
878 | - https://colorpalettes.earth/ displays color palettes sourced from images of nature (taken from Unsplash)
879 | - https://colorsinspo.com
880 | - https://huey.design/ Rapid color palettes across the rainbow
881 | - https://duo.alexpate.uk/
882 | - https://colorhunt.co/
883 | - https://2colors.colorion.co/
884 | - https://meodai.github.io/poline/ Poline - enigmatic color palette generator
885 | - https://www.colorsandfonts.com/color-palettes
886 | - https://dribbble.com/colors/4030e8
887 | - https://palettte.app/ (advanced tool; try importing the default palettes)
888 | - https://www.paletter.app/ - Create Professional Color Palettes from a Single Color
889 | - http://colours.neilorangepeel.com/category/red/
890 | - https://www.colorbox.io (by Lyft Design https://design.lyft.com/)
891 | - Consider [darker/lighter color variations](https://learnui.design/blog/color-in-ui-design-a-practical-framework.html)
892 | - https://croncolor.com/color-tool
893 | - https://leonardocolor.io/?colorKeys=%236fa7ff&base=ffffff&ratios=3%2C4.5&mode=CAM02
894 | - https://happyhues.co/
895 | - https://www.colourlovers.com/ _recommended by Tracy Osborn_
896 | - https://flatuicolors.com/
897 | - https://colorsupplyyy.com/
898 | - [chroma.js color palette helper](https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1)
899 | - https://palx.jxnblk.com/
900 | - https://hotpot.ai/assistant/color_assistant Get suggestions for palettes, gradients, and text colors. Hit the space bar for ML-powered ideas.
901 | - https://yeun.github.io/open-color/
902 | - http://khroma.co/ neural network generated color palettes
903 | - https://learnui.design/tools/data-color-picker.html Color picker for data visualizations
904 | - https://learnui.design/tools/accessible-color-generator.html Accessible color generator
905 | - https://maketintsandshades.com/ Generate tint and shades from hex code
906 | - http://paletton.com/
907 | - Tailwind:
908 | - https://tailwind.ink/
909 | - https://www.tailwindshades.com/
910 | - https://tailwind.simeongriggs.dev
911 | - https://javisperez.github.io/tailwindcolorshades/
912 | - https://tailwind-color-picker.jessarcher.com
913 | - https://www.tints.dev/ ([HN](https://news.ycombinator.com/item?id=39227831))
914 | - Special usecases:
915 | - Mix colors in pure CSS https://css-tricks.com/mixing-colors-in-pure-css/
916 | - [HSLuv](https://www.hsluv.org/comparison/) color space is preferable to HSL. [Palette generator](https://colors.madscience.design/)
917 | - why not hsl https://wildbit.com/blog/accessible-palette-stop-using-hsl-for-color-systems
918 | - https://colors.lol/ Overly descriptive color palettes (fun)
919 | - English color names:
920 | - https://hexwords.netlify.app/
921 | - https://colornames.org/
922 | - https://c0ffee.surge.sh/
923 |
924 | ### Color Gradients
925 |
926 | Note: Default gradients often have "hard edges" that are too rough. ([example](https://twitter.com/JoshWComeau/status/1401926170589863946), [example](https://twitter.com/finmoorhouse/status/1543580508508065794?s=21&t=PBDS5C7C4FeqBA0wctOaCQ)). [Add a third color stop in the middle and boost saturation](https://twitter.com/erikdkennedy/status/1612867685192466432?s=20). You can use [esaing gradients](https://larsenwork.com/easing-gradients/) in future.
927 |
928 | - Gradient Generator https://www.learnui.design/tools/gradient-generator.html - create linear, radial, or conic gradients in 8 color spaces, all avoiding [the "gray dead zone" problem](https://css-tricks.com/the-gray-dead-zone-of-gradients/))
929 | - https://www.joshwcomeau.com/gradient-generator/
930 | - gradients https://mybrandnewlogo.com/color-gradient-generator
931 | - CSS Gradient Text https://twitter.com/argyleink/status/1281623252662489088/photo/2
932 | - 🌟 https://mycolor.space/gradient Generate a CSS Color Gradient
933 | - https://huemint.com/ Huemint uses machine learning to create unique color schemes for your brand, website or graphic
934 | - https://webgradients.com/ free collection of 180 linear gradients
935 | - https://uigradients.com/#Petrichor
936 | - https://gradient-king.vercel.app/
937 | - Adam Argyle conic CSS gradient examples https://www.conic.style/
938 | - https://www.grabient.com/
939 | - https://www.colorsandfonts.com/color-gradients
940 | - ANIMATED GRADIENTS https://www.gradient-animator.com/
941 | - Subtle gradients by bumping only saturation on HSL (thanks [argyleink](https://twitter.com/argyleink/status/1197205254623780864)) - You can [really take this to the extreme](https://twitter.com/argyleink/status/1216815958917992450?s=20)!
942 | - Tailwind
943 | - https://hypercolor.dev/
944 | - Gradient designer with interpolation in various color spaces https://akx.github.io/gradient/
945 |
946 | ### Color Theory
947 |
948 | Not tools but still important so here they are
949 |
950 | - [A Beginner’s Guide to Applying Color in UI Design](https://georgefrancis.dev/writing/a-beginners-guide-to-applying-color-in-ui-design/?ref=sidebar)
951 | - [Sarah Drasner on Color](https://css-tricks.com/nerds-guide-color-web/)
952 | - [Louisa Barret on Color](https://www.youtube.com/watch?v=NdKAUXAvt8E)
953 | - [Erik Kennedy on HSB](https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html)
954 | - [Erik Kennedy on color variations](https://learnui.design/blog/color-in-ui-design-a-practical-framework.html)
955 | - [JustinMezzell on Color](https://medium.com/@JustinMezzell/how-i-work-with-color-8439c98ae5ed) - advanced stuff on picking color tone/temperature. [Basic version by Steve Schoger](https://twitter.com/steveschoger/status/1502318105124646924)
956 | - [Justin Baker on Color Theory](https://medium.muz.li/the-ultimate-ux-guide-to-color-design-4d0a18a706ed)
957 | - [Convertkit on Color Theory](https://convertkit.com/color-theory)
958 | - [Josh Comeau on Color Palettes](https://courses.joshwcomeau.com/css-for-js/treasure-trove/014-color-palettes)
959 | - [Stripe - Designing accessible color systems](https://stripe.com/blog/accessible-color-systems)
960 | - [How to do Dark Mode right](https://darkmodedesign.xyz/)
961 | - Zeno Rocha 5 tips for dark mode https://workos.com/blog/5-lessons-we-learned-adding-dark-mode-to-our-platform?ref=sidebar
962 | - [Inventorying and naming a Color Palette at UXPin](https://medium.com/@marcintreder/design-system-sprint-2-one-color-palette-to-rule-them-all-d0114ed1f659)
963 | - [Reasoning about Color](http://notes.neeasade.net/color-spaces.html) some light reading on color spaces and transforms (eg "pastelize" operation)
964 | - [Refactoring UI on Building Your Color Palette](https://refactoringui.com/previews/building-your-color-palette/)
965 | - [Numeric systems of color palettes explained](https://n8d.at/the-numeric-colour-palettes-in-modern-web-frameworks-explained)
966 | - [Monochromatic color scheme guide](https://www.vectornator.io/blog/monochromatic-colors)
967 | - [Canva's color wheel has a color theory guide](https://www.canva.com/colors/color-wheel/)
968 | - https://youtu.be/Co75kmQtbaA
969 |
970 | - (fun) [history of primary colors](https://publicdomainreview.org/essay/primary-sources)
971 | - big list of color names: https://github.com/meodai/color-names
972 | - [RGM to Lab color space math](https://observablehq.com/@mbostock/lab-and-rgb)
973 |
974 | - (way too detailed) history and guide to color pickers https://bottosson.github.io/posts/colorpicker/
975 |
976 | ### Color Theory for Data Visualization
977 |
978 | Dataviz is a special category since it's not just design, but information. Credit to [Teej's thread](https://twitter.com/teej_m/status/1566158539868889088?s=20&t=BlqyJ1CxiiLTND7AQA0Qag).
979 |
980 | - [Color Use Guidelines for Data Representation. Cynthia Brewer. Proc. Section on Statistical Graphics, American Statistical Association, pp. 55-60, 1999. Color Scheme Explorer.](http://www.personal.psu.edu/cab38/ColorSch/ASApaper.html)
981 | - [How to pick more beautiful colors for your data visualizations. Lisa Charlotte Rost](http://idl.cs.washington.edu/papers/quantitative-color/)
982 | - [Color Use Guidelines for Data Representation - Cynthia A. Brewer](http://www.personal.psu.edu/cab38/ColorSch/ASApaper.html)
983 | - [How to pick the least wrong colors - An algorithm for creating color palettes for data visualization](https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors) - ([HN](https://news.ycombinator.com/item?id=31639009))
984 | - [Paul Tol's INTRODUCTION TO COLOUR SCHEMES](https://personal.sron.nl/~pault/)
985 | - https://blog.datawrapper.de/category/color-in-data-vis/
986 | - [How to pick more beautiful colors for your data visualizations](https://blog.datawrapper.de/beautifulcolors/)
987 | - Open source libraries
988 | - [D3 Color scales](https://github.com/d3/d3-scale-chromatic)
989 | - [Colorbrewer schemes](https://colorbrewer2.org/#type=sequential&scheme=YlOrBr&n=3)
990 | - [Matplotlib colormaps](https://matplotlib.org/stable/tutorials/colors/colormaps.html)
991 | - Books
992 | - Chapter 4: [Storytelling with Data](https://www.amazon.com/Storytelling-Data-Visualization-Business-Professionals-ebook/dp/B016DHQSM2/)
993 | - [Art + Data: A Collection of Tableau Dashboards](https://www.amazon.com/dp/0998105740/ref=cm_sw_r_apa_i_D67GCR5WN3E1AS56PJQ3_0)
994 | - [A Dictionary of Color Combinations](https://www.amazon.com/dp/4861522471/ref=cm_sw_r_api_i_WWRZD5HZMPK1PBHE79WV_0)
995 | - [Visualize This: The FlowingData Guide to Design, Visualization, and Statistics](https://www.amazon.com/Visualize-This-FlowingData-Visualization-Statistics-ebook/dp/B005CCT19M)
996 | - Misc recommended papers
997 | - [Somewhere Over the Rainbow: An Empirical Assessment of Quantitative Colormaps. Yang Liu, Jeffrey Heer. ACM CHI 2018.](http://idl.cs.washington.edu/papers/quantitative-color/)
998 | - [Colorgorical: Creating Discriminable and Preferable Color Palettes for Information Visualization. Connor Gramazio, David Laidlaw & Karen Schloss. IEEE Transactions on Visualization and Computer Graphics. 2017.](http://gramaz.io/pdf/gramazio-2016-ccd.pdf)
999 |
1000 | ## Backgrounds
1001 |
1002 | ### Background Gradients and Patterns
1003 |
1004 | Not just for background backgrounds - applying gradients and background images to text is super underrated. Examples:
1005 |
1006 | - [https://philcoffman.com/](https://user-images.githubusercontent.com/6764957/64589989-7985f500-d374-11e9-9d8a-2a8888df6981.png)
1007 | - [https://css-tricks.com/](https://user-images.githubusercontent.com/6764957/64590103-beaa2700-d374-11e9-8a84-95ab4826a577.png)
1008 | - https://magicmind.co/ very subtle texture
1009 | - https://increase.com/
1010 |
1011 | Background Radial Bursts behind images:
1012 |
1013 | - https://cssgradient.io/
1014 | - https://youtu.be/U4z-wph1NyI
1015 | - https://onepagelove.com/tag/gradients
1016 |
1017 | 
1018 |
1019 | #### Background Gradients
1020 |
1021 | Make sure to see the [Color Gradients](#color-gradients) section to generate gradients
1022 |
1023 | ```css
1024 | background-image: linear-gradient(
1025 | 120deg,
1026 | hsl(200 50% 90%) 0%,
1027 | hsl(200 100% 90%) 100%
1028 | );
1029 | ```
1030 |
1031 | Linear gradients can be "eased" to be smoother: https://css-tricks.com/easing-linear-gradients/
1032 |
1033 | - https://meshgradient.com/ swirly backgrounds like apple
1034 | - https://meshgradient.in/ generate mesh gradient backgrounds
1035 | - noise textures https://x.com/kubadesign/status/1883884665448325356/photo/1
1036 |
1037 | #### Background Patterns
1038 |
1039 | - https://trianglify.io/ low polly pattern generator
1040 | - https://leaverou.github.io/css3patterns/
1041 | - https://github.com/bansal-io/pattern.css
1042 | - http://www.heropatterns.com/ SVG Repeating Patterns Generator
1043 | - https://doodad.dev/pattern-generator/
1044 | - https://www.wowpatterns.com/free-vector-art thousands of freevector patterns, based on shapes, organic shapes as well as themes, such as animals, beach, city and people, festivals, florals etc.
1045 | - https://wickedbackgrounds.com/?ref=producthunt svg background waves
1046 | - https://www.svgbackgrounds.com/
1047 | - https://www.transparenttextures.com/
1048 | - https://www.toptal.com/designers/subtlepatterns/ (exports png though :( )
1049 | - https://www.flaticon.com/pattern/ (create a bg pattern of icons)
1050 | - https://coolbackgrounds.io/
1051 | - https://tabbied.com/ abstract Doodles with generated patterns
1052 | - https://css-doodle.com/
1053 | - https://hero-generator.netlify.app/ hero picture CSS generator
1054 | - https://www.gradientmagic.com/
1055 | - https://kumiko-generator.netlify.app/
1056 | - http://thepatternlibrary.com/
1057 | - https://msurguy.github.io/flow-lines/ produces random geometric lines, and we can adjust the formulas and distances between the shapes drawn
1058 | - http://svgbackgrounds.com/
1059 | - https://haikei.app/ - web app to generate unique SVG shapes, backgrounds, and patterns
1060 | - https://pattern.monster/ 180 patterns, and you can filter them by mode and color, and search
1061 | - http://iros.github.io/patternfills/ - plenty of black-and-white patterns, also available from the command line
1062 | - https://www.kennethcachia.com/plain-pattern/ allows you to upload an SVG shape (or use one of the existing ones) and it creates a repeating pattern which can be exported as SVG.
1063 | - http://www.patternify.com/ CSS Pattern generator that allows you to define a pattern in a 10×10 grid
1064 | - https://www.magicpattern.design/tools/css-backgrounds library of pure CSS background patterns like ZigZag or diagonal ones.
1065 | - https://bgjar.com/
1066 | - https://products.ls.graphics/paaatterns/
1067 | - https://notchr.is/patterns/ (Really simple SVG Patterns using single unicode characters.)
1068 | - https://doodad.dev/pattern-generator/ (Pattern generator that exports to png, jpg and svg.)
1069 | - https://creatica.app/backgrounds/ (Generate unique SVG Backgrounds and patterns for your websites)
1070 | - https://mossaik.app/ SVG Pattern generator, waves, and blobs.
1071 | - wave dividers
1072 | - https://www.shapedivider.app/ generate custom shape dividers
1073 | - https://svgwave.in/
1074 | - https://getwaves.io/ generate SVG waves
1075 | - https://wavelry.vercel.app/ choose between sharp, linear and smooth waves
1076 | - https://www.outpan.com/app/9aaaf27303/svg-gradient-wave-generator adjust amplitudes, smoothness, saturation and hues
1077 | - https://loading.io/background/m-wave/ generate waves, and even animate them
1078 | - https://haikei.app/ full fledged generate SVG assets, from layered waves to stacked waves and blob scenes
1079 | - svg waves generator https://codepen.io/jh3y/full/poEvKxo
1080 | - https://wweb.dev/resources/css-separator-generator
1081 |
1082 | ### Background Illustrations
1083 |
1084 | - https://freeillustrations.xyz/
1085 |
1086 | ### Background SVG texture
1087 |
1088 | - for increase.com https://twitter.com/bdc/status/1443557247813099522?s=20
1089 | - https://www.transparenttextures.com/
1090 |
1091 | ### Misc Backgroundy Stuff
1092 |
1093 | - CSS Doodle https://css-doodle.com/
1094 | - CSS backgroundy patterns https://leaverou.github.io/css3patterns/
1095 | - this guy https://twitter.com/yuanchuan23
1096 | - super advanced pokemon shiny card gradients https://github.com/simeydotme/pokemon-cards-css
1097 | - Generative Gradients http://generative-placeholders.glitch.me/
1098 | - Generateive SVG https://dev.to/georgedoescode/a-generative-svg-starter-kit-5cm1
1099 | - Image Placeholders - blurring - https://blurha.sh/ (and gatsby image and nextjs image)
1100 | - Dimming/coloring text on background images https://coder-coder.com/background-image-opacity/
1101 | - [True Grit Texture Supply](https://www.truegrittexturesupply.com/) PNG textures (paid)
1102 | - Remove backgrounds
1103 | - this is [now native in iOS/macOS](https://news.ycombinator.com/item?id=36509175)
1104 | - https://www.remove.bg/ from images - but has been monetized to shit. see below for better alternatives
1105 | - https://github.com/imgly/background-removal-js open source Background Removal in the Browser
1106 | - https://pixian.ai/remove-image-backgrounds
1107 | - https://www.photoroom.com/background-remover
1108 | - https://backgroundremoverai.com/
1109 | - source https://github.com/nadermx/backgroundremover
1110 | - https://www.inpixio.com/remove-background/
1111 | - https://express.adobe.com/tools/remove-background
1112 | - https://baseline.is/tools/background-remover/ from images
1113 | - https://www.unscreen.com/ for gif/video
1114 | - Remove ANYTHING (AMAZING)
1115 | - https://cleanup.pictures/
1116 | - https://cleanupphotos.com/
1117 | - colorizing black and white images
1118 | - https://demos.algorithmia.com/colorize-photos
1119 | - relight images https://clipdrop.co/relight https://twitter.com/dh7net/status/1567813168990232578
1120 | - edit photo in browser no BS https://edit.photo/
1121 | - AI Colorizer https://palette.fm/
1122 | - https://animatedbackgrounds.me/
1123 | - Remove backgrounds and modify faces (for photos, videos and real time camera)
1124 | - https://studio.banuba.net/, https://www.banuba.com/webar-sdk#webar-player (commercial SDK that adds teeth whitening, eye and hair color changer, and other face touch-up features).
1125 |
1126 | ## Icons and Favicons
1127 |
1128 | ### Favicons
1129 |
1130 | Don't forget them!
1131 |
1132 | - [How to Favicon in 2021](https://css-tricks.com/how-to-favicon-in-2021/)
1133 |
1134 | ```html
1135 |
1136 |
1137 |
1138 |
1139 | ```
1140 |
1141 | ```json
1142 | // manifest.webmanifest
1143 | {
1144 | "icons": [
1145 | { "src": "/192.png", "type": "image/png", "sizes": "192x192" },
1146 | { "src": "/512.png", "type": "image/png", "sizes": "512x512" }
1147 | ]
1148 | }
1149 | ```
1150 |
1151 | - [the 6 favicon types you need](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs)
1152 | - 🌟 **[Favicon InBrowser.App](https://favicon.inbrowser.app)** - A modern pure-frontend favicon generator. Support SVG, maskable and dark mode. Optimize PNG and SVG outputs.
1153 | - [Real Favicon generator](https://realfavicongenerator.net/) - pop in an image, get back a favicon! The most comprehensive one for all platforms (Windows, iOS, Android)
1154 | - [Favicon.io](https://favicon.io/) - Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats
1155 | - [FontIcon](https://gauger.io/fonticon/) - Generate favicons and images from Font Awesome icons
1156 | - [Favicon Generator](http://tools.dynamicdrive.com/favicon/) - another one
1157 | - https://textmoji.app/ small text icons meant for Slack but also can use for faviconning
1158 | - [SVG Favicon maker](https://formito.com/tools/favicon) - supports emojis and 2 letter favicons with custom fonts
1159 | - SVG favicons are modifiable by scroll percentage
1160 | - you can https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/
1161 | - put the scroll percentage! https://css-tricks.com/how-i-put-the-scroll-percentage-in-the-browser-title-bar/
1162 |
1163 | ### `` tags and opengraph
1164 |
1165 | Ideas of things you can include based on my own site.
1166 |
1167 | ```html
1168 |
1169 |
1170 |
1171 |
1172 | {frontmatter.title} ∊ swyx.io
1173 |
1174 |
1175 |
1176 |
1177 |
1178 |
1179 | {#if frontmatter.cover_image}
1180 |
1181 | {/if}
1183 |
1184 |
1185 |
1186 |
1187 |
1189 |
1190 |
1191 |
1192 |
1193 | ```
1194 |
1195 | other boilerplates to use
1196 |
1197 | - https://css-tricks.com/explain-the-first-10-lines-of-twitter-source-code/
1198 | - https://github.com/joshbuchea/HEAD
1199 | - https://www.matuzo.at/blog/html-boilerplate/
1200 | - maybe think about adding JSON+LD too.
1201 |
1202 | ### Icons
1203 |
1204 | #### Logos (incl company logos)
1205 |
1206 | - https://logosear.ch/ superfast metasearch of 200k svg logos from GitHub
1207 | - https://svgl.vercel.app/ fast search of svg logos, user submitted and categorized
1208 | - https://seeklogo.com/
1209 | - https://www.iconfinder.com/iconsets/payment-method-1
1210 | - https://www.logology.co/ We’ve designed a catalog of 500+ logos. Take a brand identity test and we’ll instantly match you with the best ones, paired with the right fonts & colors.
1211 | - https://www.svgrepo.com/ Browse 300.000+ SVG Vectors and Icons
1212 | - https://iconsear.ch/ instant search of 50k svg icons from GitHub and GitLab
1213 | - https://macosicons.com/ icons intended to replace mac desktop icons
1214 | - https://awsicons.dev/ AWS icons and https://aws-icons.com/
1215 | - https://az-icons.com/ Azure icons
1216 |
1217 | #### General & Misc
1218 |
1219 | **Important**: Note on [icon accessibility](https://css-tricks.com/accessible-svg-icons/). [Don't use icon fonts.](https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts/)
1220 |
1221 | - Icon + text: use `