Abdul Studio

CSS Style Library

The shared design system behind every Abdul Studio tool — from the CMS dashboard to proposal generators, quotation builders, and client tools. Use these tokens, components, and patterns to build new tools that look and feel like the rest of the suite.

Design Principles

🌑

Dark by Default

All tools use dark backgrounds (#1a1a1a → #313131). White is reserved for exported documents only.

💠

Sky Blue Accent

#29aee6 is the single dominant accent. Used for interactive elements, highlights, and brand moments.

🔤

Syne + DM Sans

Syne for all headings and UI labels. DM Sans for body text. JetBrains Mono for code and data.

Foundation

Design Tokens

All values are defined as CSS custom properties on :root. Copy the variables block into any new tool.

:root variables

/* ── BRAND PALETTE ── */
:root {
  --sky: #29aee6;
  --sky2: #1a8fc4;
  --sky3: #0e5a6e;
  --sky-dim: rgba(41,174,230,0.12);
  --sky-border: rgba(41,174,230,0.25);

  /* Backgrounds */
  --bg: #1a1a1a;
  --bg2: #212121;
  --bg3: #2a2a2a;
  --bg4: #313131;
  --bg5: #383838;

  /* Text */
  --white: #f0f0f0;
  --muted: rgba(240,240,240,0.42);
  --muted2: rgba(240,240,240,0.2);

  /* Borders */
  --border: rgba(240,240,240,0.07);
  --border2: rgba(240,240,240,0.12);

  /* Status */
  --green: #2ecc71;
  --red: #e74c3c;
  --amber: #f39c12;

  /* Typography */
  --fh: 'Syne', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --fm: 'JetBrains Mono', monospace;

  /* Spacing scale */
  --space-xs: .28rem;
  --space-sm: .55rem;
  --space-md: .9rem;
  --space-lg: 1.4rem;
  --space-xl: 2.2rem;

  /* Border radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 99px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.2);
  --shadow-md: 0 4px 20px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.4);
  --shadow-sky: 0 0 20px rgba(41,174,230,.25);
}

Visual

Colors

The palette is intentionally tight: dark neutrals, one sky blue accent, and semantic status colors. Never add new hues without a strong reason.

Brand Accent

Sky

#29aee6 ↗ copy

Sky 2 (hover)

#1a8fc4

Sky 3 (deep)

#0e5a6e

Sky Dim

rgba(41,174,230,0.12)

Backgrounds

BG (page)

#1a1a1a

BG2 (sidebar)

#212121

BG3 (input)

#2a2a2a

BG4 (raised)

#313131

BG5 (hover)

#383838

Status Colors

Green (success)

#2ecc71

Red (error)

#e74c3c

Amber (warning)

#f39c12

Visual

Typography

Three font families, each with a distinct role. Import all three from Google Fonts.

Google Fonts import

<!-- Add to <head> -->
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Syne — Headings & UI Labels (--fh)

font-family: var(--fh)Used for: titles, section headers, badge labels, nav items, buttons

800

Abdul Studio

700

Project Questionnaire

600

Section Title

400

LABEL TEXT · BADGE

DM Sans — Body & UI text (--fb)

font-family: var(--fb)Used for: body text, form labels, descriptions, metadata

300

The quick brown fox jumps over the lazy dog. Used for long-form descriptions and subtitles.

400

Body text, form values, standard paragraph copy at regular weight.

500

Form labels, metadata, slightly emphasized UI text.

JetBrains Mono — Code & Data (--fm)

font-family: var(--fm)Used for: code snippets, hex values, reference numbers, API tokens

400

#29aee6 · QT-2026-001 · nfp_QrojAWg5wSFbbJg...

600

@font-face { font-family: 'Syne'; src: url('...') format('woff2'); }

Visual

Gradients

Standard gradients used across document headers, hero sections, and accent elements.

Header Gradient (dark documents)

linear-gradient(135deg, #111 0%, #1e2a32 55%, #0e3a4a 100%)

Sky Glow (radial, hero bg)

radial-gradient(ellipse at 70% 0%, rgba(41,174,230,0.25) 0%, transparent 65%)

Spinning Ring (avatar, cert cards)

conic-gradient(from 180deg, #29aee6, #0e5a6e, #29aee6)

Bottom Fade (project grid)

linear-gradient(to bottom, transparent 0%, var(--bg) 80%)

Progress / Sky Bar

linear-gradient(90deg, #29aee6, #1a8fc4)

Accent Bar (agreement footer)

linear-gradient(90deg, #29aee6, #0e5a6e)

Foundation

Spacing & Border Radius

Spacing Scale

Token	Value	Use case
--space-xs	.28rem	Icon gap, tight labels
--space-sm	.55rem	Field gap, chip spacing
--space-md	.9rem	Form row gap, card padding
--space-lg	1.4rem	Section inner padding
--space-xl	2.2rem	Section margin
--space-2xl	3.5rem	Page padding

Border Radius

Token	Value	Use case
--r-sm	6px	Buttons (sm), copy btns
--r-md	10px	Inputs, small cards
--r-lg	14px	Main cards, panels
--r-xl	20px	Large feature cards
--r-pill	99px	Buttons, badges, chips

Visual

Shadows

--shadow-sm

Small

--shadow-md

Medium

--shadow-lg

Large

--shadow-sky

Sky Glow

Components

Buttons

All buttons use font-family: var(--fh) (Syne) with font-weight 700. Border-radius defaults to --r-pill.

CSS

.btn {
  font-family: var(--fh);
  font-size: .76rem;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: .62rem 1.4rem;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .03em;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.btn-primary { background: var(--sky); color: #fff; box-shadow: var(--shadow-sky); }
.btn-primary:hover { background: var(--sky2); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--sky); border: 1.5px solid var(--sky); }
.btn-muted { background: var(--bg4); color: var(--white); border: 1px solid var(--border2); }
.btn-danger { background: rgba(231,76,60,.1); color: var(--red); border: 1px solid rgba(231,76,60,.3); }

Sizes

CSS

.btn-sm { font-size: .66rem; padding: .42rem .95rem; }
.btn-lg { font-size: .88rem; padding: .82rem 2rem; }

Components

Badges & Labels

Current Live Error Deploying Draft

CSS

.badge {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .18rem .55rem;
  border-radius: var(--r-pill);
  border: 1px solid;
}
.badge-sky   { background: var(--sky-dim);          color: var(--sky);   border-color: var(--sky-border); }
.badge-green { background: rgba(46,204,113,.1);   color: var(--green); border-color: rgba(46,204,113,.25); }
.badge-red   { background: rgba(231,76,60,.08);   color: var(--red);   border-color: rgba(231,76,60,.2); }
.badge-amber { background: rgba(243,156,18,.1);   color: var(--amber); border-color: rgba(243,156,18,.25); }

Status Dots

Live

Deploying

Error

Offline

CSS

.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-live    { background: var(--green); box-shadow: 0 0 6px rgba(46,204,113,.5); }
.dot-pending { background: var(--amber); animation: pulse 1s infinite; }
.dot-error   { background: var(--red); }
@keyframes pulse { 0%,100% {opacity:1} 50% {opacity:.3} }

Components

Form Inputs

Client Name

Email

Description

Underline Style

CSS

.input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: .6rem .9rem;
  color: var(--white);
  font-family: var(--fb);
  font-size: .83rem;
  outline: none;
  transition: border-color .2s;
}
.input:focus { border-color: var(--sky); }
.input::placeholder { color: var(--muted2); }
/* Underline variant */
.input-underline { background: transparent; border: none; border-bottom: 1.5px solid var(--border2); border-radius: 0; padding: .35rem 0; }

Components

Chips & Tags

Used for multi-select filters, project type selectors, and tag inputs. Works with hidden checkboxes or JS toggle.

Brand Identity

UI/UX Design

Social Media

Web Development

Motion Design

Art Direction

CSS

.chip {
  font-size: .7rem;
  font-weight: 500;
  padding: .28rem .72rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border2);
  color: var(--muted);
  cursor: pointer;
  transition: all .18s;
  user-select: none;
}
.chip:hover, .chip.on {
  background: var(--sky-dim);
  border-color: var(--sky);
  color: var(--sky);
}

Components

Cards

Default Card

Standard card with bg3 background and subtle border.

Sky Accent Card

Highlighted card for callouts and featured content.

Glow Card

Used for active states or current selection indicators.

CSS

.card      { background: var(--bg3);  border: 1px solid var(--border);       border-radius: var(--r-lg); padding: 1.2rem 1.4rem; }
.card-sky  { border-color: var(--sky-border); background: rgba(41,174,230,.04); }
.card-glow { border-color: var(--sky-border); box-shadow: var(--shadow-sky); }

Components

Toggles

Dark Mode

PDF Dark (on)

Stamp

CSS + HTML

<!-- HTML -->
<div class="toggle-wrap" onclick="this.classList.toggle('on')">
  <div class="toggle-track"><div class="toggle-thumb"></div></div>
  <span class="toggle-label">Label</span>
</div>

/* CSS */
.toggle-wrap    { display: flex; align-items: center; gap: .42rem; cursor: pointer; user-select: none; }
.toggle-track   { width: 28px; height: 15px; background: var(--bg3); border-radius: 99px; position: relative; border: 1px solid var(--border); }
.toggle-thumb   { width: 9px; height: 9px; background: var(--muted); border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: all .2s; }
.toggle-wrap.on .toggle-track { background: rgba(41,174,230,.2); border-color: var(--sky); }
.toggle-wrap.on .toggle-thumb { background: var(--sky); transform: translateX(13px); }

Components

Toasts

✓ Deployed successfully!

✕ Export failed

ℹ Building PDF...

CSS + JS

.toast {
  position: fixed;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: .65rem 1.1rem;
  font-family: var(--fh); font-size: .72rem; font-weight: 600;
  opacity: 0; transition: all .3s; z-index: 9999;
}
.toast.show    { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { border-color: rgba(46,204,113,.3); color: var(--green); }
.toast.error   { border-color: rgba(231,76,60,.3);  color: var(--red); }
.toast.info    { border-color: var(--sky-border);      color: var(--sky); }

/* JS */
function showToast(msg, type='info') {
  const t = document.getElementById('toast');
  t.textContent = msg; t.className = `toast show ${type}`;
  clearTimeout(t._t);
  t._t = setTimeout(() => t.classList.remove('show'), 3000);
}

Components

Progress Bars

Uploading...72%

Deploying45%

Complete100%

CSS

.prog-bar  { height: 4px; background: var(--bg4); border-radius: 99px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 99px; background: var(--sky); transition: width .35s; }

Patterns

Layout / Sidebar Pattern

The standard two-panel layout used in every Abdul Studio tool: sticky 56px topbar + fixed sidebar + scrollable main area.

CSS

/* ── TWO-PANEL LAYOUT ── */
body {
  display: grid;
  grid-template-columns: var(--sidebar, 260px) 1fr;
  grid-template-rows: 56px 1fr;
  height: 100vh;
  overflow: hidden;
}
.topbar { grid-column: 1 / -1; background: var(--bg2); border-bottom: 1px solid var(--border); }
.sidebar { background: var(--bg2); border-right: 1px solid var(--border); overflow-y: auto; }
.main    { overflow-y: auto; padding: 1.5rem 2rem; background: var(--bg); }

/* ── SIDEBAR NAV ITEM ── */
.nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .65rem; border-radius: var(--r-sm);
  font-size: .78rem; color: var(--muted);
  cursor: pointer; transition: all .15s;
}
.nav-item:hover  { background: var(--bg3);     color: var(--white); }
.nav-item.active { background: var(--sky-dim); color: var(--sky); font-weight: 500; }

Patterns

Timeline

Aug 2025 — Present

Art Director

Masar Real Estate

Mar 2025 — Jul 2025

Art Director

MarkUP Marketing Agency

CSS

.tl          { position: relative; padding-left: 1.8rem; }
.tl::before  { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: linear-gradient(to bottom, var(--sky), var(--sky3), transparent); }
.tl-item     { position: relative; padding-left: 1.8rem; margin-bottom: 2.4rem; }
.tl-dot      { position: absolute; left: -2.2rem; top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--sky); }
.tl-period   { font-size: .65rem; color: var(--sky); letter-spacing: .1em; text-transform: uppercase; }
.tl-role     { font-family: var(--fh); font-weight: 700; font-size: .95rem; }
.tl-company  { font-size: .8rem; color: var(--muted); }

Patterns

Document Headers

Used in proposals, quotations, agreements, and briefs. Always dark gradient, even in light documents.

Brand Identity

Proposal for O2 Pro Shop

24 April 2026

CSS

.doc-header {
  background: linear-gradient(135deg, #111 0%, #1e2a32 55%, #0e3a4a 100%);
  padding: 2.8rem 3.2rem 2.4rem;
  position: relative; overflow: hidden;
}
.doc-header::before {
  content: ''; position: absolute;
  top: -50px; left: -50px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41,174,230,0.14) 0%, transparent 70%);
}
.doc-tag { font-size: .58rem; color: #29aee6; letter-spacing: .2em; text-transform: uppercase; }
.doc-title { font-family: var(--fh); font-size: 1.65rem; font-weight: 800; color: #fff; }

Patterns

Section Labels

About me

Selected work

What I do

CSS

.section-label {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sky);
  display: flex; align-items: center; gap: .7rem;
}
.section-label::before { content: ''; width: 24px; height: 1.5px; background: var(--sky); }

Patterns

Deploy Log

[14:23:01] Starting deployment...
[14:23:02] Generating data.js (18.4 KB)
[14:23:02] data.js generated ✓
[14:23:04] Uploading to Netlify CDN...
[14:23:07] Deploy successful! data.js is now live.
[14:23:01] ERROR: Auth token expired

CSS

.deploy-log {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .9rem 1rem;
  font-family: var(--fm);
  font-size: .72rem;
  max-height: 180px;
  overflow-y: auto;
  line-height: 1.7;
}
.log-ok   { color: var(--green); }
.log-err  { color: var(--red); }
.log-info { color: var(--sky); }
.log-muted{ color: var(--muted); }