Colors
I created this color palette at Coolors and used the color palette page for initial page design inspiration. For color naming convention I looked to Bootstrap for this one.
-
Primary 1D3557
-
Secondary 457B9D
-
Tertiary A8DADC
-
Background F1FAEE
-
Danger E63946
-
Gray 636369
Fonts
For this section I took inspiration from a fellow student @final-aerith and the website design system she created. The Inter font is used by both Coolors and Tailwind CSS! The Fira Code font I took from Tailwind.
Text Styles
Initially I took inspiration from the color palette page designing the headings and footer text. For fine tuning however, I looked at Tailwind CSS and how they designed their docs pages.
Heading 1
Black 900 at 3 rem | inherit line height | 100% max width | Black
Whereas a common understanding of these rights and freedoms is
Heading 2
Extrabold 800 at 2 rem | 2.25 rem line height | 72 rem max width | Primary
No one shall be held in slavery or servitude; slavery and the slave trade shall be prohibited in all their forms.
Heading 3
Bold 700 at 1.25 rem | 1.75 rem line height | 56 rem max width | Black
Everyone has the right to an effective remedy by the competent national tribunals for acts violating the fundamental rights granted him by the constitution or by law.
Paragraph
Regular 400 at 1 rem | 1.75 rem line height | 48 rem max width | Gray *
No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality to a fair and public hearing by an independent and impartial tribunal, in the determination of his rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to attacks upon his honour and reputation. Everyone has the right to the protection of the law against such interference or attacks.
Small Text
Light 300 at .875 rem | 1.5 rem line height | 32 rem max width | Gray Black White
Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance. Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference and to seek, receive and impart information and ideas through any media and regardless of frontiers. Everyone has the right to rest and leisure, including reasonable limitation of working hours and periodic holidays with pay.
* Font size set at 16 pixels at root
Utility Classes
I was glad to see utility classes be included in the Web Development Foundations part of the career path. Obviously, I took a lot of inspiration from Tailwind CSS here as well.
Font Size
Utilities for controlling the font size of an element.
Class | Properties |
---|---|
text-xs |
font-size: .75rem; /* 12px */ line-height: 1rem; /* 16px */ |
text-sm |
font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */ |
text-base |
font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */ |
text-lg |
font-size: 1.125rem; /* 18px */ line-height: 1.75rem; /* 28px */ |
text-xl |
font-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 28px */ |
text-2xl |
font-size: 2rem; /* 32px */ line-height: 2.25rem; /* 36px */ |
text-3xl |
font-size: 3rem; /* 48px */ line-height: inherit; |
text-4xl |
font-size: 8rem; /* 128px */ line-height: inherit; |
Font Weight
Utilities for controlling the font weight of an element.
Class | Properties |
---|---|
font-light | font-weight: 300; |
font-normal | font-weight: 400; |
font-medium | font-weight: 500; |
font-semibold | font-weight: 600; |
font-bold | font-weight: 700; |
font-extrabold | font-weight: 800; |
font-black | font-weight: 900; |
Text Color
Utilities for controlling the text color of an element.
Class | Properties |
---|---|
text-primary | color: #1D3557; |
text-secondary | color: #457B9D; |
text-tertiary | color: #A8DADC; |
text-background | color: #F1FAEE; |
text-danger | color: #E63946; |
text-gray | color: #636369; |
text-black | color: #000; |
text-white | color: #fff; |
Background Color
Utilities for controlling an element's background color.
Class | Properties |
---|---|
bg-primary | background-color: #1D3557; |
bg-secondary | background-color: #457B9D; |
bg-tertiary | background-color: #A8DADC; |
bg-background | background-color: #F1FAEE; |
bg-danger | background-color: #E63946; |
bg-gray | background-color: #636369; |
bg-black | background-color: #000; |
bg-white | background-color: #fff; |
Buttons
For the buttons and the overall look and feel of the page I took what I learned from the book Refactoring UI by Adam Wathan and Steve Schoger.