Smart Draw System Theme

The official design system for the Ministry's Smart Draw platform. A synthesis of governmental authority and modern interface precision.

Logo Assets

Our visual identity is anchored by the Smart Draw wordmark and the Ministry of Commerce & Industry emblem. Use the light versions on dark backgrounds and dark versions on light backgrounds.

Smart Draw Primary
Smart Draw Logo Dark
smartDrawLogo.svg Dark / Pos
Smart Draw Logo White
smartDrawLogoWhite.svg White / Rev
MOCI Official Emblem
MOCI Logo Dark
ministryOfCommerence&IndustryLogo.png Standard
MOCI Logo White
ministryOfCommerence&IndustryLogoWhite.png Reversed

Core Palette

Our primary blue represents stability and authority, while the gold foil accent provides a layer of prestige.

Brand
Ink #0B1024
Institutional Blue #1F41BB
Gold #C9A86A
Surfaces
Canvas #FAF8F2
Paper #F6F3EC
Paper Deep #EFEAE0
Card #FFFFFF
Semantic
Muted #6E7493
Success #047857
Critical #B91C1C

Typography

IBM Plex Sans for display and body. IBM Plex Mono for codes, identifiers, and tabular numbers. Pair a large display headline with a small uppercase eyebrow label for editorial hierarchy.

Eyebrow
Smart Draw — System
Display H1

Editorial Headline

Page Title

Dynamic Dashboard

Body

Professional typography for maximum readability. Boundaries are defined by sophisticated background shifts and layered surfaces rather than heavy borders.

Muted

Use muted (#6E7493) for secondary information to preserve a soft contrast.

Mono / Tabular
KWD 1,248.50 · CR 192834

Grid & Spacing

Our spatial system is based on a refined 8px grid, prioritizing negative space to reduce cognitive load.

Layout Containers
6 Columns
6 Columns

Use .row.g-4 for standard content grouping.

Buttons

Primary in Institutional Blue. Gold for premium / scan-style actions. All buttons have a subtle scale on press.

Form Elements

Clean, accessible form controls with premium focus states.

Text Inputs
Select & Toggle
Enable Notifications

Badges & Status

Semantic indicators used for approvals, states, and categories.

Status Indicators
Active Approved Pending In Review Cancelled Completed 
<span class="badge-status badge-active">Active</span>
<span class="badge-status badge-pending">Pending</span>

Cards & Metrics

The primary building blocks for data visualization and grouping.

38
Total Companies
12.4K
Total Users
24
Active Draws

Alerts & SweetAlert

Standard Alerts
Success message toast style.
Error or restriction alert.
SweetAlert Triggers

Modals

The unified .sd-modal pattern is used across admin and corporate surfaces. Built on Bootstrap's standard structure — header / body / footer — so it inherits proper RTL behavior and the close button automatically moves to the leading edge in Arabic.

Unified Modal — English & Arabic
<div class="modal fade sd-modal" id="myModal">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold">Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="sd-modal-section">
          <div class="sd-modal-section-title"><i class="ph ph-info"></i> Section</div>
          <!-- form fields, stats, etc. -->
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary px-4">Save</button>
      </div>
    </div>
  </div>
</div>
Legacy Standard Modal

Tables (FooTable)

Entity Identifier Status Action
Al-Ghanem Trading
 CR 192834 Active