F. BINSABBAR^®

Wordmark

The brand wordmark is F. BINSABBAR. Always uppercase, always with a period after the F, always one space, always rendered with the canonical .brand or .brand-name class so it inherits the right tracking and weight.

// HTML - the kit auto-walker wraps this on every page.
<span class="brand-name">F. BINSABBAR</span>

// kit canonical
.brand { font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; }

• Always uppercase in HTML source. Not just CSS-uppercased. Source must read F. BINSABBAR for screen readers, copy-paste, and any unstyled context.
• Never abbreviate to "FB" when you mean the brand. Exception: product names like FB Ambassadors and FB Butler use the FB prefix as a naming convention - that is allowed.
• The ®. Render as F. BINSABBAR<sup>®</sup> in formal mastheads (cover, footer, identity blocks). Drop the ® in body copy.
• Three sanctioned alternates exist. The everyday mark is the wordmark above; see Marks gallery for the House Logo, Full Wordmark with tagline, and the Arabic wordmark - each with its own use case.

Brand architecture

The portfolio is organised across three legal entities, each with its own short code used as an asset / folder / file prefix.

Marks gallery

The wordmark is the everyday mark. Three alternates are sanctioned for specific surfaces. SVGs render via currentColor - they re-tint per surface (dark plate inverts to white).

MASTER Wordmark · English

MASTER Wordmark · Arabic

FBJ House Logo

FBJ · INVERSE House Logo · dark surface

FBJ Full Wordmark · with tagline

• Wordmark (master) - everyday mark. Apps, web, packaging, documents. Available in English and Arabic; usable by FBJ, FBD, and FBC.
• House Logo (FBJ) - the heraldic mark of the Jewellery House. Showroom signage, packaging seal, the storefront, ceremonial contexts.
• Full Wordmark with tagline (FBJ) - formal presentations, covers, jewellery-specific collateral. Never on FBD or FBC materials - the tagline is jewellery-only.

Surfaces

The four surfaces F. BINSABBAR shows up on. Use these names verbatim - never abbreviate, never substitute.

Provenance

Trademark TM-01-00-44436-25, held by Faisal Binsabbar Design LLC, UNN 7025824553. Registered in the Kingdom of Saudi Arabia. The wordmark is a registered mark; its use outside the surfaces above requires written permission.

Color · Brand

Premium Yellow is the primary brand color. It carries the brand on hero surfaces, mastheads, and atmospheric washes. Signature Red is the action / accent (CTAs, focus, error). Vert and Royal Lavender are editorial accents - used sparingly for moments that warrant a different mood.

Color · Supporting

Neutrals and surface tones. Canvas is the default body background; Champagne anchors warm gradients; Ink is the default text.

Color · Text

Color · Semantic

Typography

Single family: Futura PT, served via Adobe Typekit (kit ID vvg4egg). Three working weights: 300 Light, 400 Book, 500 Medium. Italic and 200 are reserved for editorial moments only.

Spacing - 8 pt grid

An 8 pt grid. All padding, gaps, and margins read from these tokens. --s-9 is the 44 pt tap-target floor; control heights snap to this.

Radius

Six radius tokens. Pills for controls, glass for surfaces, smaller radii for chips and chrome.

Glass

Frosted glass on warm canvas is the brand's surface aesthetic. Three tokens cover the entire system. Use glass when the surface is interactive (cards, sheets, controls); fall back to solid rgba(255,255,255,0.40) for static reference panels (swatches, type specimens).

/* The kit utility - drop on any container */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-shadow);
  padding: var(--s-5);
}

Motion

Most transitions snap at 0.18s ease. Glass-card hovers are 0.18s on transform and box-shadow. Page-level loaders use a 1.2 s spin and a 1.6 s pulse. The kit honours prefers-reduced-motion globally - animations collapse to 0.01 ms when the user requests less motion.

Buttons

button.primary for the main action; button.secondary for alternatives; .btn for hyperlink-style CTAs in content.

<button class="primary">Save</button>
<a class="btn" href="…">Open Brand Book</a>
<a class="btn outline" href="…">Secondary</a>

Text & number inputs

.text-input is the 44 pt pill input; .v-input is the compact 32 pt centered numeric. Both inherit Futura, both grow a 2 px accent ring on hover.

Sliders

.slider-field wraps a label + range input + numeric display. Track is 4 px; thumb is 32 × 24 px pill in Ink.

Selects

.fb-select is the kit's pill-shaped dropdown - 44 pt height, uppercase tracked label, single-line. Native <select> under the hood, so accessibility is free.

<select class="fb-select">
  <option>Yellow gold 18k</option>
</select>

Segmented control

.quality-pick is a radio group rendered as a pill segmented control. Use for 2-4 mutually exclusive choices where the labels are short.

Radios & checkboxes

.radio-row and .check-row render the kit's custom 36×20 px pill control. Radio fills with an inner accent pill when checked; checkbox shows a check glyph. Both inherit the 44 pt tap target via the surrounding label.

Switch

.switch follows the iOS toggle: 60×31 px track, 32×23 px knob, accent fill when on. Wrap in .switch-row with a .lbl for an inline labelled toggle.

Cards & tiles

Three flavours: .glass-card (utility - bare glass surface), .card (content block with built-in h3/p styles), a.tile (clickable with hover lift + corner link-direction indicator).

Stat tiles

.stat is a glass tile with a big number on top of a small uppercase label. Use it for at-a-glance counts on hero/about panels.

Tabs (pill jump-nav)

Centered glass pill, always a single row. If items exceed available width the row scrolls horizontally inside the pill (scrollbar hidden). Works equally well for 3-item navs and 12-item navs on phone.

To pin under the viewport top, wrap the <nav class="tabs"> in <div class="tabs-bar sticky">. Splitting the sticky position onto a wrapper (instead of putting it directly on .tabs) is required because position: sticky + overflow-x on the same element doesn't trigger on iOS Safari.

// Pinned section nav - wrap the tabs in .tabs-bar.sticky
<div class="tabs-bar sticky">
  <nav class="tabs" aria-label="On this page">
    <a href="#section-1">Section 1</a>
    <a href="#section-2">Section 2</a>
  </nav>
</div>

Back link

Glass pill at the top of every non-home page. Single source in fb-ui.css; pages emit only the markup.

Badges, tags & role pills

Small pill chips for status, count, and role. Use sparingly - too many in one row reads as noise.

Material pill

.mat is the kit's material chip - pill-shaped, 44 pt tall, with a 22 px round swatch on the left. Used in the Studio Editor as a material picker; reusable anywhere a colour-tagged option needs choosing.

Toasts

Two flavours. .toast-static sits in flow as an inline status block. .toast-live is a fixed-position transient notification, fades in via a .show class. Both come in default / success / warning / error variants.

Tooltip

.tip wraps the trigger; the inner .tip-bubble is a real element so the frosted glass renders consistently in Safari (where ::after backdrop-filter is unreliable). Hover or focus to reveal. Keep tooltip text to a short label only - never use it for descriptions.

Modal · Drawer · Popover

Three primitives for "things that appear on top of the canvas". Each has an optional .show class for the visible state; pages drive that via JS. Esc and click-outside dismissal are application concerns.

Page loader

Full-page glass overlay used during initial load on every studio surface and the login gate. 70 px spinning ring + 40 px pulsing wordmark star. Inset matches the canvas frame (10 px / 30 px radius). Edge-to-edge on phone. Honours prefers-reduced-motion.

// Drop at the top of <body>:
<div class="page-loader" aria-hidden="true">
  <div class="ring"></div>
  <div class="star"><svg…></div>
</div>

// When ready to dismiss:
document.body.classList.add('fb-page-ready');

Brand icons

Monoline, 1.4 px stroke, 24×24 grid, rounded caps and joins. The library lives at icons.html with live filtering and sprite/ZIP downloads. Never embed icons from other sets - extend the brand library instead.

Page chrome

Every page sets html, body { background: var(--canvas-bg); } and inherits the 3-radial warm wash from the kit's body::before. The .page wrapper sets the page max-width and safe-area padding.

// Page wrapper - pages set their own max-width, everything else from kit.
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding:
    max(var(--s-10), calc(env(safe-area-inset-top) + var(--s-4)))
    max(var(--s-6), env(safe-area-inset-right))
    120px
    max(var(--s-6), env(safe-area-inset-left));
}

Hero pattern

Eyebrow + h1 + p, optionally with a 128 px .app-icon ornament on the right. Mobile collapses to a single column.

<header class="hero">
  <div>
    <p class="eyebrow">App</p>
    <h1>FB Ambassadors</h1>
    <p>The team's day-to-day operations app.</p>
  </div>
  <div class="app-icon"><svg…></div>
</header>

Footer pattern

Centered, uppercase, muted. Default kit footer is a single line of legal credit. Brand-book / cover-style pages can extend with a glass plate and trademark copy (see this page's footer).

The voice - quiet, considered, precise

We write the way we present. Calm before loud. Specific before clever. Every sentence is read twice before publishing - once for accuracy, once for rhythm. We avoid superlatives ("amazing", "stunning"), avoid empty hospitality language ("we're so excited"), and avoid CAPS for emphasis. The brand wordmark already carries the formality.

Tone shifts by surface. Concierge: warm, specific, second person. Ambassador app: direct, neutral, present tense. Brand book / system docs: editorial, third person, declarative. Errors: what happened, why, what to do - never "Oops".

Do & Don't

• 44 pt min tap target. Every interactive element height-snaps to --s-9 (44 px). Set in --control-h; never override below.
• Visible focus. 2 px Signature Red ring, 2 px offset, on every :focus-visible element. Already global in the kit; never set outline: none without a :focus-visible replacement.
• Reduced motion. @media (prefers-reduced-motion: reduce) collapses every animation and transition to 0.01 ms. Already global; don't add un-guarded long animations.
• Color contrast. --text-faint (#5a5a5a) is the lowest text tone we ship - chosen for WCAG AA on the warm canvas. Do not introduce a fainter text token.
• Screen-reader-friendly source. The wordmark is uppercase in HTML, not via text-transform alone. Decorative SVGs carry aria-hidden="true". Icon buttons need a visible label or aria-label.

Files

• guidelines/fb-ui.css - design tokens + every kit component class. The law.
• guidelines/brand-book.html - this document. The single canonical reference for identity, foundations, components, patterns, voice, accessibility.
• icons.html - live icon library, sprite + ZIP downloads.
• index.html - the brand-system masthead and directory of surfaces.
• ambassadors.html · studio.html · login.html - surface-specific reference pages.

Where to start

If you're new to the system, read in this order:

1. Identity - how to write the wordmark and what the four surfaces are.
2. Principles - the six rules.
3. Foundations > Color - the four brand colors, the supporting neutrals.
4. Components > Buttons / Cards / Inputs - the components you'll touch first.
5. Voice & Tone - before you write any copy.

Integration README

A live-generated Markdown reference for adopting the brand in another app. Includes the kit's CSS import, every token (color, spacing, radius, glass), typography, the canonical component class names, links to the icon library, and the app-icon / logo set. Generated from the live fb-ui.css on download - the values you get today reflect today's tokens. Re-download any time the system updates.

Maintenance

• This document is hosted at fb-brand.web.app/guidelines/brand-book.
• Bump the ?v= query on the fb-ui.css link in every HTML file when tokens change - Safari caches past no-store.
• When adding a kit component, document it here in Components with a live demo. No exception.
• When adding a token, document it under the relevant Foundations subsection. No exception.
• Integration README is regenerated from fb-ui.css on every download - no manual sync needed.