⌘+\

Newslaundry

Errors:

Too large:

Terminal window
23:29:08 [404] /Video%20by%20kawshal_rai%20%5BCq0JBW4L89a%5D.mp4 82ms
23:29:08 [404] /CleanShot%202023-06-28%20at%2011.21.17.mp4 82ms
23:29:08 [404] /CleanShot%202023-06-28%20at%2011.20.32.mp4 83ms
23:29:08 [404] /Nash%20-%20More%20shared%20context%20animation%20goodness%20shipped%20with%20this%20release.%20%5B1673927375544016896%5D.mp4 83ms




Could not process image request: 158 |     this._setBooleanOption('resolveWithObject', options.resolveWithObject);
159 |   } else if (this.options.resolveWithObject) {
160 |     this.options.resolveWithObject = false;
161 |   }
162 |   this.options.fileOut = '';
163 |   const stack = Error();
                      ^
error: Processed image is too large for the WebP format
      at toBuffer (/Users/aftabparvez/Projects/haus/app/node_modules/sharp/lib/output.js:163:17)
      at transform (40:21)


23:29:20 [500] /_image 26ms

Animation

Designing Fluid Interfaces

Enhance Image Resolution: https://github.com/zsyOAOA/InvSR?tab=readme-ov-file#railway_car-online-demo

Podcast:

https://60fps.design/apps/queue

Article Layout:

Article design: https://dropbox.design/article/embracing-the-blank-space-the-2024-design-summit

  • Unicode Characters that can be used for stylistic treatment:
    • ▒▒▒▒▒▒▒▒▒▒▒
    • ║▒ ║ ║▒ ║
  • Example Usage of these ↑ elements:
<pre class="upper astro-zkj6jvuo">╔═══════════════════════════════╗
║<span class="orange astro-zkj6jvuo">   ≡≡≡  v1.1.0 OCT 2024  ≡≡≡   </span>║
║                               ║▒
║   Quick Start: ‘Life admin’   ║▒
║   <span class="orange astro-zkj6jvuo">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</span>   ║▒
║  The system that Johnny uses  ║▒
║    — get organised <em class="astro-zkj6jvuo">today</em>      ║▒
║                               ║▒
║<span class="orange astro-zkj6jvuo">   ▶  ▶     14.11      ◀  ◀    </span>║▒
╚═══════════════════════════════╝▒
 ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
  </pre>
  • ↑ code renders as: 
{
  "colors": {
    "background": {
      "hex": "#ececec",
      "rgb": "rgb(236, 236, 236)",
      "hsb": "hsb(0, 0%, 93%)",
      "hsl": "hsl(0, 0%, 93%)",
      "opengl": "rgba(0.92549, 0.92549, 0.92549, 1.0)",
      "name": "Mercury"
    },
    "sidebar": {
      "hex": "#e7e7e6",
      "rgb": "rgb(231, 231, 230)",
      "hsb": "hsb(60, 0%, 91%)",
      "hsl": "hsl(60, 2%, 90%)",
      "opengl": "rgba(0.90588, 0.90588, 0.90196, 1.0)",
      "name": "Placebo"
    }
  },
  "ratio": "1.05",
  "wcag": {
    "ratio30": false,
    "ratio45": false,
    "ratio70": false
  }
}

Mono Fonts:

  • Calling Code
  • FF Attribute Mono
  • Lexia Mono VF
  • Cartograph CF
  • Adelle Mono
  • Code Saver
  • New Science Mono
  • Antarctican Mono

Preventing Key Man Risk.

The Proud Do Not Endure. The Greatest Of Us Fall In The End.

  • Bringing Film / Cinematography to the web
    • Art of Framing | Alex Zarfati
  • Areas of Visual Rest
  • History of Graphic Design
  • The Audacity to Pursue
  • We neeed that particle flying effect.
  • Also the chapter effect of GoT is perfect for our presentation
  • Game Screenshots:
    • Ghost of Tsushima
    • God of War
    • Ori and the will of the wasps
    • Vox Machina | Lighting
  • Screenshots (Movies / TV Shows)
    • Arcane
    • Shogun
    • Spiderman SpiderVerse Spider-Verse
    • Blue Eyed Samurai
  • Process
    • Art of SoulBurn
      • Contrasts in Composition
      • Primary, Secondary and Tertiary Shapes
      • Areas of Visual Detail & Areas of Visual Rest
      • Compositional Weight
      • Layers of Light and Dark
  • Lyne Yun (Pearsons Type Design Class Week 3 (Spring 2020))
  • Atkinson Hyperlegible

Can use this for nl store:

↓

<div class="sc-beySPh vtFbr"><div class="sc-jCymJZ ioMucq"><div class="sc-beySPh hzjFQe"><div class="sc-hVpNjk bRCSWt"></div></div><div class="sc-beySPh dAtjMD"><div class="sc-beySPh femmlj"><div class="sc-gLLuof evGDWe sc-hhyKGa dJnslF" data-truncate="false" data-numeric="false" data-uppercase="false" style="color: rgb(117, 119, 124);">Tier 1</div><div class="sc-gLLuof evGDWe sc-hhyKGa dJnslF" data-truncate="true" data-numeric="false" data-uppercase="false" style="color: rgb(35, 37, 41);">Attio merch bundle</div></div></div><div class="sc-beySPh bdOBJU"><span class="sc-jzrkSW eLPVHi"></span></div><div class="sc-beySPh dEWMSB"><button type="button" class="sc-dQmiwx gNoXYi" disabled=""><div class="sc-jMbVJB dQbCOh">10 points</div></button></div></div><div class="sc-jCymJZ ioMucq"><div class="sc-beySPh hzjFQe"><div class="sc-hVpNjk eLaNbr"></div></div><div class="sc-beySPh dAtjMD"><div class="sc-beySPh femmlj"><div class="sc-gLLuof evGDWe sc-hhyKGa dJnslF" data-truncate="false" data-numeric="false" data-uppercase="false" style="color: rgb(117, 119, 124);">Tier 2</div><div class="sc-gLLuof evGDWe sc-hhyKGa dJnslF" data-truncate="true" data-numeric="false" data-uppercase="false" style="color: rgb(35, 37, 41);">Kinto coffee bundle</div></div></div><div class="sc-beySPh bdOBJU"><span class="sc-jzrkSW eLPVHi"></span></div><div class="sc-beySPh dEWMSB"><button type="button" class="sc-dQmiwx gNoXYi" disabled=""><div class="sc-jMbVJB dQbCOh">25 points</div></button></div></div><div class="sc-jCymJZ ioMucq"><div class="sc-beySPh hzjFQe"><div class="sc-hVpNjk cWhhGM"></div></div><div class="sc-beySPh dAtjMD"><div class="sc-beySPh femmlj"><div class="sc-gLLuof evGDWe sc-hhyKGa dJnslF" data-truncate="false" data-numeric="false" data-uppercase="false" style="color: rgb(117, 119, 124);">Tier 3</div><div class="sc-gLLuof evGDWe sc-hhyKGa dJnslF" data-truncate="true" data-numeric="false" data-uppercase="false" style="color: rgb(35, 37, 41);">Sonos audio bundle</div></div></div><div class="sc-beySPh bdOBJU"><span class="sc-jzrkSW eLPVHi"></span></div><div class="sc-beySPh dEWMSB"><button type="button" class="sc-dQmiwx gNoXYi" disabled=""><div class="sc-jMbVJB dQbCOh">60 points</div></button></div></div><div class="sc-jCymJZ ioMucq"><div class="sc-beySPh hzjFQe"><div class="sc-hVpNjk bztDEL"></div></div><div class="sc-beySPh dAtjMD"><div class="sc-beySPh femmlj"><div class="sc-gLLuof evGDWe sc-hhyKGa dJnslF" data-truncate="false" data-numeric="false" data-uppercase="false" style="color: rgb(117, 119, 124);">Tier 4</div><div class="sc-gLLuof evGDWe sc-hhyKGa dJnslF" data-truncate="true" data-numeric="false" data-uppercase="false" style="color: rgb(35, 37, 41);">Apple Studio Display</div></div></div><div class="sc-beySPh bdOBJU"><span class="sc-jzrkSW eLPVHi"></span></div><div class="sc-beySPh dEWMSB"><button type="button" class="sc-dQmiwx gNoXYi" disabled=""><div class="sc-jMbVJB dQbCOh">180 points</div></button></div></div></div>

https://rombo.co/tailwind/

BG color: #f5f4f2

Acquiso

https://milkshake.studio/work

Presenting work: https://milkshake.studio/project/springboard

⭐ Journalism / etc… resources

Article Body

  • Focus on Negative Space
    • induce a state of energetic repose( definition: *a state of rest*), which is the ideal condition for reading.

Typography (look into saved resources after going through foundational / fundamental things)

  • Spaces
    • Hair
    • Thin
      • Ranges
    • En
    • Em
    • Figure space????

Well-chosen words deserve well-chosen letters

  • 1.2.4 Choose a typeface or a group of faces that will honour and elucidate the character of the text.
    • This is the beginning, middle and end of the practice of typography: choose and use the type with sensitivity and intelligence.
  • typography must often draw attention to itself before it will be read. relinquish the attention it has drawn.
    • Lust text ✓
  • Dignity

analyze and maping the text:

  • Chapter Heads
  • Section Heads
  • SubHeads
  • Block Quotations
  • Footnotes
  • End Notes
  • Lists
  • Illustrative examples

Give full typographic attention even to incidental details.

  • Page Numbers,
  • Scene Numbers
  • Textual Notes
  • Copyright Claim
  • Publisher’s name
  • Address

Shaping the Page

Rhythm and Proportion

Horizontal Motion

  • Color & texture???
    • letter-spacing
    • word-spacing
    • line-height
      • line spacing/??
  • word space - ¼ em
    • spaced capitals — m/2
  • line length
    • 45 –75
  • ragged

Kern check:

Tchaikovsky, Tmolos, Tsimshian, Vazquez, Chateau d'Yquem and Ysaye

pnum

polynomial kerning tables

For the longest time — I’ve thought of a complete / cohesive branding (LUTs, Photos, Typography, etc…) — but didn’t think any one would let me. So I gave permission to do it myself.

  • External links / subscription callout - styling
  • Combine all settings into one
  • Hanging punctuation
  • Hanging Lists
  • Nova Type Foundry
    • Anona
    • Laca
    • loretta (in favor of Lust text over loretta vf)
  • OFL
    • Literata
    • Vollkorn
    • Sentient (Fontshare)

Sip Color History:

{
  "colors" : [
    {
      "hex" : "F5F6F0",
      "name" : "Spring Wood",
      "rgba" : {
        "alpha" : 100,
        "blue" : 240,
        "green" : 246,
        "red" : 245
      }
    },
    {
      "hex" : "325985",
      "name" : "St Tropaz",
      "rgba" : {
        "alpha" : 100,
        "blue" : 133,
        "green" : 89,
        "red" : 50
      }
    },
    {
      "hex" : "000000",
      "name" : "Black",
      "rgba" : {
        "alpha" : 100,
        "blue" : 0,
        "green" : 0,
        "red" : 0
      }
    },
    {
      "hex" : "3A4755",
      "name" : "Oxford Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 85,
        "green" : 71,
        "red" : 58
      }
    },
    {
      "hex" : "325A85",
      "name" : "St Tropaz",
      "rgba" : {
        "alpha" : 100,
        "blue" : 133,
        "green" : 90,
        "red" : 50
      }
    },
    {
      "hex" : "72C048",
      "name" : "Apple",
      "rgba" : {
        "alpha" : 100,
        "blue" : 72,
        "green" : 192,
        "red" : 114
      }
    },
    {
      "hex" : "101055",
      "name" : "Gulf Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 85,
        "green" : 16,
        "red" : 16
      }
    },
    {
      "hex" : "E9A93D",
      "name" : "Tulip Tree",
      "rgba" : {
        "alpha" : 100,
        "blue" : 61,
        "green" : 169,
        "red" : 233
      }
    },
    {
      "hex" : "FFBD1B",
      "name" : "Lightning Yellow",
      "rgba" : {
        "alpha" : 100,
        "blue" : 27,
        "green" : 189,
        "red" : 255
      }
    },
    {
      "hex" : "EAEBEA",
      "name" : "Lily White",
      "rgba" : {
        "alpha" : 100,
        "blue" : 234,
        "green" : 235,
        "red" : 234
      }
    },
    {
      "hex" : "F2C552",
      "name" : "Cream Can",
      "rgba" : {
        "alpha" : 100,
        "blue" : 82,
        "green" : 197,
        "red" : 242
      }
    },
    {
      "hex" : "FFC035",
      "name" : "Saffron",
      "rgba" : {
        "alpha" : 100,
        "blue" : 53,
        "green" : 192,
        "red" : 255
      }
    },
    {
      "hex" : "FF551A",
      "name" : "Giants Orange",
      "rgba" : {
        "alpha" : 100,
        "blue" : 26,
        "green" : 85,
        "red" : 255
      }
    },
    {
      "hex" : "3F2E22",
      "name" : "Cola",
      "rgba" : {
        "alpha" : 100,
        "blue" : 34,
        "green" : 46,
        "red" : 63
      }
    },
    {
      "hex" : "3B111C",
      "name" : "Rustic Red",
      "rgba" : {
        "alpha" : 100,
        "blue" : 28,
        "green" : 17,
        "red" : 59
      }
    },
    {
      "hex" : "CF0424",
      "name" : "Monza",
      "rgba" : {
        "alpha" : 100,
        "blue" : 36,
        "green" : 4,
        "red" : 207
      }
    },
    {
      "hex" : "F2F2F2",
      "name" : "Concrete",
      "rgba" : {
        "alpha" : 100,
        "blue" : 242,
        "green" : 242,
        "red" : 242
      }
    },
    {
      "hex" : "FFFFFF",
      "name" : "White",
      "rgba" : {
        "alpha" : 100,
        "blue" : 255,
        "green" : 255,
        "red" : 255
      }
    },
    {
      "hex" : "FF5444",
      "name" : "Ogre Odor",
      "rgba" : {
        "alpha" : 100,
        "blue" : 68,
        "green" : 84,
        "red" : 255
      }
    },
    {
      "hex" : "180100",
      "name" : "Diesel",
      "rgba" : {
        "alpha" : 100,
        "blue" : 0,
        "green" : 1,
        "red" : 24
      }
    },
    {
      "hex" : "D8D8D8",
      "name" : "Iron",
      "rgba" : {
        "alpha" : 100,
        "blue" : 216,
        "green" : 216,
        "red" : 216
      }
    },
    {
      "hex" : "004D40",
      "name" : "Aqua Deep",
      "rgba" : {
        "alpha" : 100,
        "blue" : 64,
        "green" : 77,
        "red" : 0
      }
    },
    {
      "hex" : "FFC83C",
      "name" : "Sunglow",
      "rgba" : {
        "alpha" : 100,
        "blue" : 60,
        "green" : 200,
        "red" : 255
      }
    },
    {
      "hex" : "F4F4F4",
      "name" : "Wild Sand",
      "rgba" : {
        "alpha" : 100,
        "blue" : 244,
        "green" : 244,
        "red" : 244
      }
    },
    {
      "hex" : "FAF4EE",
      "name" : "Fantasy",
      "rgba" : {
        "alpha" : 100,
        "blue" : 238,
        "green" : 244,
        "red" : 250
      }
    },
    {
      "hex" : "FF743D",
      "name" : "Orange",
      "rgba" : {
        "alpha" : 100,
        "blue" : 61,
        "green" : 116,
        "red" : 255
      }
    },
    {
      "hex" : "AEA1FA",
      "name" : "Biloba Flower",
      "rgba" : {
        "alpha" : 100,
        "blue" : 250,
        "green" : 161,
        "red" : 174
      }
    },
    {
      "hex" : "F9F9F9",
      "name" : "Hint of Red",
      "rgba" : {
        "alpha" : 100,
        "blue" : 249,
        "green" : 249,
        "red" : 249
      }
    },
    {
      "hex" : "FFFFFF",
      "name" : "White",
      "rgba" : {
        "alpha" : 100,
        "blue" : 255,
        "green" : 255,
        "red" : 255
      }
    },
    {
      "hex" : "D9F96C",
      "name" : "Mindaro",
      "rgba" : {
        "alpha" : 100,
        "blue" : 108,
        "green" : 249,
        "red" : 217
      }
    },
    {
      "hex" : "203A37",
      "name" : "Nordic",
      "rgba" : {
        "alpha" : 100,
        "blue" : 55,
        "green" : 58,
        "red" : 32
      }
    },
    {
      "hex" : "767548",
      "name" : "Go Ben",
      "rgba" : {
        "alpha" : 100,
        "blue" : 72,
        "green" : 117,
        "red" : 118
      }
    },
    {
      "hex" : "05313C",
      "name" : "Tiber",
      "rgba" : {
        "alpha" : 100,
        "blue" : 60,
        "green" : 49,
        "red" : 5
      }
    },
    {
      "hex" : "67D966",
      "name" : "Pastel Green",
      "rgba" : {
        "alpha" : 100,
        "blue" : 102,
        "green" : 217,
        "red" : 103
      }
    },
    {
      "hex" : "15413A",
      "name" : "Msu Green",
      "rgba" : {
        "alpha" : 100,
        "blue" : 58,
        "green" : 65,
        "red" : 21
      }
    },
    {
      "hex" : "408CF9",
      "name" : "Blueberry",
      "rgba" : {
        "alpha" : 100,
        "blue" : 249,
        "green" : 140,
        "red" : 64
      }
    },
    {
      "hex" : "000000",
      "name" : "Black",
      "rgba" : {
        "alpha" : 100,
        "blue" : 0,
        "green" : 0,
        "red" : 0
      }
    },
    {
      "hex" : "F9F8F5",
      "name" : "Desert Storm",
      "rgba" : {
        "alpha" : 100,
        "blue" : 245,
        "green" : 248,
        "red" : 249
      }
    },
    {
      "hex" : "F7F7F7",
      "name" : "Black Haze",
      "rgba" : {
        "alpha" : 100,
        "blue" : 247,
        "green" : 247,
        "red" : 247
      }
    },
    {
      "hex" : "F2F1EC",
      "name" : "Isabelline",
      "rgba" : {
        "alpha" : 100,
        "blue" : 236,
        "green" : 241,
        "red" : 242
      }
    },
    {
      "hex" : "97725F",
      "name" : "Toast",
      "rgba" : {
        "alpha" : 100,
        "blue" : 95,
        "green" : 114,
        "red" : 151
      }
    },
    {
      "hex" : "7892F5",
      "name" : "Cornflower Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 245,
        "green" : 146,
        "red" : 120
      }
    },
    {
      "hex" : "00A7F9",
      "name" : "Vivid Cerulean",
      "rgba" : {
        "alpha" : 100,
        "blue" : 249,
        "green" : 167,
        "red" : 0
      }
    },
    {
      "hex" : "FF551B",
      "name" : "Giants Orange",
      "rgba" : {
        "alpha" : 100,
        "blue" : 27,
        "green" : 85,
        "red" : 255
      }
    },
    {
      "hex" : "8EF644",
      "name" : "French Lime",
      "rgba" : {
        "alpha" : 100,
        "blue" : 68,
        "green" : 246,
        "red" : 142
      }
    },
    {
      "hex" : "6A15EC",
      "name" : "Han Purple",
      "rgba" : {
        "alpha" : 100,
        "blue" : 236,
        "green" : 21,
        "red" : 106
      }
    },
    {
      "hex" : "8FFD45",
      "name" : "French Lime",
      "rgba" : {
        "alpha" : 100,
        "blue" : 69,
        "green" : 253,
        "red" : 143
      }
    },
    {
      "hex" : "6911F2",
      "name" : "Persian Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 242,
        "green" : 17,
        "red" : 105
      }
    },
    {
      "hex" : "4C5252",
      "name" : "Cape Cod",
      "rgba" : {
        "alpha" : 100,
        "blue" : 82,
        "green" : 82,
        "red" : 76
      }
    },
    {
      "hex" : "6F7972",
      "name" : "Rolling Stone",
      "rgba" : {
        "alpha" : 100,
        "blue" : 114,
        "green" : 121,
        "red" : 111
      }
    },
    {
      "hex" : "5A6474",
      "name" : "Shuttle Gray",
      "rgba" : {
        "alpha" : 100,
        "blue" : 116,
        "green" : 100,
        "red" : 90
      }
    },
    {
      "hex" : "B69BE3",
      "name" : "Biloba Flower",
      "rgba" : {
        "alpha" : 100,
        "blue" : 227,
        "green" : 155,
        "red" : 182
      }
    },
    {
      "hex" : "B89DE5",
      "name" : "Biloba Flower",
      "rgba" : {
        "alpha" : 100,
        "blue" : 229,
        "green" : 157,
        "red" : 184
      }
    },
    {
      "hex" : "58635E",
      "name" : "River Bed",
      "rgba" : {
        "alpha" : 100,
        "blue" : 94,
        "green" : 99,
        "red" : 88
      }
    },
    {
      "hex" : "B99DE3",
      "name" : "Biloba Flower",
      "rgba" : {
        "alpha" : 100,
        "blue" : 227,
        "green" : 157,
        "red" : 185
      }
    },
    {
      "hex" : "ED9129",
      "name" : "Carrot Orange",
      "rgba" : {
        "alpha" : 100,
        "blue" : 41,
        "green" : 145,
        "red" : 237
      }
    },
    {
      "hex" : "3C1233",
      "name" : "Blackberry",
      "rgba" : {
        "alpha" : 100,
        "blue" : 51,
        "green" : 18,
        "red" : 60
      }
    },
    {
      "hex" : "221A4B",
      "name" : "Port Gore",
      "rgba" : {
        "alpha" : 100,
        "blue" : 75,
        "green" : 26,
        "red" : 34
      }
    },
    {
      "hex" : "EE9029",
      "name" : "Carrot Orange",
      "rgba" : {
        "alpha" : 100,
        "blue" : 41,
        "green" : 144,
        "red" : 238
      }
    },
    {
      "hex" : "AB5845",
      "name" : "Crail",
      "rgba" : {
        "alpha" : 100,
        "blue" : 69,
        "green" : 88,
        "red" : 171
      }
    },
    {
      "hex" : "1F1845",
      "name" : "Port Gore",
      "rgba" : {
        "alpha" : 100,
        "blue" : 69,
        "green" : 24,
        "red" : 31
      }
    },
    {
      "hex" : "4090F7",
      "name" : "Brilliant Azure",
      "rgba" : {
        "alpha" : 100,
        "blue" : 247,
        "green" : 144,
        "red" : 64
      }
    },
    {
      "hex" : "80B3F5",
      "name" : "French Sky Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 245,
        "green" : 179,
        "red" : 128
      }
    },
    {
      "hex" : "C0D7F5",
      "name" : "Tropical Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 245,
        "green" : 215,
        "red" : 192
      }
    },
    {
      "hex" : "D1EB70",
      "name" : "Mindaro",
      "rgba" : {
        "alpha" : 100,
        "blue" : 112,
        "green" : 235,
        "red" : 209
      }
    },
    {
      "hex" : "2D4744",
      "name" : "Gable Green",
      "rgba" : {
        "alpha" : 100,
        "blue" : 68,
        "green" : 71,
        "red" : 45
      }
    },
    {
      "hex" : "EF99F4",
      "name" : "Rich Brilliant Lavender",
      "rgba" : {
        "alpha" : 100,
        "blue" : 244,
        "green" : 153,
        "red" : 239
      }
    },
    {
      "hex" : "F5CCF8",
      "name" : "Shampoo",
      "rgba" : {
        "alpha" : 100,
        "blue" : 248,
        "green" : 204,
        "red" : 245
      }
    },
    {
      "hex" : "36AE8E",
      "name" : "Jungle Green",
      "rgba" : {
        "alpha" : 100,
        "blue" : 142,
        "green" : 174,
        "red" : 54
      }
    },
    {
      "hex" : "343433",
      "name" : "Jet",
      "rgba" : {
        "alpha" : 100,
        "blue" : 51,
        "green" : 52,
        "red" : 52
      }
    },
    {
      "hex" : "FCFAF9",
      "name" : "Hint of Red",
      "rgba" : {
        "alpha" : 100,
        "blue" : 249,
        "green" : 250,
        "red" : 252
      }
    },
    {
      "hex" : "161719",
      "name" : "Eerie Black",
      "rgba" : {
        "alpha" : 100,
        "blue" : 25,
        "green" : 23,
        "red" : 22
      }
    },
    {
      "hex" : "000101",
      "name" : "Black",
      "rgba" : {
        "alpha" : 100,
        "blue" : 1,
        "green" : 1,
        "red" : 0
      }
    },
    {
      "hex" : "111111",
      "name" : "Onyx",
      "rgba" : {
        "alpha" : 100,
        "blue" : 17,
        "green" : 17,
        "red" : 17
      }
    },
    {
      "hex" : "D1D3D6",
      "name" : "Light Gray",
      "rgba" : {
        "alpha" : 100,
        "blue" : 214,
        "green" : 211,
        "red" : 209
      }
    },
    {
      "hex" : "F9F9F9",
      "name" : "Hint of Red",
      "rgba" : {
        "alpha" : 100,
        "blue" : 249,
        "green" : 249,
        "red" : 249
      }
    },
    {
      "hex" : "F0BA9A",
      "name" : "Mandys Pink",
      "rgba" : {
        "alpha" : 100,
        "blue" : 154,
        "green" : 186,
        "red" : 240
      }
    },
    {
      "hex" : "FA6066",
      "name" : "Carnation",
      "rgba" : {
        "alpha" : 100,
        "blue" : 102,
        "green" : 96,
        "red" : 250
      }
    },
    {
      "hex" : "F28641",
      "name" : "Jaffa",
      "rgba" : {
        "alpha" : 100,
        "blue" : 65,
        "green" : 134,
        "red" : 242
      }
    },
    {
      "hex" : "EBA47A",
      "name" : "Fawn",
      "rgba" : {
        "alpha" : 100,
        "blue" : 122,
        "green" : 164,
        "red" : 235
      }
    },
    {
      "hex" : "F2C8B0",
      "name" : "Desert Sand",
      "rgba" : {
        "alpha" : 100,
        "blue" : 176,
        "green" : 200,
        "red" : 242
      }
    },
    {
      "hex" : "EFB796",
      "name" : "Mandys Pink",
      "rgba" : {
        "alpha" : 100,
        "blue" : 150,
        "green" : 183,
        "red" : 239
      }
    },
    {
      "hex" : "8AE096",
      "name" : "Light Green",
      "rgba" : {
        "alpha" : 100,
        "blue" : 150,
        "green" : 224,
        "red" : 138
      }
    },
    {
      "hex" : "E2712E",
      "name" : "Tahiti Gold",
      "rgba" : {
        "alpha" : 100,
        "blue" : 46,
        "green" : 113,
        "red" : 226
      }
    },
    {
      "hex" : "E1712D",
      "name" : "Tahiti Gold",
      "rgba" : {
        "alpha" : 100,
        "blue" : 45,
        "green" : 113,
        "red" : 225
      }
    },
    {
      "hex" : "D09CBF",
      "name" : "Pastel Violet",
      "rgba" : {
        "alpha" : 100,
        "blue" : 191,
        "green" : 156,
        "red" : 208
      }
    },
    {
      "hex" : "C69ABE",
      "name" : "Lilac",
      "rgba" : {
        "alpha" : 100,
        "blue" : 190,
        "green" : 154,
        "red" : 198
      }
    },
    {
      "hex" : "C69ABE",
      "name" : "Lilac",
      "rgba" : {
        "alpha" : 100,
        "blue" : 190,
        "green" : 154,
        "red" : 198
      }
    },
    {
      "hex" : "4F8081",
      "name" : "Paradiso",
      "rgba" : {
        "alpha" : 100,
        "blue" : 129,
        "green" : 128,
        "red" : 79
      }
    },
    {
      "hex" : "54827C",
      "name" : "Wintergreen Dream",
      "rgba" : {
        "alpha" : 100,
        "blue" : 124,
        "green" : 130,
        "red" : 84
      }
    },
    {
      "hex" : "568276",
      "name" : "Cutty Sark",
      "rgba" : {
        "alpha" : 100,
        "blue" : 118,
        "green" : 130,
        "red" : 86
      }
    },
    {
      "hex" : "598270",
      "name" : "Cutty Sark",
      "rgba" : {
        "alpha" : 100,
        "blue" : 112,
        "green" : 130,
        "red" : 89
      }
    },
    {
      "hex" : "5D8369",
      "name" : "Spring Leaves",
      "rgba" : {
        "alpha" : 100,
        "blue" : 105,
        "green" : 131,
        "red" : 93
      }
    },
    {
      "hex" : "5F8462",
      "name" : "Glade Green",
      "rgba" : {
        "alpha" : 100,
        "blue" : 98,
        "green" : 132,
        "red" : 95
      }
    },
    {
      "hex" : "5D8369",
      "name" : "Spring Leaves",
      "rgba" : {
        "alpha" : 100,
        "blue" : 105,
        "green" : 131,
        "red" : 93
      }
    },
    {
      "hex" : "5F8369",
      "name" : "Spring Leaves",
      "rgba" : {
        "alpha" : 100,
        "blue" : 105,
        "green" : 131,
        "red" : 95
      }
    },
    {
      "hex" : "62845E",
      "name" : "Glade Green",
      "rgba" : {
        "alpha" : 100,
        "blue" : 94,
        "green" : 132,
        "red" : 98
      }
    },
    {
      "hex" : "D19DC0",
      "name" : "Pastel Violet",
      "rgba" : {
        "alpha" : 100,
        "blue" : 192,
        "green" : 157,
        "red" : 209
      }
    },
    {
      "hex" : "D39DC2",
      "name" : "Light Medium Orchid",
      "rgba" : {
        "alpha" : 100,
        "blue" : 194,
        "green" : 157,
        "red" : 211
      }
    },
    {
      "hex" : "D09BBC",
      "name" : "Pastel Violet",
      "rgba" : {
        "alpha" : 100,
        "blue" : 188,
        "green" : 155,
        "red" : 208
      }
    },
    {
      "hex" : "C69ABE",
      "name" : "Lilac",
      "rgba" : {
        "alpha" : 100,
        "blue" : 190,
        "green" : 154,
        "red" : 198
      }
    },
    {
      "hex" : "B793BC",
      "name" : "Pastel Purple",
      "rgba" : {
        "alpha" : 100,
        "blue" : 188,
        "green" : 147,
        "red" : 183
      }
    },
    {
      "hex" : "A38EBC",
      "name" : "Cold Purple",
      "rgba" : {
        "alpha" : 100,
        "blue" : 188,
        "green" : 142,
        "red" : 163
      }
    },
    {
      "hex" : "C6AAEF",
      "name" : "Bright Ube",
      "rgba" : {
        "alpha" : 100,
        "blue" : 239,
        "green" : 170,
        "red" : 198
      }
    },
    {
      "hex" : "9F9FEB",
      "name" : "Dull Lavender",
      "rgba" : {
        "alpha" : 100,
        "blue" : 235,
        "green" : 159,
        "red" : 159
      }
    },
    {
      "hex" : "9389B6",
      "name" : "Purple Mountain's Majesty",
      "rgba" : {
        "alpha" : 100,
        "blue" : 182,
        "green" : 137,
        "red" : 147
      }
    },
    {
      "hex" : "EE8565",
      "name" : "Burnt Sienna",
      "rgba" : {
        "alpha" : 100,
        "blue" : 101,
        "green" : 133,
        "red" : 238
      }
    },
    {
      "hex" : "EC712A",
      "name" : "Vivid Tangelo",
      "rgba" : {
        "alpha" : 100,
        "blue" : 42,
        "green" : 113,
        "red" : 236
      }
    },
    {
      "hex" : "A39EE9",
      "name" : "Dull Lavender",
      "rgba" : {
        "alpha" : 100,
        "blue" : 233,
        "green" : 158,
        "red" : 163
      }
    },
    {
      "hex" : "A86539",
      "name" : "Mai Tai",
      "rgba" : {
        "alpha" : 100,
        "blue" : 57,
        "green" : 101,
        "red" : 168
      }
    },
    {
      "hex" : "AFCF75",
      "name" : "Wild Willow",
      "rgba" : {
        "alpha" : 100,
        "blue" : 117,
        "green" : 207,
        "red" : 175
      }
    },
    {
      "hex" : "9ABF73",
      "name" : "Olivine",
      "rgba" : {
        "alpha" : 100,
        "blue" : 115,
        "green" : 191,
        "red" : 154
      }
    },
    {
      "hex" : "698773",
      "name" : "Viridian Green",
      "rgba" : {
        "alpha" : 100,
        "blue" : 115,
        "green" : 135,
        "red" : 105
      }
    },
    {
      "hex" : "78A173",
      "name" : "Amulet",
      "rgba" : {
        "alpha" : 100,
        "blue" : 115,
        "green" : 161,
        "red" : 120
      }
    },
    {
      "hex" : "649275",
      "name" : "Viridian Green",
      "rgba" : {
        "alpha" : 100,
        "blue" : 117,
        "green" : 146,
        "red" : 100
      }
    },
    {
      "hex" : "608D71",
      "name" : "Viridian Green",
      "rgba" : {
        "alpha" : 100,
        "blue" : 113,
        "green" : 141,
        "red" : 96
      }
    },
    {
      "hex" : "507E70",
      "name" : "Cutty Sark",
      "rgba" : {
        "alpha" : 100,
        "blue" : 112,
        "green" : 126,
        "red" : 80
      }
    },
    {
      "hex" : "417173",
      "name" : "Ming",
      "rgba" : {
        "alpha" : 100,
        "blue" : 115,
        "green" : 113,
        "red" : 65
      }
    },
    {
      "hex" : "336373",
      "name" : "Blumine",
      "rgba" : {
        "alpha" : 100,
        "blue" : 115,
        "green" : 99,
        "red" : 51
      }
    },
    {
      "hex" : "27546D",
      "name" : "Chathams Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 109,
        "green" : 84,
        "red" : 39
      }
    },
    {
      "hex" : "1F4964",
      "name" : "Arapawa",
      "rgba" : {
        "alpha" : 100,
        "blue" : 100,
        "green" : 73,
        "red" : 31
      }
    },
    {
      "hex" : "1C4461",
      "name" : "Astronaut Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 97,
        "green" : 68,
        "red" : 28
      }
    },
    {
      "hex" : "1E4153",
      "name" : "Regal Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 83,
        "green" : 65,
        "red" : 30
      }
    },
    {
      "hex" : "484E48",
      "name" : "Armadillo",
      "rgba" : {
        "alpha" : 100,
        "blue" : 72,
        "green" : 78,
        "red" : 72
      }
    },
    {
      "hex" : "204A66",
      "name" : "Arapawa",
      "rgba" : {
        "alpha" : 100,
        "blue" : 102,
        "green" : 74,
        "red" : 32
      }
    },
    {
      "hex" : "1C4360",
      "name" : "Astronaut Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 96,
        "green" : 67,
        "red" : 28
      }
    },
    {
      "hex" : "214C68",
      "name" : "Arapawa",
      "rgba" : {
        "alpha" : 100,
        "blue" : 104,
        "green" : 76,
        "red" : 33
      }
    },
    {
      "hex" : "1E4153",
      "name" : "Regal Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 83,
        "green" : 65,
        "red" : 30
      }
    },
    {
      "hex" : "494F49",
      "name" : "Thunder",
      "rgba" : {
        "alpha" : 100,
        "blue" : 73,
        "green" : 79,
        "red" : 73
      }
    },
    {
      "hex" : "1C4461",
      "name" : "Astronaut Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 97,
        "green" : 68,
        "red" : 28
      }
    },
    {
      "hex" : "9886A7",
      "name" : "Amethyst Smoke",
      "rgba" : {
        "alpha" : 100,
        "blue" : 167,
        "green" : 134,
        "red" : 152
      }
    },
    {
      "hex" : "484F49",
      "name" : "Armadillo",
      "rgba" : {
        "alpha" : 100,
        "blue" : 73,
        "green" : 79,
        "red" : 72
      }
    },
    {
      "hex" : "FEFEFE",
      "name" : "Romance",
      "rgba" : {
        "alpha" : 100,
        "blue" : 254,
        "green" : 254,
        "red" : 254
      }
    },
    {
      "hex" : "B79BA8",
      "name" : "Lilac Luster",
      "rgba" : {
        "alpha" : 100,
        "blue" : 168,
        "green" : 155,
        "red" : 183
      }
    },
    {
      "hex" : "D97E43",
      "name" : "Raw Sienna",
      "rgba" : {
        "alpha" : 100,
        "blue" : 67,
        "green" : 126,
        "red" : 217
      }
    },
    {
      "hex" : "D27C43",
      "name" : "Raw Sienna",
      "rgba" : {
        "alpha" : 100,
        "blue" : 67,
        "green" : 124,
        "red" : 210
      }
    },
    {
      "hex" : "9C6B44",
      "name" : "Cape Palliser",
      "rgba" : {
        "alpha" : 100,
        "blue" : 68,
        "green" : 107,
        "red" : 156
      }
    },
    {
      "hex" : "3E4B47",
      "name" : "Corduroy",
      "rgba" : {
        "alpha" : 100,
        "blue" : 71,
        "green" : 75,
        "red" : 62
      }
    },
    {
      "hex" : "183D55",
      "name" : "Nile Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 85,
        "green" : 61,
        "red" : 24
      }
    },
    {
      "hex" : "5E7F7B",
      "name" : "Cutty Sark",
      "rgba" : {
        "alpha" : 100,
        "blue" : 123,
        "green" : 127,
        "red" : 94
      }
    },
    {
      "hex" : "547080",
      "name" : "Bismark",
      "rgba" : {
        "alpha" : 100,
        "blue" : 128,
        "green" : 112,
        "red" : 84
      }
    },
    {
      "hex" : "5D789C",
      "name" : "Waikawa Gray",
      "rgba" : {
        "alpha" : 100,
        "blue" : 156,
        "green" : 120,
        "red" : 93
      }
    },
    {
      "hex" : "547080",
      "name" : "Bismark",
      "rgba" : {
        "alpha" : 100,
        "blue" : 128,
        "green" : 112,
        "red" : 84
      }
    },
    {
      "hex" : "57768B",
      "name" : "Kashmir Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 139,
        "green" : 118,
        "red" : 87
      }
    },
    {
      "hex" : "5B779A",
      "name" : "Waikawa Gray",
      "rgba" : {
        "alpha" : 100,
        "blue" : 154,
        "green" : 119,
        "red" : 91
      }
    },
    {
      "hex" : "FFFFFF",
      "name" : "White",
      "rgba" : {
        "alpha" : 100,
        "blue" : 255,
        "green" : 255,
        "red" : 255
      }
    },
    {
      "hex" : "5C7D8B",
      "name" : "Hoki",
      "rgba" : {
        "alpha" : 100,
        "blue" : 139,
        "green" : 125,
        "red" : 92
      }
    },
    {
      "hex" : "C49CB7",
      "name" : "Lily",
      "rgba" : {
        "alpha" : 100,
        "blue" : 183,
        "green" : 156,
        "red" : 196
      }
    },
    {
      "hex" : "A4C675",
      "name" : "Olivine",
      "rgba" : {
        "alpha" : 100,
        "blue" : 117,
        "green" : 198,
        "red" : 164
      }
    },
    {
      "hex" : "79A374",
      "name" : "Amulet",
      "rgba" : {
        "alpha" : 100,
        "blue" : 116,
        "green" : 163,
        "red" : 121
      }
    },
    {
      "hex" : "528174",
      "name" : "Breaker Bay",
      "rgba" : {
        "alpha" : 100,
        "blue" : 116,
        "green" : 129,
        "red" : 82
      }
    },
    {
      "hex" : "204A65",
      "name" : "Arapawa",
      "rgba" : {
        "alpha" : 100,
        "blue" : 101,
        "green" : 74,
        "red" : 32
      }
    },
    {
      "hex" : "1F4355",
      "name" : "Astronaut Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 85,
        "green" : 67,
        "red" : 31
      }
    },
    {
      "hex" : "DD8044",
      "name" : "Jaffa",
      "rgba" : {
        "alpha" : 100,
        "blue" : 68,
        "green" : 128,
        "red" : 221
      }
    },
    {
      "hex" : "9D6B44",
      "name" : "Cape Palliser",
      "rgba" : {
        "alpha" : 100,
        "blue" : 68,
        "green" : 107,
        "red" : 157
      }
    },
    {
      "hex" : "3F4D49",
      "name" : "Corduroy",
      "rgba" : {
        "alpha" : 100,
        "blue" : 73,
        "green" : 77,
        "red" : 63
      }
    },
    {
      "hex" : "1C4053",
      "name" : "Regal Blue",
      "rgba" : {
        "alpha" : 100,
        "blue" : 83,
        "green" : 64,
        "red" : 28
      }
    },
    {
      "hex" : "597298",
      "name" : "Waikawa Gray",
      "rgba" : {
        "alpha" : 100,
        "blue" : 152,
        "green" : 114,
        "red" : 89
      }
    },
    {
      "hex" : "C1ADF4",
      "name" : "Biloba Flower",
      "rgba" : {
        "alpha" : 100,
        "blue" : 244,
        "green" : 173,
        "red" : 193
      }
    },
    {
      "hex" : "A19DE5",
      "name" : "Dull Lavender",
      "rgba" : {
        "alpha" : 100,
        "blue" : 229,
        "green" : 157,
        "red" : 161
      }
    },
    {
      "hex" : "261C43",
      "name" : "Tolopea",
      "rgba" : {
        "alpha" : 100,
        "blue" : 67,
        "green" : 28,
        "red" : 38
      }
    },
    {
      "hex" : "030F21",
      "name" : "Black Pearl",
      "rgba" : {
        "alpha" : 100,
        "blue" : 33,
        "green" : 15,
        "red" : 3
      }
    },
    {
      "hex" : "8A00D1",
      "name" : "French Violet",
      "rgba" : {
        "alpha" : 100,
        "blue" : 209,
        "green" : 0,
        "red" : 138
      }
    },
    {
      "hex" : "8A00D1",
      "name" : "French Violet",
      "rgba" : {
        "alpha" : 100,
        "blue" : 209,
        "green" : 0,
        "red" : 138
      }
    },
    {
      "hex" : "FFF781",
      "name" : "Faded Yellow",
      "rgba" : {
        "alpha" : 100,
        "blue" : 129,
        "green" : 247,
        "red" : 255
      }
    },
    {
      "hex" : "FFFBF6",
      "name" : "Bridal Heath",
      "rgba" : {
        "alpha" : 100,
        "blue" : 246,
        "green" : 251,
        "red" : 255
      }
    },
    {
      "hex" : "F9F3EA",
      "name" : "White Linen",
      "rgba" : {
        "alpha" : 100,
        "blue" : 234,
        "green" : 243,
        "red" : 249
      }
    },
    {
      "hex" : "09090B",
      "name" : "Cod Gray",
      "rgba" : {
        "alpha" : 100,
        "blue" : 11,
        "green" : 9,
        "red" : 9
      }
    },
    {
      "hex" : "18181B",
      "name" : "Eerie Black",
      "rgba" : {
        "alpha" : 100,
        "blue" : 27,
        "green" : 24,
        "red" : 24
      }
    },
    {
      "hex" : "E9E9ED",
      "name" : "Solitude",
      "rgba" : {
        "alpha" : 100,
        "blue" : 237,
        "green" : 233,
        "red" : 233
      }
    },
    {
      "hex" : "D6D6D6",
      "name" : "Iron",
      "rgba" : {
        "alpha" : 100,
        "blue" : 214,
        "green" : 214,
        "red" : 214
      }
    },
    {
      "hex" : "FFFFFF",
      "name" : "White",
      "rgba" : {
        "alpha" : 100,
        "blue" : 255,
        "green" : 255,
        "red" : 255
      }
    },
    {
      "hex" : "FFFFFF",
      "name" : "White",
      "rgba" : {
        "alpha" : 100,
        "blue" : 255,
        "green" : 255,
        "red" : 255
      }
    },
    {
      "hex" : "FAFAFA",
      "name" : "Alabaster",
      "rgba" : {
        "alpha" : 100,
        "blue" : 250,
        "green" : 250,
        "red" : 250
      }
    },
    {
      "hex" : "C1723F",
      "name" : "Zest",
      "rgba" : {
        "alpha" : 100,
        "blue" : 63,
        "green" : 114,
        "red" : 193
      }
    },
    {
      "hex" : "DD7421",
      "name" : "Tahiti Gold",
      "rgba" : {
        "alpha" : 100,
        "blue" : 33,
        "green" : 116,
        "red" : 221
      }
    },
    {
      "hex" : "242326",
      "name" : "Raisin Black",
      "rgba" : {
        "alpha" : 100,
        "blue" : 38,
        "green" : 35,
        "red" : 36
      }
    },
    {
      "hex" : "28272A",
      "name" : "Shark",
      "rgba" : {
        "alpha" : 100,
        "blue" : 42,
        "green" : 39,
        "red" : 40
      }
    },
    {
      "hex" : "18181A",
      "name" : "Eerie Black",
      "rgba" : {
        "alpha" : 100,
        "blue" : 26,
        "green" : 24,
        "red" : 24
      }
    },
    {
      "hex" : "09090B",
      "name" : "Cod Gray",
      "rgba" : {
        "alpha" : 100,
        "blue" : 11,
        "green" : 9,
        "red" : 9
      }
    },
    {
      "hex" : "09090B",
      "name" : "Cod Gray",
      "rgba" : {
        "alpha" : 100,
        "blue" : 11,
        "green" : 9,
        "red" : 9
      }
    },
    {
      "hex" : "09090B",
      "name" : "Cod Gray",
      "rgba" : {
        "alpha" : 100,
        "blue" : 11,
        "green" : 9,
        "red" : 9
      }
    }
  ],
  "name" : "Color History"
}

Root Styles:

[data-filter=protanopia]:where([data-theme=dark]) {
    --success-1: #0d1520;
    --success-2: #111927;
    --success-3: #0d2847;
    --success-4: #003362;
    --success-5: #004074;
    --success-6: #104d87;
    --success-7: #205d9e;
    --success-8: #2870bd;
    --success-9: #0090ff;
    --success-10: #3b9eff;
    --success-11: #70b8ff;
    --success-12: #c2e6ff;
    --danger-1: #12110f;
    --danger-2: #1c1816;
    --danger-3: #28211d;
    --danger-4: #322922;
    --danger-5: #3e3128;
    --danger-6: #4d3c2f;
    --danger-7: #614a39;
    --danger-8: #7c5f46;
    --danger-9: #ad7f58;
    --danger-10: #b88c67;
    --danger-11: #dbb594;
    --danger-12: #f2e1ca;
    --text-success-default: var(--success-12);
    --text-success-muted: var(--success-11);
    --text-danger-default: var(--danger-12);
    --text-danger-muted: var(--danger-11);
    --background-success-default: var(--success-1);
    --background-success-muted: var(--success-2);
    --background-danger-default: var(--danger-1);
    --background-danger-muted: var(--danger-2);
    --border-success-muted: var(--success-6);
    --border-success-default: var(--success-7);
    --border-success-dark: var(--success-8);
    --border-danger-muted: var(--danger-6);
    --border-danger-default: var(--danger-7);
    --border-danger-dark: var(--danger-8);
    --ring-success: var(--success-7);
    --ring-danger: var(--danger-7);
    --separator-success: var(--success-6);
    --separator-danger: var(--danger-6);
    --component-background-success-default: var(--success-3);
    --component-background-success-hover: var(--success-4);
    --component-background-success-pressed: var(--success-5);
    --component-background-success-dark: var(--success-6);
    --component-background-success-solid-default: var(--success-9);
    --component-background-success-solid-hover: var(--success-10);
    --component-background-danger-default: var(--danger-3);
    --component-background-danger-hover: var(--danger-4);
    --component-background-danger-pressed: var(--danger-5);
    --component-background-danger-dark: var(--danger-6);
    --component-background-danger-solid-default: var(--danger-9);
    --component-background-danger-solid-hover: var(--danger-10);
}
:root {
-webkit-locale: "en";
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    font-family: var(--content-font);
    --collapsed-sheet-height: 50px;
    --primary-font: "Anona", serif;
    --secondary-font: "loretta vf", sans-serif;
    --dyslexia-font: "OpenDyslexic", sans-serif;
    --fallback: "proxima-nova", sans-serif;
    --title-font: sans-serif;
    --content-font: serif;
    --container-max-width: 1200px;
    --container-padding: 15px;
    --white: #fff;
    --black: #000;
    --nero: #222;
    --light-black: #202020;
    --gray: #5a5a5a;
    --primary-color: #ec2227;
    --secondary-color: #231f20;
    --primary-color-dark: #d51014;
    --primary-color-dark1: #af0a0e;
    --nl-red: var(--primary-color);
    --nl-black: var(--secondary-color);
    --nl-gray1: var(--white);
    --nl-gray2: #616160;
    --nl-gray3: #afafaf;
    --nl-gray4: #484f59;
    --nl-gray5: #686868;
    --nl-gray6: #e1e1e1;
    --nl-gray7: #d8d8d8;
    --nl-gray8: #979797;
    --nl-gray9: #9c9c9c;
    --n1-gray10: #606060;
    --nl-gray12: #333;
    --nl-gray13: #4c4c4c;
    --nl-gray14: #818181;
    --nl-gray15: #4b4b4b;
    --nl-gray94: #f0f0f0;
    --nl-gray16: #626060;
    --nl-gray17: #4a4a4a;
    --nl-gray18: #313;
    --nl-gray19: #f9f9f9;
    --nl-gray20: #4c4a4b;
    --nl-gray21: #626262;
    --nl-gray-22: #4d4d4d;
    --nl-gray23: #9f9f9f;
    --nl-gray24: #f4f6f8;
    --lighest-gray: #f7f7f7;
    --lighter-gray: #e9e6e6;
    --close-button: #b9b5b5;
    --checkbox-color: #d0d0d0;
    --whisper: #e4e4e4;
    --sub-menu-border-color: #d9d9d9;
    --dodger-blue: #1da1f2;
    --success-color: #0f0;
    --podcast-icon-color: #3c3c3c;
    --body-bgcolor: var(--white);
    --milano-red: #af0a0e;
    --z-level-1: 100;
    --z-level-2: 200;
    --z-level-6: 600;
    --z-level-7: 700;
    --z-level-8: 800;
    --z-level-9: 900;
    --z-level-10: 1000;
    --modal: var(--z-level-9);
    --dropdown: var(--z-level-8);
    --header: var(--z-level-8);
    --menu: var(--z-level-7);
    --line: 1.6;
    --fontsize-smaller: 12px;
    --fontsize-small: 14px;
    --fontsize-base: 16px;
    --fontsize-medium: 18px;
    --fontsize-large: 20px;
    --fontsize-larger: 24px;
    --fontsize-largest: 28px;
    --fontsize-halfjumbo: 32px;
    --fontsize-jumbo: 36px;
    --fontsize-big: 44px;
    --lighter: lighter;
    --regular: normal;
    --medium: 500;
    --semi-bold: 600;
    --bold: bold;
    --bolder: bolder;
    --font-color: #231f20;
    --base: 20;
    --container-width: 1170px;
    --story-width: 700px;
    --story-vertical-rhythm: 16px;
    --breakpoint-mobile: 768px;
    --scaling: 1;
    --neutral-1: #fcfcfd;
    --neutral-2: #f9f9fb;
    --neutral-3: #f0f0f3;
    --neutral-4: #e8e8ec;
    --neutral-5: #e0e1e6;
    --neutral-6: #d9d9e0;
    --neutral-7: #cdced6;
    --neutral-8: #b9bbc6;
    --neutral-9: #8b8d98;
    --neutral-10: #80838d;
    --neutral-11: #60646c;
    --neutral-12: #1c2024;
    --accent-1: #fdfdfe;
    --accent-2: #f7f9ff;
    --accent-3: #edf2fe;
    --accent-4: #e1e9ff;
    --accent-5: #d2deff;
    --accent-6: #c1d0ff;
    --accent-7: #abbdf9;
    --accent-8: #8da4ef;
    --accent-9: #3e63dd;
    --accent-10: #3358d4;
    --accent-11: #3a5bc7;
    --accent-12: #1f2d5c;
    --success-1: #fbfefc;
    --success-2: #f4fbf6;
    --success-3: #e6f6eb;
    --success-4: #d6f1df;
    --success-5: #c4e8d1;
    --success-6: #adddc0;
    --success-7: #8eceaa;
    --success-8: #5bb98b;
    --success-9: #30a46c;
    --success-10: #2b9a66;
    --success-11: #218358;
    --success-12: #193b2d;
    --danger-1: #fffcfc;
    --danger-2: #fff7f7;
    --danger-3: #feebec;
    --danger-4: #ffdbdc;
    --danger-5: #ffcdce;
    --danger-6: #fdbdbe;
    --danger-7: #f4a9aa;
    --danger-8: #eb8e90;
    --danger-9: #e5484d;
    --danger-10: #dc3e42;
    --danger-11: #ce2c31;
    --danger-12: #641723;
    --attention-1: #fefdfb;
    --attention-2: #fefbe9;
    --attention-3: #fff7c2;
    --attention-4: #ffee9c;
    --attention-5: #fbe577;
    --attention-6: #f3d673;
    --attention-7: #e9c162;
    --attention-8: #e2a336;
    --attention-9: #ffc53d;
    --attention-10: #ffba18;
    --attention-11: #ab6400;
    --attention-12: #4f3422;
    --overlay: #000000b3;
    --text-neutral-default: var(--neutral-12);
    --text-neutral-muted: var(--neutral-11);
    --text-accent-default: var(--accent-12);
    --text-accent-muted: var(--accent-11);
    --text-success-default: var(--success-12);
    --text-success-muted: var(--success-11);
    --text-attention-default: var(--attention-12);
    --text-attention-muted: var(--attention-11);
    --text-danger-default: var(--danger-12);
    --text-danger-muted: var(--danger-11);
    --background-neutral-default: var(--neutral-1);
    --background-neutral-muted: var(--neutral-2);
    --background-accent-default: var(--accent-1);
    --background-accent-muted: var(--accent-2);
    --background-success-default: var(--success-1);
    --background-success-muted: var(--success-2);
    --background-attention-default: var(--attention-1);
    --background-attention-muted: var(--attention-2);
    --background-danger-default: var(--danger-1);
    --background-danger-muted: var(--danger-2);
    --border-neutral-muted: var(--neutral-6);
    --border-neutral-default: var(--neutral-7);
    --border-neutral-dark: var(--neutral-8);
    --border-accent-muted: var(--accent-6);
    --border-accent-default: var(--accent-7);
    --border-accent-dark: var(--accent-8);
    --border-success-muted: var(--success-6);
    --border-success-default: var(--success-7);
    --border-success-dark: var(--success-8);
    --border-attention-muted: var(--attention-6);
    --border-attention-default: var(--attention-7);
    --border-attention-dark: var(--attention-8);
    --border-danger-muted: var(--danger-6);
    --border-danger-default: var(--danger-7);
    --border-danger-dark: var(--danger-8);
    --ring-neutral: var(--neutral-7);
    --ring-accent: var(--accent-7);
    --ring-success: var(--success-7);
    --ring-attention: var(--attention-7);
    --ring-danger: var(--danger-7);
    --separator-neutral: var(--neutral-6);
    --separator-accent: var(--accent-6);
    --separator-success: var(--success-6);
    --separator-attention: var(--attention-6);
    --separator-danger: var(--danger-6);
    --component-background-neutral-default: var(--neutral-3);
    --component-background-neutral-hover: var(--neutral-4);
    --component-background-neutral-pressed: var(--neutral-5);
    --component-background-neutral-dark: var(--neutral-6);
    --component-background-neutral-solid-default: var(--neutral-9);
    --component-background-neutral-solid-hover: var(--neutral-10);
    --component-background-accent-default: var(--accent-3);
    --component-background-accent-hover: var(--accent-4);
    --component-background-accent-pressed: var(--accent-5);
    --component-background-accent-dark: var(--accent-6);
    --component-background-accent-solid-default: var(--accent-9);
    --component-background-accent-solid-hover: var(--accent-10);
    --component-background-success-default: var(--success-3);
    --component-background-success-hover: var(--success-4);
    --component-background-success-pressed: var(--success-5);
    --component-background-success-dark: var(--success-6);
    --component-background-success-solid-default: var(--success-9);
    --component-background-success-solid-hover: var(--success-10);
    --component-background-attention-default: var(--attention-3);
    --component-background-attention-hover: var(--attention-4);
    --component-background-attention-pressed: var(--attention-5);
    --component-background-attention-dark: var(--attention-6);
    --component-background-attention-solid-default: var(--attention-9);
    --component-background-attention-solid-hover: var(--attention-10);
    --component-background-danger-default: var(--danger-3);
    --component-background-danger-hover: var(--danger-4);
    --component-background-danger-pressed: var(--danger-5);
    --component-background-danger-dark: var(--danger-6);
    --component-background-danger-solid-default: var(--danger-9);
    --component-background-danger-solid-hover: var(--danger-10);
    --typography-font-size-xs: calc(12px*var(--scaling));
    --typography-font-size-sm: calc(14px*var(--scaling));
    --typography-font-size-base: calc(16px*var(--scaling));
    --typography-font-size-lg: calc(18px*var(--scaling));
    --typography-font-size-xl: calc(22px*var(--scaling));
    --typography-font-size-2xl: calc(24px*var(--scaling));
    --typography-font-size-3xl: calc(28px*var(--scaling));
    --typography-font-size-4xl: calc(36px*var(--scaling));
    --typography-font-size-5xl: calc(60px*var(--scaling));
    --typography-font-weight-light: 300;
    --typography-font-weight-regular: 400;
    --typography-font-weight-medium: 500;
    --typography-font-weight-semibold: 600;
    --typography-font-weight-bold: 700;
    --typography-font-weight-extrabold: 800;
    --typography-font-weight-black: 900;
    --typography-line-height-xs: calc(16px*var(--scaling));
    --typography-line-height-sm: calc(20px*var(--scaling));
    --typography-line-height-base: calc(24px*var(--scaling));
    --typography-line-height-lg: calc(26px*var(--scaling));
    --typography-line-height-xl: calc(28px*var(--scaling));
    --typography-line-height-2xl: calc(30px*var(--scaling));
    --typography-line-height-3xl: calc(32px*var(--scaling));
    --typography-line-height-4xl: calc(40px*var(--scaling));
    --typography-line-height-5xl: calc(60px*var(--scaling));
    --typography-heading-line-height-h6: calc(24px*var(--scaling));
    --typography-heading-line-height-h5: calc(28px*var(--scaling));
    --typography-heading-line-height-h4: calc(30px*var(--scaling));
    --typography-heading-line-height-h3: calc(32px*var(--scaling));
    --typography-heading-line-height-h2: calc(40px*var(--scaling));
    --typography-heading-line-height-h1: calc(60px*var(--scaling));
    --typography-letter-spacing-xs: 0.0025em;
    --typography-letter-spacing-sm: 0em;
    --typography-letter-spacing-base: 0em;
    --typography-letter-spacing-lg: -0.0025em;
    --typography-letter-spacing-xl: -0.005em;
    --typography-letter-spacing-2xl: -0.00625em;
    --typography-letter-spacing-3xl: -0.0075em;
    --typography-letter-spacing-4xl: -0.01em;
    --typography-letter-spacing-5xl: -0.025em;
    --space-xxs: calc(4px*var(--scaling));
    --space-xs: calc(8px*var(--scaling));
    --space-sm: calc(12px*var(--scaling));
    --space-base: calc(16px*var(--scaling));
    --space-lg: calc(24px*var(--scaling));
    --space-xl: calc(32px*var(--scaling));
    --space-2xl: calc(40px*var(--scaling));
    --space-3xl: calc(48px*var(--scaling));
    --space-4xl: calc(64px*var(--scaling));
    --cursor-default: default;
    --cursor-pointer: pointer;
    --animation-timing-default: 300ms;
    }

Chobani (BG / FG Colors):

{
  "colors": {
    "foreground": {
      "hex": "#233c34",
      "rgb": "rgb(35, 60, 52)",
      "hsb": "hsb(161, 42%, 23%)",
      "hsl": "hsl(161, 26%, 19%)",
      "opengl": "rgba(0.13699, 0.23468, 0.20344, 1.0)",
      "name": "Botanical Night"
    },
    "background": {
      "hex": "#f7f6f2",
      "rgb": "rgb(247, 246, 242)",
      "hsb": "hsb(52, 2%, 97%)",
      "hsl": "hsl(52, 21%, 96%)",
      "opengl": "rgba(0.96733, 0.96498, 0.94951, 1.0)",
      "name": "White Chalk"
    }
  },
  "ratio": "11.01",
  "wcag": {
    "ratio30": true,
    "ratio45": true,
    "ratio70": true
  }
}

Examples of Use of a vibrant Red:

Draft:

Organization

Sitemaps

newslaundry.com
    about-us
    contact-us
    terms-of-services
    privacy-policy
    privacy-payment-and-comment-policy
    grievance-redressal
    newsletter-signup
    team
    test-subscription-static-page
    testing-dm
    google8ff4e61dc6da811d.html
    podcast
        daily-dose
        the-awful-and-awesome
        nl-charcha
        nl-hafta
        outside-edge
        lets-talk-about
        nl-reads
        just-sports
        highway-on-my-podcast
        nl-playoffs
        tmr-podcast
        pakka-politics
        whats-your-ism
        mind-ki-baat
    opinion
        criticle
        she-says
        cache-22
        the-grouse-questionnaire
        no-red-lines
    media
        broken-news
        stop-press
        who-owns-your-media
        know-your-tv-news-panelists
        govt-ads
        the-siddique-kappan-chargesheet
    tv
        tv-newsance
        clothesline
        the-cleaners
        childhood-matters
        consti-tuition
        nl-documentaries
        chase
        ye-bhi-theek-hai
        back-in-time
        foe-con
        sansad-watch
        let-me-explain
        tmr-chutki
        nl-lite
        newslaundry-interviews
        the-spokespersons-take
        video-volunteers-tv
        nllite
        nl-documentaries
    articles
        economy
        inside-the-online-cult-of-justice-for-SSR
    reports
        ground-report
            up-covid-disaster
            ups-rape-epidemic
            ayodhya-whose-land-is-it-anyway
            mapping-the-maharashtra-floods
            tripura-violence
            lakhimpur-kheri-violence
            arsenic-agony
            harvest-of-lies
            malaise-in-the-system
            sunny-side-up
        long-form
        liveblog
    nl-sena
        indias-real-estate
        budget-with-vivek-kaul
        left-vs-right-battleground-kerala
        the-economics-of-post-covid-india
        chhattisgarhs-adivasi-prisoners
        investigating-the-delhi-riots
        indias-custodial-deaths
        bihar-election-2020
        disastrous-consequences
        love-jihad-myth-vs-reality
        hathras-case
        on-a-godmans-trail
        decoding-covid-data
        the-hills-suffer-joshimath-and-beyond
        ways-to-disappear
        press-freedom-fund
        the-anatomy-of-manipur-violence
        himalayan-blunders
        monu-manesars-video-profile
        the-yogi-who-has-it-all
        bulldozing-a-new-image-in-mp
        cauvery-chronicels
        haryana-and-j-and-k-polls
        neet-but-not-clean
        power-sreenivasan-jains-show
        the-new-ayodhya
        assembly-elections-2021
            goa-2022
            punjab-2022
            manipur-2022
            uttar-pradesh-2022
            uttarakhand-2022
        assembly-elections-2022
        gujarat-and-himachal-elections
            himachal-pradesh-2022
            gujarat-2022
        karnataka-elections-2023
        idea-of-india
        modi-20-report-card
        ballot-bucks
        poll-watchdogs
        battleground-states
        gendered-polls
        another-election-show
    nl-tnm-election-fund
        mizoram-2023
        chhattisgarh-2023
        telangana-2023
        rajasthan-2023
        madhya-pradesh-2023
    events
        nl-chatbox
        nl-recess
        the-media-rumble
            tmr-2023
            tmr-2022
            tmr-2021
            tmr-2020
            tmr-2019
            tmr-2018
            tmr-2017
            tmr-2016
    analysis
        2020-in-review
        2021-in-review
        2022-in-review
        2023-in-review
        inside-america-2024
    comicles
        cartoons
        comics
            achhe-din
            naxalbari-comic
            loony-laws
            kashmir-ki-kahani
            so-sketchy
            life
            manmohan-ki-khamoshi
            rashtraman
            the-khushwant-singh-lit-fest
            planet-mamata
            brotips-from-babasaheb
            the-dystopian-times
            a-day-in-the-life-of-ambedkar
            the-nations-little-princess
            raj-thackeray-bombay-superstar
            karan-thapar-in-school
            exalted-editor
            jholawala-journos
            devils-advocate
            dilli-police
            bird-o-lution
            didi-in-distress
            competing-with-china
            yes-boss
            khurshid-ki-adalat
            sachin
            a-day-in-the-life-of-ambedkar
            the-nations-little-princess
            raj-thackeray-bombay-superstar
            karan-thapar-in-school
            exalted-editor
            jholawala-journos
            devils-advocate
            dilli-police
    we-have-got-mail
    first-person
    delhi-digital
    the-patriot
    science-desk
    explainer
    reporters-without-orders
    whats-playing
    photo-essay
    subscriber-only
    exclusive-2
    fact-check
    nl-collaborations
    social-media
    whats-new-at-nl
    nl-cheatsheet
    obituary
    satire
    jnu
    books
    elections-with-nl
    bloodlust-tv
    tmr-fellowship
    the-party-line
    factly
    the-third-slip
    nl-reviews
    nl-tippani
    quiz
    unwind
    timeline
    facebook-live
    conflict-of-interest
    corrigendum
    why-so-serious
    fake-book-modi
    shutter-box
    nl-campaign
    promos
        coming-soon
    odd-even
    caption-contest
    the-year-in-hashtags
    the-politics-of-comedy
    video-volunteers
    wordcloud
    election-wash
    manifesto
    musicvideos
    the-humourists
    dhobi-ghat
    chachas-bulletin
    teevee-chunks
    security-matters
    shot
    nl-recommendation
    delhi-election-2020
    film-review
    coronavirus
        covid-19-economic-fallout
        navigating-the-second-wave
        up-covid-disaster
        uttar-pradesh-coronavirus
        maharashtra-covid-crisis
        rajasthan-coronavirus
        maharashtra-coronavirus
    nl-legal-fund
    the-arnab-partho-chats
    budget-2021
    khabar-baazi
    newslaundry-explained
    central-vista
    company
    careers
hindi.newslaundry.com
    about-us
    contact-us
    terms-of-services
    privacy-policy
    privacy-payment-and-comment-policy
    grievance-redressal
    newsletter-signup
    team
    sena
        indias-real-estate
        godman-series
        press-freedom-fund-hindi
        the-anatomy-of-manipur-violence-hindi
        himalayan-blunders-hindi
        karnataka-election-2023-nl-hindi
        Ways-to-Disappear-nl-hindi
        chhattisgarh-elections-2023
        madhya-pradesh-elections-2023
        mizoram-elections-2023
        telangana-elections-2023
        rajasthan-elections-2023
    podcast
        nl-charcha
        news-potli
        nl-conversation
    video
        nl-tippani
        nl-interviews
        ground-report-videos
        cheatsheet-videos
    columns
        film-laundry
        pakshakarita
    report
        ground-report
        bihar-elections
    cheatsheet
    susbcriber-only
    assembly-elections
    love-jihad
    corona-virus
        uttar-pradesh-coronavirus
        rajasthan-coronavirus
        maharashtra-coronavirus
    obituary
    what's-new-at-nl-newslaundry-hindi
    book-review
    so-sketchy
    newslaundry-explained
    year-ender-2021
    aravalli
    arsenic-documentary
    another-election-show
    assembly-elections-2022
    know-your-turncoats
    harvest-of-lies
    political-funding
    NL-TNM-2024-election-fund
    policy
    terms
    careers
    privacy-policy
    contact-us

This page’s design: Career | Kontrapunkt

https://www.threads.net/@chris/post/DARRZZ-q5Bg?xmt=AQGzzBYNOJiFyszB0jxCXoSy4L_6HREokOmxbH91oQDdYA

Web Design Inspo:

Great site (logo + Typeface usage (Condensed)): https://www.stridehealth.com

If opportunity doesn’t knock — build a door.

--heading-font: "Basier","Gelica","Mestiza","Taviraj","Utile","Trade Gothic Next LT Pro","Stevie Sans","Schibsted Grotesk","Ronzino","Neue Haas Grotesk Display Pro","Nacelle","Mestiza","Massilia","Loretta","Libre Franklin","LFT Etica","Instrument Sans", "Gal Gothic Variable","FreightNeo Pro","FranklinGothic URW","Forma DJR Text","Etna","Embury Text","FreightText Variable", serif;


--body-font: "Proxima Sera", "Novela","Fabric Serif","Lust Text","SN Pro","Henriette","Viroqua", "Kopius","FF Casus","IvyJournal","Bagatela","Capitolina","Skolar Latin","Mestiza Sans","Fraunces","Source Serif 4","Utile","Stevie Sans","Public Sans","Neue Haas Unica W1G","LFT Etica","Instrument Sans","Elza Text","Franklin Gothic ATF","FranklinGothic URW","Americane","Alliance","Aktiv Grotesk", sans-serif;

Heading Fonts

  • Basier
  • Gelica
  • Mestiza
  • Taviraj
  • Utile
  • Trade Gothic Next LT Pro
  • Stevie Sans
  • Schibsted Grotesk
  • Ronzino
  • Neue Haas Grotesk Display Pro
  • Nacelle
  • Massilia
  • Loretta
  • Libre Franklin
  • LFT Etica
  • Instrument Sans
  • Gal Gothic Variable
  • FreightNeo Pro
  • FranklinGothic URW
  • Forma DJR Text
  • Etna
  • Embury Text

Body Fonts

  • Proxima Sera
  • Fabric Serif — paid.
  • Lust Text
  • SN Pro
  • Henriette
  • Bagatela
  • Kopius
  • Mestiza Sans
  • Utile
  • Public Sans
  • Neue Haas Unica W1G
  • LFT Etica — this might works for tags / small text.
  • Elza Text
  • Franklin Gothic ATF
  • FranklinGothic URW
  • Americane
  • Alliance
  • Aktiv Grotesk
  • Alverta
  • Gal Gothic
  • Utile Narrow | Adobe Fonts
  • New Spirit
  • Lastik

Geneva as fallback on MacOS

https://www.thatthattype.com/fonts/that-that-new-roman

20 USD: https://www.acanski.co/cosmic-buns-handwrriten-font/

  • Typefaces:
    • Elza Text
    • Dolly (Underware)
    • Monarcha
    • Gal Gothic
    • Angie Open Pro
    • Rig Solid
    • Tisa Sans Pro
    • Masiilia
    • Elza Text
    • Stozl
    • Plantin MT Pro
    • Aesthet Nova
    • P22 Mackinac
    • Omnes (Family)
    • Freight Neo
    • Angie
    • Iskra
    • Capitolina
    • Capucine Basic
    • Loretta
    • Etna
  • Whatsapp Community
  • Subscriptions
  • bfcache

Quote Design:

Devanagari:

Latin:

Moving to Astro Case Study

Security

Test Heading

  • Cloudflare Fonts. Faster Google Fonts delivery.

[!Quote] Definition Syncopation — definition = shortening of a word by dropping sounds or letters in the middle, as in symbology for symbolology, or Gloster for Gloucester. Compare with haplology

[!Quote] Definition dialectic - art of investigating (or) discussing the truth of opinions

[!Quote] Elements of Typographic Style, Page 19 the task of creative non-interference with letters is a rewarding and difficult calling

  • elements of typographic style, page 19

Tear it down. on Layers:

  • Andreas Storm on X: "Tears down modal by @PatrickHill https://t.co/wQtqhhV0XE https://t.co/WrcrH96fKO" / X (twitter.com)
  • What if I get fired. Maintainability — shouldn’t be a concern.
  • Trust me to know my shit 💩 — but have a layer of checks to align it with where Newslaundry wants to be in the next 3–5 years.
  • Give me the freedom to create my own roadmap.
  • 3—6 months to build trust and see my work — then a %age on the Gross revenue. Everything will be in the service of the revenue (without compromising on the values / ethics of the organization)
  • Walk the talk — verify with industry big-wigs.
  • No 16 hour slogs.
  • Need end-to-end
  • You have to buy — nl.news
  • Steal joshwcomeau’s upvote thing.
  • Newslaundry Conf — on the “tarj” of NextJS Conf.
  • Use causal for charts. 20 page summary.
  • lychee — dead links
  • ==Ship less==
  • Axe-puppeteer
  • React v16.12.0 (Released November 19)
  • Working with AI collaborators and Human collaborators for Fact Checks and catching mistakes early.
  • ==Illustrations:==
  • Apple TV / Podcasts as inspiration.
  • Newslaundry — Wobbly L (Washing Machine)
  • Use paper, keyframing, spacing, timing to illustrate ideas for UI. Alex Grigg — Animation for Everyone.
  • Future proofing distribution - thinking of activitypub
  • Typekit Practice: Caring about OpenType features
  • Ordered head

  • Infrequently Noted

    • Designing for Variance — every 4g user is a 3g user at somepoint and is probably is an offline user.
    • INDIA / HINDI content is extremely rural.

Work Culture

  • Avalanche of enery. People find it incredibly difficult to start. But once they do. The momentum carries them along the way.
  • Competency follows — how far can you break something down, and explain it logically.
  • Present and correct.

CSS Analyzed

Lighthouse Analyzed

Web Vitals Analyzed

Research Data

Logo

SEO / Google / Crawl / Index

Mobile

Components | UI Elements

DataViz

Newslaundry — OBS / Live assets

Platform Capitalism | Enshittification

Delight

Illustration Styles

Ideas

  • Cadence meeting.
  • Neuromarketing

Presentation

Thumbnails

between novelty —— and familiarity. Spectrum line. can be used in the case study.

chinese streets

japanese streets

Music to present design to:

  • Cards:

Pollen - https：⧸⧸t.co⧸mvHy5g2siZ [1667717625705824257].mp4

Old Notes

Inspiration

Crawl:

Logos

Typography

Joshua Krohn on Twitter

(1) Joshua Krohn on Twitter: "Apple 2023, now with more 1993. https://t.co/pAKJW7l70a" / Twitter

Video

Collaboration Effort

Security

Newslaundry

  • Starbucks — name on the bottle / cup / handwritten font / or maybe handwritten.
  • Stacks — WatchOS 10 promo.
  • thumbnail design.
  • Nelson (madebynelson_)
  • PlayDate
  • Video with the same background colour as the website.
  • Reflection (FqXWm68akAMCJoO):

  • Layout:

  • Cards:

  • Progressive Blur:

DataViz

He’s changed his username to: @tfalexandrino

Pollen - https：⧸⧸t.co⧸mvHy5g2siZ [1667717625705824257].mp4

Performance a UX Concern

  • Subset fonts
  • Web Vitals / Lighthouse
  • Use better fonts
    • Newsreader / literata, Source Serif etc. are great.

Accessibility

OpenGraph

Podcast

Analytics

RSS

  • the feed.

Presentation (Order / Slides — from goodside studio (also use the one from Smith & Diction))

Discovery & Positioning

Part brand therapy, part creative catalyst, Phase 1 is where we put our finger on what it is that makes you authentically you. Through research and discussion, interviews and workshops, we’ll carve out our own corner of the universe, forging a strategic foundation to build on.

  • Research
  • Brand Audit
  • Brand Workshop
  • Competitor Audit
  • Brand Positioning

Phase 2

Brand Building

This is where things start to take form as we imagine the possibilities of who you’ll be. Blending verbal and visual, we’ll bring our brand positioning to life through a range of identity concepts. Each direction will showcase a full brand system and how it’ll work in the real world. We’ll narrow in on one direction and refine into your new brand guidelines.

  • Naming
  • Logo
  • Visual Identity
  • Verbal Identity
  • Brand Guidelines
  • Voice & Tone Guidelines

Phase 3

Brand Launch

It all comes together in Phase 3. We’ll apply your brand to real assets so that you can share your new identity with the world. The deliverables in this phase vary widely from project to project, but many include web design, packaging design, art direction, and templates for social media, decks, and swag.

  • Website
  • Art Direction
  • Photography
  • Illustration
  • Copywriting
  • Animation
  • Brand Campaign
  • Social Assets
  • Packaging
  • Pitch Deck
  • Sales Collateral
  • Brand Advising

Newsletter