Oyin Johnson
Designer and Author, Independent
Typography
1. Heading Typography
H1 - Style Guide
H2 - Style Guide
H3 - Style Guide
H4 - Style Guide
H5 - Style Guide
H6 - Style Guide
2. Paragraph Typography
<p> : This is a normal paragraph text example. <strong> : This is bold text inside a paragraph. <em> : This is italic text inside a paragraph. <a> : This is a link text example inside a paragraph. <u> : This is underlined text used for stylistic or semantic emphasis, not as a link. <i> : This is italic text used to indicate alternate voice, technical terms, or emphasis. <s> : This is
3. Text Alignment
Text Align Left
Text Alignment Guide
Text Align Right
Text Alignment Guide
Text Align Center
Text Alignment Guide
3. Image Alignment
Image Align Left
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, hic voluptatum earum asperiores architecto neque quidem aperiam qui reprehenderit reiciendis dolorum consequuntur at blanditiis, dolor laboriosam, maiores adipisci mollitia numquam! Libero distinctio modi voluptates ab commodi, voluptatum tempora, delectus eligendi laborum cupiditate dolorum ad quo officia velit nam maxime quisquam eaque magnam enim numquam praesentium quasi error. Iusto asperiores doloribus itaque architecto explicabo culpa facere voluptate illo perspiciatis minus iste ipsum saepe, qui sed eligendi sequi deleniti quasi dolores. Dicta, ut, commodi aperiam accusamus quidem unde ipsam numquam deleniti similique officia incidunt voluptatibus aliquam et quisquam assumenda. Nemo facere dolorem mollitia pariatur hic repellat distinctio earum, esse reiciendis rerum at, beatae odio recusandae sequi magnam suscipit impedit quia ratione, quam qui! Nihil eligendi maxime incidunt corporis, eius eum dicta veritatis? Qui molestiae, explicabo beatae, voluptatibus, blanditiis dolore a optio in ratione sit architecto corrupti tempora laborum suscipit nostrum quo nobis. Asperiores unde ullam quisquam deleniti possimus tempora reprehenderit, rem aliquam culpa impedit rerum ea, animi dolorem, illo praesentium blanditiis. Aspernatur doloremque libero officiis, voluptatibus ipsum optio nihil quidem soluta eius non corrupti quae commodi itaque, accusantium, delectus et? Cumque voluptatibus eaque ab architecto tempore placeat facilis, officiis dolor? Laborum iusto adipisci, voluptatem architecto ipsam eligendi, porro enim itaque aliquid laboriosam maxime asperiores recusandae, sapiente error. Esse ratione, similique saepe expedita ipsa distinctio, quod molestiae illo corporis vero ullam dolore sit error dolorem culpa debitis adipisci nulla accusantium ad nihil quidem molestias est! Architecto repudiandae itaque harum hic enim maxime ipsam similique voluptate ipsum in quisquam inventore facere qui id eligendi quod recusandae velit fugit voluptates at, nostrum amet quibusdam. Magni, ab architecto recusandae ullam porro itaque praesentium sequi. Blanditiis pariatur ut aspernatur, unde repudiandae ipsa quisquam maiores corrupti repellendus vitae velit aperiam! Tempora sed necessitatibus eius rem dignissimos, nesciunt temporibus?
Image Align Right
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, hic voluptatum earum asperiores architecto neque quidem aperiam qui reprehenderit reiciendis dolorum consequuntur at blanditiis, dolor laboriosam, maiores adipisci mollitia numquam! Libero distinctio modi voluptates ab commodi, voluptatum tempora, delectus eligendi laborum cupiditate dolorum ad quo officia velit nam maxime quisquam eaque magnam enim numquam praesentium quasi error. Iusto asperiores doloribus itaque architecto explicabo culpa facere voluptate illo perspiciatis minus iste ipsum saepe, qui sed eligendi sequi deleniti quasi dolores. Dicta, ut, commodi aperiam accusamus quidem unde ipsam numquam deleniti similique officia incidunt voluptatibus aliquam et quisquam assumenda. Nemo facere dolorem mollitia pariatur hic repellat distinctio earum, esse reiciendis rerum at, beatae odio recusandae sequi magnam suscipit impedit quia ratione, quam qui! Nihil eligendi maxime incidunt corporis, eius eum dicta veritatis? Qui molestiae, explicabo beatae, voluptatibus, blanditiis dolore a optio in ratione sit architecto corrupti tempora laborum suscipit nostrum quo nobis. Asperiores unde ullam quisquam deleniti possimus tempora reprehenderit, rem aliquam culpa impedit rerum ea, animi dolorem, illo praesentium blanditiis. Aspernatur doloremque libero officiis, voluptatibus ipsum optio nihil quidem soluta eius non corrupti quae commodi itaque, accusantium, delectus et? Cumque voluptatibus eaque ab architecto tempore placeat facilis, officiis dolor? Laborum iusto adipisci, voluptatem architecto ipsam eligendi, porro enim itaque aliquid laboriosam maxime asperiores recusandae, sapiente error. Esse ratione, similique saepe expedita ipsa distinctio, quod molestiae illo corporis vero ullam dolore sit error dolorem culpa debitis adipisci nulla accusantium ad nihil quidem molestias est! Architecto repudiandae itaque harum hic enim maxime ipsam similique voluptate ipsum in quisquam inventore facere qui id eligendi quod recusandae velit fugit voluptates at, nostrum amet quibusdam. Magni, ab architecto recusandae ullam porro itaque praesentium sequi. Blanditiis pariatur ut aspernatur, unde repudiandae ipsa quisquam maiores corrupti repellendus vitae velit aperiam! Tempora sed necessitatibus eius rem dignissimos, nesciunt temporibus?
Image Align Center
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, hic voluptatum earum
asperiores architecto neque quidem aperiam qui reprehenderit reiciendis dolorum consequuntur at
blanditiis, dolor laboriosam, maiores adipisci mollitia numquam! Libero distinctio modi
voluptates ab commodi, voluptatum tempora, delectus eligendi laborum cupiditate dolorum ad quo
officia velit nam maxime quisquam eaque magnam enim numquam praesentium quasi error. Iusto
asperiores doloribus itaque architecto explicabo culpa facere voluptate illo perspiciatis minus
iste ipsum saepe, qui sed eligendi sequi deleniti quasi dolores.
4. Unordered List
- List item level 1
- List item level 1
- Nested list
- List item level 2
- List item level 2
5. Ordered List
- Ordered list item
- Ordered list item
- Ordered list with checklist
- Checklist item
- Checklist item
- Checklist item
6. Blockquote
“Design is not just what it looks like and feels like. Design is how it works.”
7. Table
| PROJECT OVERVIEW & TASK DISTRIBUTION | ||||
|---|---|---|---|---|
| Department | Task Name | Description | Priority | Timeline |
| UI/UX Design | Typography System | Defining font scales and weights for the web app. | High | Week 1-2 |
| Accessibility | Implementing ARIA labels and keyboard navigation. | Medium | Week 2-3 | |
| Color Palette | Setting up Dark/Light mode variables. | Low | Week 1 | |
| Backend | Database Schema | Designing SQL tables and relationships. | Critical | Week 1-4 |
| API Integration | Connecting frontend components to REST endpoints. | High | Week 3-5 | |
| Total Estimated Time: | 5 Weeks | |||