Inspiration

Inspiration¶

Color¶

https://codepen.io/tomleo/pen/vjperL

Typography Pairing Ideas¶

Merriweather / Oswald Idea¶

.text {
    font-family: "Merriweather", Georgia, serif;
    font-size: 120%;

    max-width: 40rem;
    padding: 0 1em;
    margin: 0 auto 2em;

    p {
        margin: 0 0 1em;
    }

    h2 {
        color: #be6700;
        font-family: "Oswald", "Helvetica Neue", Helvetica, sans-serif;
        font-size: 2em;
        line-height: 1.2;

        position: relative;
        margin: 2em 0 0.5em;
        padding-bottom: 0.5rem;
        border-bottom: 3px solid #100;
    }
}

Websites¶

currated lists - https://brianlovin.com/overthought/product-design-portfolios

carolynzhang.com¶

Nice use of handwriting styled anchor-points for different sections, mixes well with the serif font used for the body

screenshot

lynnandtonic.com¶

https://lynnandtonic.com/

Really cool transforming graphic when page resizes

While the graphic takes up the whole page, there’s nothing actionable associated with the graphic, after a moment my eye starts wandering the page looking where to “enter” or being an experience. I soon find the navigation at the top that remains consistent throughout the experience.

youfoundwaldo.com¶

https://youfoundwaldo.com/

Cool illustrated image of the person

desktop screenshot mobile screenshot

mina.codes/about/¶

http://mina.codes/about/

Nice colorscheme and typography

desktop screenshot

Lust Script

body {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,.004);
    font: 16px/24px proxima-nova,sans-serif;
}

h1 {
    font-family: lust-script,sans-serif;
    font-size: 66px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -1px;
    margin: 25px 0 .5em;
    color: #2d3438;
}

p {
    font-family: "Proxima Nova";
    color: #656a6f;
}

p.lead {
    font-size: 24px;
    line-height: 32px;
    font-family: adriane,serif;
    font-style: italic;
    width: 74%;
    margin-right: 4%;
    float: left;
    color: #3c4a52;
    margin: 1em 0;
}