Please wait
Please wait
Manage your display preferences to improve readability and usability.
| Feature | Description | Setting |
|---|---|---|
High Contrast | Increases the contrast ratio between text and backgrounds for better legibility. | |
Bold Text | Increases the font weight of all text to make it easier to read. | |
Dim Screen | Applies a dark overlay to the entire screen to reduce brightness and eye strain. | |
Text Size | Scales the size of all text across the application. | 100% |
Color Saturation | Modifies the global color intensity. Useful for color blindness or visual fatigue. |
Shows heading/body scale for bilingual UI text.
English
H1 - Dashboard
H2 - Organization Units
H3 - Quick filters
Body - Design system controls remain clear and consistent.
Small - Support text and helper notes.
Tiny - Metadata / badges.
Kurdish
H1 - داشبۆرد
H2 - یەکەکانی ڕێکخراو
H3 - پالاوەرە خێراکان
Body - کۆنترۆڵەکان بە شێوازێکی هاوبەش و ڕوون دەمێنن.
Small - دەقی یارمەتیدەر و تێبینییەکان.
Tiny - زانیاری لاوەکی و ناونیشانەکان.
Uses `Button` variants for text+icon and icon-only actions.
Uses `Badge` variants for status, emphasis, and metadata labels.
Uses `Checkbox` states: default, controlled, indeterminate, invalid, and disabled.
Default checked with a paired label.
Check this field to continue (demo invalid state).
Uses `RadioGroup` for single-selection choices.
Uses `Switch` sizes (`sm`, `default`, `lg`) and disabled states.
Small
size="sm" for dense rows.
Default
Same size used in accessibility controls.
Large
size="lg" for emphasis and touch targets.
Uses `Tooltip`, `TooltipTrigger`, and `TooltipContent` for 4-side placement.
Uses `Sheet` for side panels and mobile drawer patterns.
Uses `Toast` for short-lived success, info, and warning feedback.
Uses semantic color tokens and theme variables for light and dark modes.