UBO Design System Text Styles
This page documents text/typography styles that are explicitly defined in the local repo.
Primary sources:
packages/tailwind-config/UBO_tailwind_theme.css,
packages/ubo-react-components/src/syncfusion-extentions/FileUploader/styles/_file-uploader.css,
packages/ubo-react-components/src/syncfusion-extentions/InputPrefix/styles/_input_prefix.css.
Global Typography Foundations
| Selector / style | Definition | Example |
|---|---|---|
html |
Global font family: Inter. |
Inter is the base font for docs and app UI. |
.e-control, .e-css, .e-error |
font-family: Inter, font-size: 12px, font-weight: normal. |
Syncfusion control baseline text (12px). |
.e-error |
Error text color set to #dc2626. |
Validation message sample |
Local Extension Text Rules
| Area | Text style definitions | Example |
|---|---|---|
| File Uploader |
Uses utility classes such as text-lg, font-bold,
text-sm, and text-gray-600 for title/caption hierarchy.
|
Upload a file
CSV or Excel files only
|
| Input Prefix |
Prefix labels use text-xs and text-gray-500 for subtle context text.
|
NGN | Amount
|
| Pill Tabs | Typography mostly inherited from Syncfusion/Tailwind defaults; emphasis handled through state (active border/background). |
Overview | Transactions | Notes
|
Tailwind Text Utilities Referenced In Repo CSS
From a direct scan of repo-owned CSS files, these text-related utility classes are used in
@apply rules:
| Utility class | Where it appears | Notes |
|---|---|---|
text-lg |
FileUploader/styles/_file-uploader.css |
Used for larger uploader title text. |
text-sm |
FileUploader/styles/_file-uploader.css |
Used for uploader captions/subtext. |
text-xs |
InputPrefix/styles/_input_prefix.css |
Used for compact prefix labels. |
text-gray-600 |
FileUploader/styles/_file-uploader.css |
Muted body/caption text color. |
text-gray-500 |
InputPrefix/styles/_input_prefix.css |
Muted prefix text color. |
font-bold, font-normal |
FileUploader/styles/_file-uploader.css |
Controls emphasis levels in uploader text. |
About Classes Like h1 and text-xl
You are right that classes/elements like h1 and text-xl are used
throughout UBO React components. However, they are generally not custom-defined in repo CSS files.
text-xl(and similar) comes from the Tailwind framework defaults.h1/h2styling usually comes from browser defaults or component-level utility classes, unless explicitly styled in a local stylesheet.- Repo-owned CSS primarily defines Syncfusion base typography and a small set of extension utility mappings.
Semantic Text Color Helpers (Syncfusion Theme)
In UBO_tailwind_theme.css, semantic helpers are also present:
.e-warning, .e-success, .e-information.
.e-warninguses#c2410c.e-successuses#15803d.e-informationuses#0e7490
Notes
- There is no single tokenized typography scale file in this repo yet (e.g., no dedicated
--font-size-*token set). - Most typography comes from Syncfusion base theme + Tailwind utility classes in component styles.
- If useful, we can add a formal text token set next (e.g., Display, Heading, Body, Caption) and map it to CSS variables.