Style Guide for Nikhil Chodimella
This is my personal style guide. In here you will find references for all the fonts, colours, and the individual web elements that form my website.
Branding
Fonts
I tend to rely on sans-serif fonts because they're simple, modern, and I find them easier to read for the most part. Raleway is my go to body/content font because it strikes the right balance between professional and casual. The font Righteous is how I've chosen to express my design style. Its bold typeface and stroke weight pair well with Raleway, and it adds a little flair to my minimalistic design approach.
Righteous font retrieved from: URL
0 1 2 3 4 5 6 7 8 9
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Raleway font retrieved from: URL
0 1 2 3 4 5 6 7 8 9
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Colours
As mentioned earlier, I tend to have a minimalistic approach to my designs. I start in black and white, and build up from that. Any other colours outside of black and white mainly serve as a way to add some flair to my projects. I tend to lean towards the darker shades of red simply because it is my favourite colour. Sunflower/mustard yellows add a nice dynamic and contrast to this site.
Matte Black: #1E1E20
Gloss White: #FFFFFF
Grey92: #EBEBEB
Brick Red: #962715
Sunflower Yellow: #E5C41F
Text Elements
Headings & Sub-headings
Righteous font used for main headings and sub-headings, from h1 - h4.
Nikhil Chodimella
Nikhil Chodimella
Nikhil Chodimella
Nikhil Chodimella
Body & Paragraph
Raleway font used in two weights: 400 & 700. Used in body content, links and buttons.
Nikhil Chodimella
Nikhil Chodimella
Interactive Elements
In text links
HTML Sample:
<p>This is just an
<a class="in-text-link" href="#">
example.
</a>
</p>
CSS Sample:
.in-text-link {
color: #962715;
text-decoration: underline;
transition-property: color, text-decoration;
transition-duration: 0.25s;
}
Example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper tellus et ipsum tempus, a dignissim lectus suscipit. Ut libero eros, bibendum et tellus quis, vulputate porta orci. Praesent vehicula porta feugiat. Nunc faucibus ex a tellus consequat pellentesque. Morbi bibendum odio quis finibus fringilla. Cras vel urna id lacus bibendum euismod. In pretium iaculis egestas. Nam sit amet nisl vitae orci tristique auctor. Nulla in massa mi. Nunc vitae diam at lorem iaculis finibus eu a diam. Praesent vel velit turpis.
Buttons
HTML Sample:
<a class="button" href="#">
Learn More
</a>
CSS Sample:
.button {
display: inline-block;
padding: 0.8rem;
margin: 0;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 1.25rem;
font-weight: 700;
color: #FFFFFF;
background-color: #1E1E20;
transition-property: color, background-color, border;
transition-duration: 0.25s;
}
Images as links
HTML Sample:
<a href="#">
<img class="image-link" src="old-base/img/n2.jpg">
</a>
CSS Sample:
.image-link {
transition-property: opacity, transform;
transition-duration: 0.25s;
overflow: hidden;
}
.image-link:hover, .image-link:focus {
opacity: 0.7;
transform: scale(1.02);
}
Example:
Home Page Work Card Sections
HTML Sample:
<div class="col-1of2 text-column-center col-box-height">
<div class="center-work-card">
<p class="work-title">One Earth Living</p>
<p>A responsive website</p>
<a class="button" href="one-earth-living.html">View Work</a>
</div>
</div>
<div class="col-1of2">
<a href="one-earth-living.html"><div class="image-box one-earth-image"></div></a>
</div>
CSS Sample:
.one-earth-image {
background: url(../img/one-earth-living/landing-original-small.jpg);
min-height: 30vh;
background-size: cover;
background-position: 20% 0;
}
.text-column-center {
display: flex;
}
.col-box-height {
height: 30vh;
}
.image-box {
transition-property: opacity;
transition-duration: 0.25s;
overflow: hidden;
}
.image-box:hover, .image-box:focus {
opacity: 0.7;
}
Embedded YouTube Video
HTML Sample:
<div class="video-box">
<div class="video-container">
<iframe title="Hikikomori" src="https://www.youtube.com/embed/_vu8l2LeQnk" frameborder="0" allow="gyroscope;" allowfullscreen></iframe>
</div>
</div>
CSS Sample:
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}