Facilitate the integration of a new design

[rajilsaj]

important to know
A little bit about IBM Design Language
IBM Design language

Description
The application theme should facilitate the integration of the following elements to ensure consistency, accessibility, and adherence to the IBM Carbon Design System:

• Font size and typography (Arial, Roboto, ...)
• Button size, padding, and depth
• Text and background color contrast
• Consistent layout alignment and spacing
• Visible and functional dark mode toggle
• Proper scaling and alignment of images/icons
• Micro interactions for improved user feedback : sounds when successful or failing

Acceptance criteria

• Consistent font sizes
• Appropriately sized buttons with padding, depth, and hover/click states.
• Enhanced text and background contrast for better readability.
• Aligned layout with consistent spacing based on Carbon spacing tokens.
• Prominent, functional dark mode toggle with smooth transitions.
• Properly scaled and aligned images/icons.
• Microinteractions added to provide clear visual feedback.

Difficulty
Medium

Estimation
None

[kounkou]

Thanks for the ticket @rajilsaj . I'll start working on it. I have few questions though. Would you please provide example or explain what are these for?

• depth ?
• color contrast ?
• What font size do we need here ?

[rajilsaj]

Depth, State, and Typography Guidelines

Depth Effects

• Create depth through layered techniques:
  • Box shadows at varying opacities
  • Contrasting borders
  • Subtle size variations
• This approach achieves a convincing 3D effect
• Most commonly applied to buttons and interactive components

Interactive States

Buttons use color contrast to indicate two distinct states:

• Not Pressed: Uses the default color scheme
• Pressed: Features enhanced color contrast to clearly show activation

Typography Hierarchy

Four heading levels follow a consistent scale:

• H1: Base size (15px)
• H2: Proportionally smaller than H1
• H3: Smaller than H2
• H4: Smallest heading size

Each heading level maintains clear visual distinction while preserving readability.