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
Fill Up
Ember border fills from bottom on hover. Arrow rotates from up-right to right. Border changes on solid variant.
Outline (fills on hover)
Solid (darkens on hover, border changes)
Heights match when inline
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
Secondary
Outline
White outline, border and text go ember on hover. Arrow rotates.
Icon Buttons
Icons with Text
Any icon can be placed left or right of the text. Uses bare icon (no circle background).
Icon left
Icon right
Icon Only
Icon-Only Buttons
Square (12px radius), 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 height for headers, footers, and tight spaces. All styles available.
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. Pill shape (this is one of the few places pills are used).
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
Four ember loader variants: ring (primary), pulsing dot (inline), three-dot chase (thinking), and the signature dot-matrix /* reveal. All use --marbl-ember, all respect reduced-motion. Full spec in ui-items.md §28.
Ring
Pulse
Three-dot chase
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.
Marbl Cursor
Cursor States
Ember dot + ring replaces the native cursor on fine-pointer devices. Auto-detects what you're hovering and switches state. The nine zones below exercise every trigger selector. Touch-only devices correctly skip initialisation; opt out per element with data-cursor-ignore (native cursor) or data-cursor-passive (branded resting cursor, no state promotion). Full spec in ui-items.md §26.
video, .video-thumbnail, [data-video] trigger the play-icon cursor.
Image state
Expandable Image
data-lightbox, .gallery-image trigger the expand-icon cursor.
Audio state
Audio / Waveform
audio elements and .marbl-waveform containers trigger the wave-icon cursor.
Hover anywhere in this box
Carousel state
Carousel
[data-carousel], .carousel-track. Mouse position picks left or right arrow.
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Draggable state
Drag Zone
[data-draggable], [draggable=true], .draggable.
Grab me
Opt-out state
Native Cursor
data-cursor-ignore restores the native cursor inside an element. Branded cursor hidden.
This zone uses the native cursor
Passive state
Branded Resting
data-cursor-passive keeps the branded cursor visible but suppresses every state promotion — even if a button or canvas sits inside.
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.
