Store
Design
Portfolio
Logo
UI/UX
Photography
Video
Articles
About
Contact
Account
[apple_grouped_sitemap]
UI Design System — Bayazid Bulbul

User Interface Design System

A thoughtfully crafted UI framework for clarity, consistency, and accessibility across the entire website experience.

This section houses guidelines and components built with a human-centered design philosophy. Explore interaction patterns, reusable components, and typography standards designed to create a seamless and delightful user experience.

Human Interface Guidelines

Principles and philosophy guiding all UI components and interactions for usability and accessibility.

Components Library

Reusable UI elements such as buttons, preloaders, and typography designed for consistency and interaction.

Accessibility

Ensuring inclusivity through accessible design, keyboard navigation, and ARIA roles.

Design Patterns

Common reusable solutions for interface challenges, from navigation to feedback systems.

Design Tokens

Centralized variables for colors, spacing, typography to ensure design consistency.

 
<!-- Example Button Markup -->
<button class="bb-ui-btn-primary" aria-label="Submit Form">Submit</button>

<!-- CSS Example -->
.bb-ui-btn-primary {
  background-color: #0071e3;
  color: white;
  padding: 12px 28px;
  border-radius: 12px;
  font-family: 'BB Display Semibold', sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

© 2025 Bayazid Bulbul UI System

UI Components Overview — Bayazid Bulbul

UI System

Explore every building block and interactive piece used in the design of Bayazid Bulbul’s site — inspired by Apple’s Human Interface guidelines and tailored for precision.

Pages

Core Components

Buttons

Primary, secondary, outline, icon buttons for every use-case.

Preloaders

Animated indicators for loading states and transitions.

Typography

Type hierarchy and spacing using BB Display & BB Text.

Forms

Inputs, selects, checkboxes with accessible styling.

Alerts

Display messages or warnings to users elegantly.

Modals

Dialog overlays for interaction, confirmation, or details.

Example Code Snippet

.button-primary {
  background-color: #007aff;
  color: #fff;
  padding: 12px 24px;
  border-radius: 12px;
  font-family: 'BB Mono';
  font-size: 15px;
  border: none;
  cursor: pointer;
}

© 2025 Bayazid Bulbul — Designed with precision.

Human Interface Guidelines — Bayazid Bulbul UI

Human Interface Guidelines

Foundations that shape our user interface for clarity, consistency, and empathy.

Design Principles

Our design is built on timeless principles focused on creating intuitive, accessible, and beautiful interfaces:

  • Clarity: Every element should clearly communicate its purpose.
  • Consistency: Reuse patterns and components to maintain familiarity.
  • Deference: The UI should defer to the content, keeping interface elements subtle.
  • Feedback: Provide clear, immediate response to user actions.
  • Accessibility: Design inclusively for all users and abilities.

Typography

Typography is the voice of our design. We use custom 'BB Text' and 'BB Display' fonts, carefully chosen for legibility and aesthetic harmony.

Key typographic styles:

  • Body text uses 'BB Text' at 16px with 1.5 line height.
  • Headings use 'BB Display Semibold' for crisp, modern weight.
  • <strong> and <b> use 'BB Display Bold' with subtle letter-spacing for emphasis.
  • Code snippets use monospace fonts for clarity.

Color & Contrast

Colors are selected to maintain sufficient contrast and promote calm, neutral tones that highlight content and user interactions.

Primary blue #0071e3 is used for links, buttons, and highlights. Backgrounds remain white or subtle gray for clarity.

Interaction & Feedback

User actions must receive immediate and clear feedback. Focus styles are distinct and easy to see. Transitions and animations use subtle easing to feel natural.

Keyboard navigation is fully supported for all interactive elements to ensure accessibility.

Example CSS for Button States

.bb-ui-btn-primary {
  background-color: #0071e3;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 28px;
  font-family: 'BB Display Semibold', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.bb-ui-btn-primary:hover,
.bb-ui-btn-primary:focus-visible {
  background-color: #004aab;
  outline: none;
}

© 2025 Bayazid Bulbul — Human Interface Guidelines

UI Overview – Bayazid Bulbul
Home / UI

User Interface (UI)

Explore the design system powering this website — from human interface guidelines to modular components and interactive patterns.

Human Interface Icon
Human Interface
Principles, accessibility, spacing, motion and best practices for interaction and behavior.
 Components Icon
Components
Reusable UI elements including buttons, loaders, toggles, forms, and more.
 Typography Icon
Typography
Font system, semantic hierarchy, rhythm, readability & responsive scaling.
 Code Icon
Code Snippets
Code blocks and examples for styling, layout, and interaction implementation.
 Preloaders Icon
Preloaders
Lightweight loaders, animation types, and usage in various components.
 Buttons Icon
Buttons
Primary, secondary, icon buttons and their interactive states & behavior.
<button class="btn-primary">Click me</button>