QR Library is a paid, API-first platform that lets businesses in Saudi Arabia generate unlimited QR codes in their corporate identity, then trace and manage every code after it's printed. The site speaks to technical and commercial buyers alike: confident, exact, and quietly premium — never playful or noisy. Powered by DuckDeals.sa.
The mark is the Material Symbols qr_code_scanner glyph in a rounded square carrying the brand gradient, paired with the Figtree wordmark. Maintain clear space equal to the height of the mark on all sides.
An ocean-blue system: deep navies ground the dark sections, ocean blue carries primary actions, and sea cyan is the single accent. Neutrals stay cool and lightly tinted.
All UI icons come from Google Material Symbols (Outlined, weight 400). One family, one weight — never mix icon sets. Use Ocean Blue on light surfaces and Sea Cyan on dark.
The product signature, also embedded at the center of every generated code.
Used in place of the word "SAR" across pricing. Tint to match its context.
Every component below ships in one namespaced stylesheet. Load the fonts, then qrlib.css, and use the .ql- classes. All colors, radii and spacing are driven by CSS custom properties on :root — override them once to retheme everything.
downloadDownload qrlib.css<!-- 1. fonts 2. library --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&family=JetBrains+Mono&family=Material+Symbols+Outlined"> <link rel="stylesheet" href="qrlib.css"> /* retheme by overriding tokens */ :root{ --ql-blue:#0b74c4; --ql-cyan:#1fb8d4; --ql-r:11px; } <div class="ql"> <!-- wrap your app to inherit type --> </div>
<button class="ql-btn ql-btn--primary">Primary</button> <button class="ql-btn ql-btn--secondary ql-btn--sm">Small</button> <button class="ql-btn ql-btn--primary ql-btn--loading">Saving</button> // + .ql-btn--tonal .ql-btn--ghost .ql-btn--danger .ql-btn--lg .ql-btn--block .ql-btn--icon
<div class="ql-field"> <label class="ql-label">Work email</label> <input class="ql-input" type="email"> </div> <select class="ql-select">…</select> <input class="ql-input" type="date"> <input class="ql-input" type="time"> <label class="ql-switch"><input type="checkbox"><span class="ql-track"></span></label> <input class="ql-range" type="range"> // states: .is-error .is-valid on inputs; .ql-input-icon / .ql-input-group wrappers
<div class="ql-table-wrap"> <table class="ql-table ql-table--hover ql-table--zebra">…</table> </div> <span class="ql-badge ql-badge--success"><i class="ql-dot"></i>Active</span> <nav class="ql-pagination"><a class="ql-page is-active">1</a>…</nav>
Overview — a summary of this code's destination, brand profile and lifecycle.
Analytics — scans over time, by city and by device, with attribution.
Settings — re-route the destination, pause, expire or archive this code.
<div class="ql-tabs"><button class="ql-tab is-active">Overview</button>…</div> <div class="ql-accordion"><div class="ql-acc-item is-open"> <button class="ql-acc-head">…</button><div class="ql-acc-body">…</div> </div></div> <nav class="ql-breadcrumb">…<span class="is-current">Spring Launch</span></nav>
Scans will stop resolving immediately. This cannot be undone.
<div class="ql-alert ql-alert--success">…</div> // --info --warn --danger <div class="ql-toast">…</div> <div class="ql-spinner"></div> <div class="ql-progress"><div class="ql-progress-bar" style="width:72%"></div></div> <div class="ql-overlay"><div class="ql-modal">…</div></div>
<span class="ql-badge ql-badge--info">Info</span> <span class="ql-chip">Dynamic</span> <div class="ql-avatar-group"><span class="ql-avatar">LA</span>…</div> <div class="ql-stat">…</div> <div class="ql-counter">…</div>