Overview

Welcome to the Practyc Style Guide — a curated reference of design rules, reusable UI components, and frontend standards used across our platform. This guide is built for students, designers, and developers to understand and implement modern, scalable, and accessible web interfaces.

Whether you're working on a new feature or contributing to UI consistency, this document serves as your single source of truth. By following a shared design language, we ensure seamless collaboration between teams and better end-user experiences.

🎯 Core Objectives

• Promote visual consistency across all UI components and pages
• Improve design-to-development handoff using standardized tokens and components
• Facilitate scalable, maintainable UI systems in real-world projects
• Encourage learning-by-building with reusable examples

Typography

Typography plays a critical role in user interface design — ensuring readability, hierarchy, and brand consistency. We use a scalable type system with defined font sizes, weights, and spacing to achieve a clean and accessible UI.

Colors

A consistent color palette is essential for visual harmony, brand recognition, and accessibility. Below is our primary color system used throughout the product.

Spacing & Layout

A consistent spacing system helps maintain visual balance and rhythm across the UI. We follow an 8pt Grid System — all spacing values are multiples of 8px (e.g., 8, 16, 24, 32...).

Border Radius

Rounded corners help soften UI elements and improve visual hierarchy. We use a consistent set of border-radius tokens for buttons, cards, inputs, and other components.

Shadows

Shadows create depth and focus. Use them to separate elements from the background and emphasize important UI blocks like cards or modals.

Buttons

Buttons are key interactive elements. Use consistent colors, sizes, and spacing for clear user actions.

Forms & Inputs

Forms are essential for collecting user input. Maintain consistency in field layout, spacing, and labels to ensure good usability.

Badges & States

Badges are used to display statuses, counts, or labels. Use color-coded badges consistently to represent different types of information.

Cards

Cards are flexible containers for grouping content. Use them to present content clearly, especially in grid layouts.

Card Title

Cards can hold titles, text, images, and links. Use padding and spacing for clean presentation.

Learn More

Dark Card

You can use color variants for card themes using Bootstrap background utility classes.

Bordered Card

Add colored borders to cards to signify status or match themes.

Icons

Icons enhance UI clarity and improve usability. We use Bootstrap Icons for a consistent, scalable, and lightweight icon system.

Grid System

Bootstrap’s grid system uses a series of containers, rows, and columns to layout content responsively and consistently across devices.

Components

Components are reusable UI blocks like buttons, alerts, modals, and tabs. Bootstrap provides dozens of prebuilt components to build responsive interfaces quickly.

Alerts

Tabs

• Home
• Profile
• Contact

Modal

Glassmorphism

Glassmorphism is a modern UI trend that uses background blur and semi-transparent layers to create a frosted-glass effect.

Transitions & Animations

CSS transitions and animations add visual feedback to UI elements, making interactions feel more natural.

CSS Transition Example

CSS Animation Example

Bonus Tricks

Here are some extra CSS tricks that improve interactivity and design quality.

• Centering with Flexbox:

  display: flex; justify-content: center; align-items: center;

• Custom Scrollbar:

  
          ::-webkit-scrollbar { width: 8px; }
          ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
                

• Clip-path shapes: Use CSS to make diagonal sections or creative shapes.

  
          clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 90%);
                

Dark Mode

Dark mode improves accessibility and is easier on the eyes in low-light environments.

CSS Example:

        @media (prefers-color-scheme: dark) {
          body {
            background-color: #121212;
            color: #e0e0e0;
          }
        }
          

Responsive Guidelines

Responsiveness ensures your UI looks great on all devices. Bootstrap's responsive classes adapt layouts based on screen size breakpoints.

Z-Index & Layering

The z-index property in CSS controls the vertical stacking order of elements on the screen. Higher values appear on top of lower values, but it only works on elements with a position value other than static (e.g., relative, absolute, fixed, or sticky).

Overlays & Transparency

Overlays are semi-transparent layers placed above content, typically used in modals, banners, or image hover effects. They help highlight or dim background content.

Overlay Example

Common Techniques

• background-color: rgba(0, 0, 0, 0.5); for semi-transparent black overlay
• backdrop-filter: blur(5px); for modern glass blur overlays
• .bg-opacity-50 (Bootstrap) for quick overlay background transparency

Hover Effects

Hover effects improve interactivity and feedback for users. You can apply them to buttons, images, cards, or any clickable UI component.

Zoom on Hover

Use transform scale for zoom effect.

Other Hover Tricks

• :hover pseudo-class for CSS-based effects
• Use transitions for smooth animations
• Combine hover with overlays or tooltips

CSS Shapes

Create interesting and modern UI elements using just CSS. No images or SVGs needed.

Common Techniques

• border-radius — For circles, pills, and ovals
• clip-path — Create triangles, polygons, stars, and more
• transform: skew / rotate — Make parallelograms, diamonds

CSS Variables

CSS Variables (custom properties) allow you to define reusable values for colors, spacing, fonts, and more. They improve maintainability and consistency.

:root {
          --primary-color: #0d6efd;
          --spacing-md: 16px;
          --border-radius: 8px;
        }

Use them like this:

• Define variables under :root for global access
• Use var(--variable-name) inside CSS
• Can be overridden at component or element level

Performance & Optimization

Efficient CSS practices improve load time, rendering speed, and overall user experience. Optimizing your styles helps scale your project without sacrificing speed.

Best Practices

• Use minified CSS files in production (style.min.css)
• Avoid deep CSS selectors (e.g. div ul li a span)
• Combine and compress CSS files to reduce HTTP requests
• Leverage utility classes and CSS variables
• Use modern tools like PurgeCSS or UnCSS to remove unused styles

Fullscreen Background

Use fullscreen background images or videos for hero sections, landing pages, or immersive UI experiences.

Fullscreen Hero Section

How to Implement:

• Use position: absolute or fixed with top/left/right/bottom: 0
• Ensure height: 100vh for full screen height
• Use object-fit: cover to maintain aspect ratio

CSS Utilities

Utility classes are small, reusable classes that apply a single purpose style. They're great for speeding up development and reducing custom CSS.