 <button class="bb-ui-btn-primary" aria-label="Submit Form">Submit</button>  .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; }

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.

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;
}

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;
}

I offer freelance design services to clients globally, specializing in graphic design, UI/UX, animation, and custom templates. Each project includes two rounds of revisions, with additional charges for extra revisions. A deposit is required to begin the project, and full payment is due upon completion. Deposits are non-refundable once work commences, and no refunds will be provided for completed projects.
Upon full payment, all rights to the final design are transferred to you. However, I reserve the right to feature the work in my portfolio unless otherwise agreed. Timely feedback from clients is essential to prevent delays. I am not responsible for any indirect damages.
These terms may be updated periodically, and continued use of my services signifies acceptance. For inquiries, contact me.

A preview of your QR code appears instantly with resolution and dimension details. Type directly into the input field or click Paste to insert content from the clipboard. A short pause while typing ensures a smooth, responsive experience.
Customize your QR code by choosing foreground and background colors that suit your brand. Select from four error correction levels (L, M, Q, H) to ensure your QR remains scannable even if slightly damaged or obscured.
QR codes are rendered with 32x32 pixel modules and 32px padding to ensure print-quality clarity and pixel-perfect digital display. Download your code in lossless SVG or high-resolution PNG format with one click. Use it confidently across print, web, packaging, or digital media.

User Interface Design System

Human Interface Guidelines

Components Library

Accessibility

Design Patterns

Design Tokens

UI System

Pages

Core Components

Buttons

Preloaders

Typography

Forms

Alerts

Modals

Example Code Snippet

Human Interface Guidelines

Design Principles

Typography

Color & Contrast

Interaction & Feedback

Example CSS for Button States

User Interface (UI)