The complete interactive element library. Arrows point up-right by default and rotate to face right on hover. All button heights are equal when inline (48px standard, 36px mini).
Primary CTA
Split
THE Marbl button family (16 Jul 2026 - replaced Fill Up, Solid and the classic Outline). Two full-height cells, hard square: ember text cell + ember-dark icon cell on dark surfaces; the ink variant swaps the icon cell to darkest charcoal for light backgrounds. Only the icon animates on hover: arrows rotate up-right to right.
Primary (dark surfaces - ember + ember-dark icon cell)
Ink (light backgrounds - ember + darkest-charcoal icon cell)
Outline (secondary partner)
Forward arrow (right arrow slides right - continue / next actions)
Inline Actions
Ghost + Read More
Ghost: arrow rotates on hover. Read More: right-facing arrow slides right on hover. Text-only: just colour change.
Ghost (arrow rotates up-right to right)
Read More (right arrow slides right)
Text only
Icon Buttons
Icons with Text
Same split pattern as the main buttons - the icon cell just carries the action's icon instead of the arrow, always on the right. Non-arrow icons ROLL on hover: exit through the top, re-enter from the bottom (icon appears twice in the markup, second copy classed "dup").
Dark surfaces
Ink (light backgrounds)
Icon Only
Icon-Only Buttons
Square, circle, filled, and mini variants. Border goes ember on hover.
Square outline
Circle outline
Filled
Mini (36px)
Navigation
Carousel Buttons
Circle prev/next buttons for carousels and sliders. Outline and filled variants.
Outline
Filled
Mini
Compact
Mini Buttons
36px split buttons for headers, footers, and tight spaces. Same anatomy, compact cells - every variant works mini, in both surface modes.
Dark surfaces
Ink (light backgrounds)
Form Elements
Checkboxes, Radios, Switches
Matching the subscribe portal's custom form elements. Dark backgrounds, ember accent on checked state.
Checkboxes
Radio buttons
Toggle switches
Form Elements
Range Slider
Inputs
Text Inputs
Underline style for forms and panels. Boxed style for search and standalone fields. Both use a transparent background with ember focus border.
Underline style
Boxed style
Textarea
Social
Social Icons
Bare SVG icons with ember hover. No border, no background. Used in footers, menus, and contact sections.
Status
Badges + Tags
Status indicators, category labels, and notification badges. Square, soft warm status colours (Marbl Dashed palette).
Ember Live Pending ErrorComing Soon
Interactive
Custom Dropdown
JS-powered select replacement. Underline style with animated panel and ember hover on items.
Interactive
Accordion
Collapsible panels with smooth transitions. One open at a time.
Luma is Marbl's AI-powered digest platform, curating weekly signals from the frontier of AI, robotics, quantum computing and the web. Designed for builders who want the signal without the noise.
The ember accent (#F35226) is reserved for primary actions and active states. It stands through colour and contrast alone - no glow, no shadow, no neon effects.
Urbanist (700-800) for headings. Petrona italic for accents and nav labels. Inter (300-600) for body copy, buttons, and UI text.
Navigation
Tabs
Horizontal tab row with ember underline indicator. Active tab gets ember text and a 2px bottom border.
Tabs separate content into logical groups within a single view. Keep tab labels short - one or two words maximum.
Use tabs when you have 2-5 distinct content areas. More than 5 tabs should be collapsed to a dropdown.
Active tab uses --marbl-ember for text and the 2px bottom border. Inactive tabs are rgba(255,255,255,0.35).
Feedback
Progress Bars
4px track with ember gradient fill. Determinate and indeterminate variants.
25%
50%
75%
100%
Indeterminate
...
Feedback
Notification Banners
4px left border, squared left corners. Four semantic variants with close button.
Subscribed successfully
You're on the Luma digest list. First issue lands next Tuesday.
Something went wrong
We couldn't save your changes. Try again or contact support.
Your plan is expiring
Your Marbl Pro trial ends in 3 days. Upgrade to keep access.
New digest available
Issue #47 is live - 8 signals from the frontier this week.
Overlays
Tooltips
CSS-only hover tooltips. Charcoal-lighter background with arrow pointer.
Tooltip above
Tooltip below
Feedback
Skeleton Loading
Pulse-animated placeholder shapes while content loads.
Text lines
Avatar + text
Cards
Content
Avatars
Circle avatars at 5 sizes, with initials fallback and overlapping stack.
Sizes (40 / 60 / 80 / 100)
RB
RB
RB
RB
Avatar stack
+4
AK
SJ
TM
RB
Navigation
Breadcrumbs
Muted links that go ember on hover. Current page in white. Chevron or slash separator.
Chevron
Slash
Navigation
Pagination
36px square buttons, 8px radius. Active page in ember. Ellipsis for skipped ranges.
Standard
With ellipsis
Content
Category Badges
Luma category labels with distinct hues. Pill shape, same structure as status badges.
Luma categories
AIQuantumWebRoboticsVoicesBuildersInside Marbl
With dot indicator
AIQuantumWebRoboticsVoicesBuildersInside Marbl
States
Disabled
35% opacity, no pointer events. Applied via the disabled attribute on any button type.
Loaders
Spinners & Dot-Matrix
Two ember loaders: the pulsing dot (inline) and the signature dot-matrix /* reveal. Both use --marbl-ember and respect reduced-motion. Full spec in ui-items.md §28.
Pulse
Dot-matrix face
Scrollbar
Global Custom Scrollbar
Solid ember thumb on a charcoal (invisible) track. Applied globally via core/marbl-v2.css. Scroll any long page to see it. Opt-in utility classes: .hide-scrollbar, .dark-scrollbar. Full spec in ui-items.md section 25.
Scroll inside this box to see the Marbl scrollbar in its natural habitat.
Solid ember thumb at 8px width (WebKit) or thin (Firefox).
The track is `--marbl-charcoal` which matches the body so only the ember thumb reads.
Hover the thumb to see it darken to `--marbl-ember-dark`.
No gradient. No glow. Quiet and deliberate, like everything else in the brand.
Scrollbar width is 8px on WebKit / thin on Firefox. Thumb radius is `--radius-full` for a clean pill rail.
Editorial
Quote Block
Testimonial quote with person attribution + social share pill (LinkedIn, X, Copy link with animated “Copied!” tooltip). Plus minimal pull-quote variant for inline article use. Full CSS in ui-items.md §27.
Share variant — testimonial with person + social share pill
We switched to Marbl Codes after years of frustration with our previous hosting provider. The difference is night and day. When we have an issue, we speak to a real person who knows our business and fixes things quickly. It is exactly the kind of reliable, human support we needed.
Hairline variant — minimal, centred, no glyph
Simplicity is the ultimate sophistication — the quote that earns its weight by saying less, not more.
