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

Charcoal Raised

#211d1e

--marbl-charcoal-raised

Charcoal Card

#2c2829

--marbl-charcoal-card

Charcoal Card Hover

#363132

--marbl-charcoal-card-hover

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 (sage)

#5e8c4f

--color-success

Warning (honey)

#d79a3c

--color-warning

Error (terracotta)

#c5341b

--color-error

Info (warm slate)

#6e8389

--color-info

Verified — your profile is published.

Pending approval — changes queued for review.

Failed — email address not recognised.

Tip — drag to reorder list items.

Accents

Badge & Notification Accents

Softer warm hues from the Marbl Dashed admin theme, for badges, tags, pill titles and notifications. No clinical neon - warm equivalents of the stock blue / red / orange / teal / purple.

Slate (info)

#6e8389

--badge-slate

Terracotta (danger)

#c5341b

--badge-terracotta

Honey (warning)

#d79a3c

--badge-honey

Sage (success)

#5e8c4f

--badge-sage

Plum

#806572

--badge-plum

Taupe (neutral)

#8a807d

--badge-taupe

Info Success Warning Danger Featured

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 800120% of parentember colour

Website Hosting

.marbl-accent120% scales with clamp() heroesno variants needed

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

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

Square Corners

The Marbl square kit (15 Jun 2026): every radius token is 0. Buttons, cards, inputs, badges, avatars and dots all render hard-square. --radius-round (9999px) is the single escape hatch, used only when a circle/pill is the deliberate design call.

Everything
--radius* = 0

--radius-round
escape hatch

Buttons

Split, Ink, Outline, Danger, Ghost, Icon

No glow. No box-shadow. Square corners (radius 0, tokens only, never hardcoded px). THE Marbl button is the SPLIT (16 Jul 2026): two full-height cells - ember text cell + ember-dark icon cell on dark surfaces, ink variant (darkest-charcoal cell) on light. Only the icon animates on hover. Full catalogue 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

A subtle opt-in background pattern. White, low-opacity, applied per-surface, never globally.

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
Square corners (radius 0)
White text on dark backgrounds
Fluid clamp() for headings
0.15s ease transitions
translateY(-1px) hover

Don't

Glow or box-shadow on buttons
Rounded or pill corners (we're square)
Beige as text colour
Em dashes
Hardcoded pixel values
Arbitrary greys (#666, #999)