Stay on top of recent system events and updates.
Version 2.4.1 is ready to install with new features.
2 minutes ago
Alex Brown from Canada has joined the platform.
15 minutes ago
Daily backup has been successfully completed.
1 hour ago
Unusual login activity detected from new location.
3 hours ago
Your analytics report for September is now available.
Yesterday
Scheduled maintenance will begin at 2:00 AM EST.
2 days ago
Our carefully selected typefaces for optimal readability and design consistency
A futuristic, geometric sans-serif typeface used for all headings and display text.
A modern, proportional sans-serif typeface for body text and UI elements.
A clean, modern monospace font designed for code listings and technical documentation.
// Laravel Route Example
Route::get('/dashboard', function () {
return view('admin.dashboard');
})->name('admin.dashboard');
// Blade Template
@if($user->isAdmin())
<div class="alert alert-success">
Welcome, {{ $user->name }}!
</div>
@endifHow to apply these fonts in your code
/* CSS Classes */
.orbitron { font-family: "Orbitron", sans-serif; }
.orbitron-400 { font-weight: 400; }
.orbitron-600 { font-weight: 600; }
.orbitron-800 { font-weight: 800; }
/* HTML Example */
<h1 class="orbitron-600">Heading</h1>/* CSS Classes */
.space-grotesk { font-family: "Space Grotesk", sans-serif; }
.space-grotesk-300 { font-weight: 300; }
.space-grotesk-400 { font-weight: 400; }
.space-grotesk-600 { font-weight: 600; }
.space-grotesk-800 { font-weight: 800; }
/* HTML Example */
<p class="space-grotesk-400">Body text</p>/* CSS Classes */
.ubuntu-sans-mono {
font-family: "Ubuntu Sans Mono", monospace;
font-weight: 300;
}
/* HTML Example */
<code class="ubuntu-sans-mono">function()</code>Large, attention-grabbing text for headers and hero sections
Modern Admin Dashboard
Built with Bootstrap 5 and Laravel
Semantic heading hierarchy for content structure
This is a lead paragraph that stands out from regular text.
Regular paragraph text that provides context and information to the user.
More detailed information that supports the main content.
Additional details and supporting information.
Bootstrap's responsive font size utilities
Text alignment, transformation, and styling utilities
This text is aligned to the start (left in LTR languages).
This text is centered in the container.
This text is aligned to the end (right in LTR languages).
ALL UPPERCASE TEXT
all lowercase text
each word capitalized
Normal text without transformation
Light weight text (300)
Normal weight text (400)
Bold weight text (700)
Italic style text
Control text spacing and readability
This is the lead paragraph with base line height for optimal readability. It provides enough space between lines to make the text comfortable to read.
This is the body text with large line height for extended reading. The increased spacing makes it easier to follow along and reduces eye fatigue when reading longer content.
Typography that adapts to different screen sizes
Flexible Paragraph
Increases in size on larger screens for better readability| Class | Mobile ( < 576px) | Small (≥ 576px) | Medium (≥ 768px) | Large (≥ 992px) | XL (≥ 1200px) |
|---|---|---|---|---|---|
fs-1 fs-sm-2 fs-md-3 fs-lg-4 fs-xl-5
|
2.5rem (40px) | 2rem (32px) | 1.75rem (28px) | 1.5rem (24px) | 1.25rem (20px) |
display-6 display-md-5 display-lg-4
|
2.5rem (40px) | 2.5rem (40px) | 3rem (48px) | 3.5rem (56px) | 3.5rem (56px) |
Typography in action across different components
Your changes have been saved successfully.
Please review your settings before proceeding.