QIC / THE COMPLETE DESIGN SYSTEM

COBALT ORBIT · V1.0

Clarity, with
a new dimension.

A modern corporate system.
Every page. Every essential element.

FOUNDATIONS / COMPONENTS / WEBSITE PATTERNSHTML + CSS + JS · EN / AR

The selected 3D direction, expanded into a full landing page and a practical system for company content, financial reports, governance and investor resources.

View scope coverage

26System chapters

34Page destinations

600Archive source records

EN / ARResponsive examples

A new dimension for QIC

Cobalt Orbit combines confident typography, tactile cards and sculpted blue-and-glass forms with the original QIC identity.

Original bilingual signature · preserve proportions

Expressive where it matters

Dimensional hero art and editorial cards create a memorable first impression.

Clear where it counts

Financial information uses restrained rows, tables and filters. Depth never competes with the information.

True to the company

Keep blue and green, bilingual identity and a considered corporate voice.

Colour & semantic tokens

Blue leads actions, green carries the brand accent, and light surfaces support readable data. Status colours always have text labels.

Small green text uses --qic-green-text: #00783E. Light blue is a surface, never a low-contrast body-text colour.

Typography with conviction

Manrope brings a bold geometric Latin voice. Noto Sans Arabic preserves an equally considered Arabic reading rhythm.

Display88 / 91 · 800

Invested in
what comes next.

Page title64 / 74 · 700

Financial reports.

Section title48 / 56 · 700

A clearer perspective.

Card title24 / 32 · 700

Investor information

Body16 / 26 · 400

Reports, disclosures and shareholder resources. Clear information, without the complexity.

Eyebrow11 / 18 · 750

QIC · ESTABLISHED 1982

Fluid sizes adapt to screen width. Arabic has no added tracking, uses its own font and increases display line height to 1.45–1.5.

Space, shape & elevation

A four-pixel rhythm, generous page gutters and three purposeful levels of depth.

Content width1320 px maximum

Desktop gutter64 px at 1440

Mobile gutter20 px minimum

Controls12 px radius · 48 px high

Cards / feature tiles24 / 28 px radius

Tap targets44 px minimum

01 / Flat

Tables, report lists, content

02 / Raised

Distinct cards and resources

03 / Floating

Hero feature · overlays

123456789101112

.qic-container { width: min(calc(100% - var(--qic-gutter) * 2), 1320px); margin-inline: auto; }
/* Space: 4, 8, 12, 16, 24, 32, 48, 64, 80, 112, 144 */
/* Keep financial tables flat; reserve float shadows for important objects. */

Buttons, links & focus

One primary action per context. Secondary, text, circular and inverse variants share clear hover, focus and disabled states.

Explore QICInvestor Relations

Explore QIC Financial reports

<a class="qic-button" href="home.html#/en/about">Explore QIC</a>
<button class="qic-button qic-button--secondary">View reports</button>
<button class="qic-round-button" aria-label="Open document details">…</button>

Cards with a sense of depth

Use the selected concept’s sculptural language for destinations and stories. Reports remain clean, distinct objects.

Investor Relations

Reports, disclosures and shareholder resources.

Explore

Our perspective

Built on heritage. Focused on tomorrow.

Our story

Q1 2026Financial statements

Financial results for the period ended 31 March 2026

Published 13 May 2026 · Original company PDF

Financial report rows

Designed for document-heavy pages: title, reporting year, reporting period, publication date, file-language status and distinct detail/download actions.

<article class="qic-financial-row">
  <span class="qic-doc-icon">…</span>
  <div><h3>Report title</h3><p>Document type · Reporting period · Year</p></div>
  <time datetime="2026-05-13">13 May 2026</time>
  <span>File language<br>Not verified</span>
  <div class="qic-report-actions">Details / PDF</div>
</article>

Publication date and financial period are separate fields. Unknown file language stays unverified; it is not inferred from the record’s interface language.

Tables built for real information

Semantic captions and column headings, visible sorting, numeric alignment, comfortable rows and keyboard-accessible horizontal scrolling on small screens.

Financial reporting register

Financial Results for the Period Ended March 31,2026Financial statements	2026 / Q1	2026-05-13
Management Discussion and Analysis Report for the Period Ended March 31,2026Management discussion	2026 / Q1	2026-05-13
Financial Results for the Period Ended December 31,2025Financial statements	2025 / Annual	2026-03-10

Click a column heading to sort. Tables remain tables on mobile inside a named, focusable scroll region; document row mode is offered as a more compact alternative.

The complete document archive pattern

Historical source records with keyword, reporting year, period, type and file-language filters; removable filter chips, row/table views, sorting, pagination and empty states.

Document detail & downloads

A clear handoff from search or a report row to original files, their metadata and the related archive.

PDF

Financial results — Q1 2026

Reporting year: 2026
Reporting period: Q1
Publication date: 13 May 2026
File language: Not verified

Distinct actions

Details open a keyboard-accessible dialog. Download opens the original company PDF in a new tab. A dedicated document page is also available.

Bilingual relationships

The language switch uses the source translation relationship when an equivalent record exists.

Honest file metadata

No invented file sizes or language labels. Original source URLs remain available for review.

Open document page

Share & shareholder information

Listing metadata, effective dates and shareholder values require one approved dataset across both languages.

Share information — awaiting approved data
		Status
Share capital	—	Awaiting confirmation
Number of listed shares	—	Awaiting confirmation
Major shareholder percentages	—	Awaiting confirmation
Approved effective date	—	Awaiting confirmation

Dashes indicate unavailable approved values, rather than zero. Conflicting legacy shareholder figures are deliberately excluded.

View shareholder page

Meetings, dividends & investor resources

Reusable meeting/document rows support notices, agendas, proxy forms, minutes and results. Dividend resources use the same reliable document model.

General assembly records
		Action
Annual General Meeting 15.04.2026 - Minutes	2026-04-16
Invitation to Attend Annual General Meeting on 15/04/2026 at 12:00	2026-03-16
AGM Results held on 25/03 at 21:00 pm	2025-03-26

Dividends & unclaimed dividends

Notices, history and supporting documents

Investor resources

Rights guide and securities publications

Participation links point to the agreed existing service after confirmation for the relevant meeting. No new voting or investor-account platform is implied.

Company, board & investment content

Rich text, heritage timelines, governance cards, board profiles and investment entries share a restrained structure. Unapproved content has an explicit review state.

1982

Our establishment

Founded as a public joint stock company in Umm Al Qaiwain on 11 February 1982.

2016

A new investment focus

Shareholders approved the company’s change of name and investment direction.

Profile awaiting approval

Board member profile

Name, role, biography and approved portrait are populated from confirmed client materials.

Rich-text content

Keep paragraphs readable, use meaningful headings and link to supporting source documents.

A considered perspective, communicated with clarity.

Semantic headings and ordered reading.
Approved images with informative alternative text.
Clear source, publication and update information when relevant.

News, events & media

Editorial cards, event metadata, media downloads and useful empty states are available without inventing news, event dates or portraits.

Editorial pattern · content pending

Corporate news article

Approved title, summary, category, publication date and optional image are supplied before publication.

View news layout

Event pattern · no event scheduled

—Date pending

Corporate event

Location, event time, description and registration link are populated from approved details.

View events layout

Original QIC logo

Design preview asset · retain proportions

Forms & input states

Visible labels, text/email fields, select controls, message areas, checkboxes, radio groups, required states and retained values.

Communication preference · example Email Telephone

Unavailable fieldExplain why a control is unavailable.

Preview onlyThe form validates locally, displays a review dialog and keeps values when editing. It does not send email.

Feedback, badges & loading states

Success, warning, information and error patterns pair meaningful text with accessible colours. Loading has an explicit state and completion feedback.

InformationOriginal company PDFs open in a new tab.

ReadyYour document selection is available.

Review requiredCheck the reporting period before using this report.

Action neededComplete the required fields to continue.

PDFAvailablePending approvalArchived

Loading documents…

Empty, unavailable & 404 states

A useful empty state explains what happened and gives a clear next step.

No documents found

Try a broader keyword or remove a filter. Your active filters stay visible above the results.

Try the archive

Content awaiting approvalUse an explicit review state when content has not been confirmed.

404 / Page not found

Return to the homepage or use the main navigation.

View 404 pattern

Tabs, accordions & supporting detail

Secondary content is reachable without crowding the main page. Native disclosures and keyboard-operable tabs reduce unnecessary complexity.

How are reports classified?

Reports have separate fields for reporting year, period, document type, publication date and file language. Unknown values remain explicit.

How do keyboard controls work?

Tab reaches actions, arrow keys move across tabs, Escape closes disclosures and dialogs, and focus returns to the opening trigger.

How is Arabic supported?

Logical spacing, mirrored directional arrows and Noto Sans Arabic support right-to-left reading with its own typographic rhythm.

Website search & results

Search covers page titles, descriptions and the historical document archive. Results distinguish pages from PDFs and lead to a clear next step.

Enter a keyword.

Arabic & responsive behaviour

Language switching retains the equivalent page, and document relationships are respected when the matching translation exists.

Arabic landing page

أم القيوين · منذ ١٩٨٢

نستثمر اليوم
لما هو قادم.

شركة استثمارية إماراتية برؤية تدوم.
التقارير والإفصاحات وموارد المساهمين.

التقارير المالية

Desktop ≥1024 px · tablet 701–1023 px · mobile ≤700 px. Tables retain semantic structure inside a labelled scroll region. Page sections and cards stack without hiding essential actions.

Complete page patterns

The full landing page extends the selected concept with company story, investments, financial reporting, governance, sustainability, disclosures, contact and a complete footer.

PAGE PATTERN

Website coverage, tied to scope

The catalogue covers the public-facing patterns in quotation Q-11844 and Appendix A. It is a local design system, not a production WordPress or administration build.

Scope coverage
	Patterns supplied
Home	Hero, 3D art, floating feature card, bento links, story, report rows, governance, sustainability, disclosures, CTA, footer
About	Page header, section navigation, rich text, heritage timeline, approval state
Investments	Overview cards, investment content template, portfolio/approval state
Governance	Board profile, report archive, policy documents, detail/download flow
Investor Relations	Overview, financial archive, disclosures, shareholder table, meetings, dividends, rights/resources
Sustainability	Approach content and sustainability/integrated report archive
News & Media	News/article card, event pattern, media download, intentional empty state
Contact	Contact details, map link, form controls, validation, error summary, review dialog
Global	EN/AR routes, mobile menu, dropdowns, search, breadcrumb, site map, privacy, 404, keyboard states

All 34 page destinations from the bilingual registry are available in the preview. Client-approved copy, holdings, board portraits and a unified shareholder dataset are still required. No trading service, investor account, live market feed or new voting platform is included.

Accessibility & interaction rules

Readable text, visible focus, semantic tables and predictable interactions belong to every component.

Colour & focus

Action blue, slate and green text are checked against white. Focus rings remain visible. Status never depends on colour alone.

Keyboard & overlays

Native dialogs trap focus and restore it on close. Escape dismisses menus/dialogs. Tabs support arrow, Home and End keys.

Motion & target size

Reduced-motion preferences disable transitions. Touch controls have at least 44 px targets.

Table & form semantics

Tables use captions and scope. Inputs have associated labels, required indicators, error descriptions and a focused error summary.

A complete local kit

Plain HTML, CSS and small JavaScript modules, with local fonts, official icons, generated 3D assets, data examples and implementation notes.

Download the full kit CSS tokens Component CSS JSON tokens

<link rel="stylesheet" href="components.css">
<!-- For page compositions add site.css. For documentation add guide.css. -->
<section class="orbit-section">
  <div class="qic-container">Your content</div>
</section>

Fonts: Manrope / Noto Sans Arabic (OFL). Icons: Bootstrap Icons (MIT). Licences included. 3D artwork generated from the selected concept.

Clarity, witha new dimension.

A new dimension for QIC

Colour & semantic tokens

Typography with conviction

Space, shape & elevation

Buttons, links & focus

Navigation & wayfinding

Cards with a sense of depth

Investor Relations

Our perspective

Financial results for the period ended 31 March 2026

Financial report rows

Tables built for real information

The complete document archive pattern

Document detail & downloads

Financial results — Q1 2026

Share & shareholder information

Meetings, dividends & investor resources

Dividends & unclaimed dividends

Investor resources

Company, board & investment content

Our establishment

A new investment focus

Board member profile

Rich-text content

News, events & media

Corporate news article

Corporate event

Original QIC logo

Forms & input states

Feedback, badges & loading states

Empty, unavailable & 404 states

No documents found

404 / Page not found

Tabs, accordions & supporting detail

Website search & results

Footer, contact & utility links

The company

Investor resources

Arabic & responsive behaviour

نستثمر اليوملما هو قادم.

Complete page patterns

Full landing page

Report archive

Document detail

Heritage timeline

Board & governance

Shareholder table

Events & media

Contact & form

Site search

Site map

Website coverage, tied to scope

Accessibility & interaction rules

A complete local kit

Clarity, with
a new dimension.

نستثمر اليوم
لما هو قادم.