Logo

Marbl Codes Identity

Symbol, wordmark, and full logo. Animated version for headers. Four colour variants.

Symbol

Animated

Orange

White

Charcoal Deep

Beige

Full Logo

On dark

On light

Beige on dark

Wordmark

White on dark

Beige on dark

Colour Palette

Colours

Dark mode only. No light mode. From Figma. Every colour here is a CSS custom property in marbl.css.

Charcoal

#171415

--marbl-charcoal

Charcoal Deep

#0d0b0c

--marbl-charcoal-deep

Charcoal Light

#1d1a1b

--marbl-charcoal-light

Charcoal Lighter

#232021

--marbl-charcoal-lighter

Ember

#F35226

--marbl-ember

Ember Dark

#BB2F09

--marbl-ember-dark

Crimson

#322A2A

--marbl-crimson

Sandstone

#A69B98

--marbl-sandstone

Beige

#F3E2C8

--marbl-beige

Beige Dark

#DBCBA9

--marbl-beige-dark

Need a specific shade? Open the interactive shade picker →

Status

Status Colours

For feedback states only - forms, toasts, banners, badges. Ember stays the brand. Status colours are functional signals.

Success

#22c55e

--marbl-success

Warning

#f59e0b

--marbl-warning

Error

#ef4444

--marbl-error

Info

#3b82f6

--marbl-info

Verified — your profile is published.

Pending approval — changes queued for review.

Failed — email address not recognised.

Tip — drag to reorder list items.

Text Colours

White scale, not beige

All text uses white at varying opacity. Beige is backgrounds only, never text.

Primary heading text -rgba(255,255,255,1.0)

Body text -rgba(255,255,255,0.7)

Secondary / muted text -rgba(255,255,255,0.4)

Deeply muted text -rgba(255,255,255,0.25)

Typography

Type Scale

Urbanist for headings. Petrona italic for accents. Inter for body and buttons. Fluid clamp() on headings, fixed px on UI chrome.

Hero Heading

Urbanist 800--text-5xlclamp(56px, 2.5rem + 5vw, 112px)

Large Heading

Urbanist 700--text-4xlclamp(48px, 2rem + 3.5vw, 80px)

Page Heading

Urbanist 700--text-3xlclamp(36px, 1.5rem + 2.5vw, 56px)

Section Heading

Urbanist 700--text-2xlclamp(24px, 1.2rem + 1vw, 32px)

Thou Art That

.marbl-accentPetrona italic 8001.15em (default)ember colour

Website Hosting

.marbl-accent.marbl-accent--loud1.25em (loud)hero headlines

Large body text for section intros and lead paragraphs. This uses the fluid --text-lg token which scales between 16px and 18px.

Inter 400--text-lgclamp(16px, 0.9rem + 0.3vw, 18px)

Standard body text at --text-base (15px fixed). Used for paragraphs, buttons, and form inputs. Inter at regular weight with 0.7 opacity white.

Inter 400--text-base: 15pxFixed

Label Style - Uppercase

Inter 600--text-xs: 11pxuppercase, 2px spacing, ember

Font Weights

Weight Scale

Six steps, 300-800. Both Urbanist and Inter support the full range.

Light (300) - subtle body, cookie and legal text

--font-light

Regular (400) - default body copy

--font-regular

Medium (500) - emphasised body, footer links

--font-medium

Semibold (600) - labels, nav, button text

--font-semibold

Bold (700) - strong emphasis, subheads

--font-bold

Extrabold (800) - page and hero headings

--font-extrabold

Email Typography

Email Type Scale

Separate from the website scale. Fixed px (no clamp), system font stack (no web fonts). Force dark mode - always charcoal bg.

Luma Morning Digest

AI Agents Hit a Scaling Wall

Tuesday 22 April 2026

Every major research lab reported plateauing agent performance this week. The ceiling is real, and it's not about model size - it's context management, tool orchestration, and the durable execution primitives Cloudflare quietly shipped on Monday.

Read full digest

MEM Digital Ltd t/a Marbl Codes · Company 13753194

Spacing

The 10/20/40/60/80 Scale

Never hardcode pixel values. Always use a token. --gap-* for all spacing — layout and internal component. Below 10px there are four canonical micro-rhythm tokens (3xs / half / tight / 2xs) for typographic and compact-control work.

--gap-3xs

4px

--gap-half

5px

--gap-tight

6px

--gap-2xs

8px

--gap-xs

10px

--gap-sm

20px

--gap-md

40px

--gap-lg

60px

--gap-xl

80px

--gap-2xl

100px

--gap-3xl

120px

--gap-4xl

140px

--gap-5xl

160px

--gap-3xs
4px

--gap-half
5px

--gap-tight
6px

--gap-2xs
8px

--gap-xs
10px

--gap-sm
20px

--gap-md
40px

Border Radius

Rounded Corners, Not Pills

Settled 13 April 2026. Pills are ONLY for avatar circles and badge dots.

--radius
10px

--radius-lg
20px

--radius-full
Avatars only

Buttons

Primary, Outline, Danger, Ghost, Icon

No glow. No box-shadow. 10px radius (tokens only, never hardcoded px). Brand-kit shows the five core variants using the locked UI Kit classes; full catalogue with every variant + animated hover states in UI Items.

Inputs

Underline + Boxed

Underline Style

Boxed Style

Borders

Border Scale

White at varying opacity. From barely visible dividers to interactive element borders. Plus ember accent.

Subtle dividerrgba(255,255,255, 0.04)

Standard borderrgba(255,255,255, 0.06)

Visible borderrgba(255,255,255, 0.08)

Interactive border (buttons, icon buttons)rgba(255,255,255, 0.15) · --marbl-white-15

Input border (inputs, dropdowns, textareas)rgba(255,255,255, 0.20) · --marbl-white-20

Ember accent borderrgba(243,82,38, 0.15)

Elevation

Depth via Layering

No shadows, no glow. Depth comes from background-colour layering only. Each layer sits above the previous by being one shade lighter.

Base surface

--marbl-charcoal (#171415)

Raised (card)

--marbl-charcoal-light

Raised (tooltip)

--marbl-charcoal-lighter

Rules

No box-shadow on interactive elements. Ever.
No coloured shadows for elevation on any surface.
Want to raise something? Use the next charcoal shade up.
Add a 6% white border if you need a gentle edge without lifting the layer.

Background Elements

Decorative Patterns

Three opt-in background patterns. All white, all subtle. Apply per-surface, never globally.

Marbl Line Element

Quiet watermark

SVG is already white with fill-opacity: 0.12 baked in. Sits large (~150% container width) with the bottom-left corner bleeding off-canvas for a quiet ambient presence. Mirror for bottom-right on opposite surfaces.

/assets/svg/marbl-codes-line.svg

Topographical Thin

Fine contour lines

Dashed + solid white contour paths. For subtle environmental texture on calmer sections.

/assets/svg/marbl-topographical-thin.svg · opacity 0.05-0.10

Topographical Thick

Bolder contour forms

Filled organic shapes with stroked outlines. Heavier presence for hero backdrops or feature panels.

/assets/svg/marbl-topographical-thick.svg · opacity 0.03-0.05 (lower than thin; more ink coverage)

Rules

Do + Don't

Do

Use brand tokens for all values
Rounded corners (10px standard)
White text on dark backgrounds
Fluid clamp() for headings
0.15s ease transitions
translateY(-1px) hover

Don't

Glow or box-shadow on buttons
Pill shapes (except avatars)
Beige as text colour
Em dashes
Hardcoded pixel values
Arbitrary greys (#666, #999)