Pattern Library

This is a list of the UI patterns I used to build out the site. This was mainly built for my use, so I didn’t bother with a fancy documentation-generating tool – ‘view source’ if you’re interested in the markup format.

Colours

Scale is based on the luminance values of the shade of blue in the logo. (I cheated a little bit and added a half-step for $grey-4.)


$brand-color-1
hsl(210, 100%, 25%)
$brand-color-2
hsl(210, 100%, 42%)
$brand-color-3
hsl(210, 100%, 59%)

$black
hsl(0, 0%, 25%)
$grey-1
hsl(0, 0%, 42%)
$grey-2
hsl(0, 0%, 59%)
$grey-3
hsl(0, 0%, 86%)
$grey-4
hsl(0, 0%, 94.5%)
$white
hsl(0, 0%, 100%)

Typography

h1 %alpha Kitsch occupy YOLO

h2 %beta Austin biodiesel dreamcatcher

h3 %gamma Mustache normcore tattooed, kickstarter forage viral truffaut yr you probably haven't heard of them

Pinterest microdosing kitsch wolf knausgaard four loko hammock retro. Asymmetrical ramps yuccie, mixtape shabby chic umami pork belly cardigan.

Literally semiotics put a bird on it, tattooed cardigan chambray forage slow-carb crucifix church-key yr. PBR&B kale chips vice mumblecore street art migas. +1 bitters 8-bit fap viral next level. Salvia hoodie pork belly letterpress, williamsburg hashtag church-key mixtape waistcoat kogi bitters bespoke. Green juice skateboard yr cardigan. Sriracha tumblr fanny pack, four dollar toast mustache squid normcore blog selvage meditation. Four loko tousled direct trade, umami taxidermy normcore blue bottle vegan.

Roof party put a bird on it art party vinyl, single-origin coffee typewriter brooklyn next level 8-bit. Listicle lumbersexual tousled street art pabst helvetica. Franzen church-key meditation chicharrones. Typewriter whatever pour-over beard, pop-up bushwick organic tousled cred roof party. XOXO fashion axe chambray biodiesel normcore aesthetic. Fixie hoodie gentrify meditation waistcoat, taxidermy ennui kitsch semiotics. Stumptown selfies four dollar toast hella typewriter, salvia taxidermy pinterest.

Shabby chic venmo selvage stumptown, keffiyeh lomo slow-carb 3 wolf moon fingerstache tofu etsy affogato salvia synth. Pinterest cronut butcher, waistcoat intelligentsia cray next level pork belly normcore gentrify tote bag kombucha. Meh williamsburg thundercats, mumblecore 3 wolf moon kickstarter kogi. Lomo direct trade wayfarers, 8-bit locavore trust fund mlkshk blue bottle shabby chic twee deep v. Brooklyn salvia austin hoodie. Brooklyn fingerstache tilde wolf, selfies tacos meggings chambray cliche skateboard williamsburg direct trade bespoke typewriter paleo. Drinking vinegar yr DIY migas.

  1. Master cleanse +1 heirloom blue bottle
  2. Trust fund microdosing artisan chicharrones
  3. Slow-carb blue bottle etsy street art
  4. Pork belly artisan neutra viral selfies
  5. Tacos waistcoat wolf williamsburg
    Literally plaid farm-to-table squid pabst, pitchfork dreamcatcher narwhal waistcoat. DIY biodiesel kale chips, hashtag disrupt distillery put a bird on it ugh letterpress.
    Helvetica williamsburg truffaut mixtape kickstarter. Etsy stumptown sustainable, chia tofu swag cronut.
    Pork belly chambray meditation, godard echo park cray put a bird on it try-hard fingerstache.
    90's craft beer bespoke, chartreuse butcher ramps sartorial swag wolf humblebrag tattooed.
    Art party cliche mlkshk taxidermy, listicle bespoke authentic schlitz sriracha hella chicharrones pop-up small batch dreamcatcher next level.
  
Dreamcatcher hammock williamsburg heirloom. Cronut portland meggings next level distillery, hoodie fap everyday carry disrupt bicycle rights franzen migas forage bespoke leggings. Gentrify kombucha asymmetrical, aesthetic banjo marfa 8-bit. Kinfolk forage fanny pack migas. Wayne Gretzky

Images

Placeholder
Cliche next level four loko, schlitz hella microdosing mumblecore marfa authentic tattooed church-key lumbersexual celiac bespoke.

Article List

For the home page (or anywhere else).


Gastropub gluten-free asymmetrical pour-over

Gastropub XOXO bicycle rights, humblebrag semiotics whatever tousled fashion axe mixtape. Asymmetrical street art craft beer flexitarian wayfarers, artisan meditation intelligentsia shabby chic farm-to-table. Vice try-hard pour-over godard direct trade leggings microdosing, schlitz heirloom cred hella humblebrag butcher. Skateboard narwhal cold-pressed cred listicle distillery, chambray bushwick actually. Flannel food truck chicharrones kinfolk narwhal hammock helvetica +1, ugh irony. Tacos actually yr pabst, meh slow-carb biodiesel lomo wolf church-key cred mlkshk 3 wolf moon.

Schlitz kickstarter occupy twee

3 wolf moon listicle cray messenger bag post-ironic 8-bit artisan tofu. Irony chartreuse actually selvage cronut, celiac seitan shabby chic occupy cold-pressed. Bespoke next level fap, polaroid fanny pack 3 wolf moon semiotics health goth blog raw denim cardigan biodiesel sriracha. Godard pour-over lo-fi, gluten-free cold-pressed thundercats tofu shabby chic vegan ugh vice pitchfork kinfolk chartreuse. Portland blog kombucha umami, twee narwhal trust fund. Kitsch intelligentsia selfies, migas beard lumbersexual pug. Brunch chartreuse microdosing, cardigan slow-carb banh mi art party bushwick schlitz.

Hella taxidermy sartorial, before they sold out fap kitsch

Aesthetic ugh venmo, tote bag neutra organic trust fund tattooed. Fixie synth squid semiotics, four loko master cleanse actually gentrify PBR&B retro brooklyn franzen single-origin coffee. Stumptown messenger bag mustache leggings. Small batch skateboard meditation pop-up PBR&B, pabst listicle. Sartorial gluten-free fap, salvia pitchfork locavore semiotics twee direct trade. Pinterest sartorial deep v tilde leggings bitters.

Content

The sidebar is baked into these components instead of the page so we can stack them freely without doing weird negative-margin stuff or needing an empty element to force the correct spacing.


Slow-carb yr banjo, sriracha mustache banh mi tousled. Viral master cleanse mustache, sartorial freegan pop-up butcher hashtag mixtape street art hoodie put a bird on it sriracha authentic. Portland selvage artisan VHS hashtag fingerstache wayfarers. Master cleanse street art hella, narwhal austin aesthetic deep v selfies. Banjo church-key gastropub sriracha blue bottle viral. Art party asymmetrical lumbersexual literally, polaroid cardigan kitsch vinyl. Yr skateboard put a bird on it, polaroid wayfarers small batch vegan raw denim echo park post-ironic offal plaid cardigan.

Ethical normcore brooklyn lumbersexual keytar williamsburg. Irony tilde lumbersexual, cardigan you probably haven't heard of them cred selvage shabby chic ethical aesthetic +1 XOXO ugh flexitarian. Direct trade pabst selvage mustache, meditation mumblecore fap vice PBR&B pitchfork waistcoat lumbersexual skateboard. Irony mumblecore portland williamsburg yuccie. Cray DIY sustainable post-ironic, gastropub plaid green juice chambray drinking vinegar fashion axe schlitz franzen. Paleo messenger bag chambray, umami hoodie fashion axe DIY scenester aesthetic butcher fanny pack shabby chic mumblecore kogi bushwick. Blog hashtag sartorial taxidermy marfa schlitz, retro humblebrag selvage cold-pressed yr kinfolk next level drinking vinegar thundercats.

Cronut microdosing tilde lomo, church-key vice listicle franzen four dollar toast lumbersexual seitan. Selvage brunch ennui forage cray disrupt migas, polaroid banh mi. Readymade neutra crucifix, twee thundercats normcore single-origin coffee lo-fi squid banh mi lumbersexual. Bushwick +1 tacos sartorial, 90's cred fanny pack knausgaard. Flannel bicycle rights church-key viral semiotics, gastropub austin umami readymade sustainable 90's crucifix cray vice hella. Next level readymade bicycle rights butcher. Chia put a bird on it iPhone offal blue bottle leggings tousled, fashion axe synth health goth listicle cold-pressed shoreditch.

Fap occupy before they sold out, godard slow-carb lomo swag semiotics art party locavore pickled. Tousled seitan food truck 90's, photo booth pug quinoa microdosing roof party. Vinyl messenger bag kogi, jean shorts street art hoodie meggings. Marfa green juice chartreuse flexitarian, four dollar toast tousled plaid. Fap portland irony bushwick umami, banjo next level 8-bit retro franzen taxidermy. Normcore 3 wolf moon farm-to-table, deep v selfies kombucha bitters scenester. Fashion axe paleo synth, tattooed roof party hammock cronut chambray pabst bespoke.