Use glass selectively
Liquid Glass belongs on navigation, compact controls, floating chrome, and selection states. Most content surfaces should remain solid and easy to scan.
Interface design reference
Build with a
consistent language.
PlexUI is the reusable UI design system used across Plexium websites and products. It defines foundations, Liquid Glass controls, motion, responsive behavior, appearance, accessibility, and implementation patterns without prescribing what your product has to do.
What is PlexUI?
PlexUI is Plexium's public interface design system and developer reference. It documents the visual and interaction rules shared by Plexium projects: neutral light and dark themes, Liquid Glass navigation and controls, responsive layouts, motion, custom pointer behavior, accessibility fallbacks, and reusable HTML, CSS and JavaScript patterns.
The goal is consistency without forcing every product to look identical. Plex Browser, PlexiumMC, the Plexium portfolio, and future Plexium interfaces can keep their own content and product identity while reusing the same underlying UI language.
Design the interface. Keep the product yours.
PlexUI describes how controls, surfaces, motion, and hierarchy behave. Product features, content, data, and information architecture should always be designed around the actual use case.
Let motion explain state
Selection movement, hover response, entry motion, and pointer feedback should clarify what changed instead of decorating every element.
Keep hierarchy calm
Large type, restrained color, generous spacing, and clear grouping should do more work than decorative layers.
Adapt the function
A segmented control can mean Day / Week / Month, Grid / List, or anything else your product needs. The interaction language stays consistent; the feature does not.
Foundations
The system uses a neutral light/dark palette, Apple-adjacent typography, soft radii, and a single blue interaction accent.
Color
Neutral surfaces keep content dominant. Blue is reserved for action and selection.
#f5f5f7
#1d1d1f
#0071e3
#86868b
Type
Use the platform system stack and tighter tracking as type gets larger.
Clear first.
Supporting copy stays quieter, smaller, and easier to scan.
Layout and spacing
PlexUI uses a wide content canvas with large vertical intervals. The empty space is intentional: it separates ideas before borders or cards have to.
The default desktop content width is 1180px. On smaller screens, the layout falls back to viewport gutters rather than compressing every component. Sections usually receive more vertical space than their internal cards, which helps the page read as an article rather than a dashboard made of boxes.
Use consistent page gutters and section rhythm before adding decorative dividers. If a section feels crowded, increase spacing first. Do not solve every grouping problem by adding another container.
| Token | Default | Use |
|---|---|---|
| Content width | 1180px | Primary reading / product canvas |
| Desktop gutter | 24px each side | Minimum viewport breathing room |
| Mobile gutter | 14px each side | Compact screens |
| Section padding | 118px vertical | Desktop chapter separation |
| Mobile section padding | 88px vertical | Preserves rhythm without wasting screen |
| Card gap | 16–24px | Related content groups |
CSS — layout foundation
.wrap{
width:min(1180px,calc(100% - 48px));
margin:auto;
}
.section{
padding:118px 0;
scroll-margin-top:110px;
}
@media(max-width:820px){
.wrap{
width:min(100% - 28px,1180px);
}
.section{
padding:88px 0;
}
}Typography is the hierarchy
Large headings, restrained supporting copy, and tight tracking do most of the visual work. PlexUI should not need ten decorative devices to make a section feel important.
DisplayShort, large statements. Tight tracking and compact line-height.
Supporting copyNeutral color, comfortable line-height, and limited width.
EyebrowSmall uppercase context label using the interaction accent.
System font stack
Use the platform stack first. It keeps rendering native on Apple devices while remaining practical elsewhere. Do not ship proprietary font files just to imitate the system face.
CSS — type scale
:root{
font-family:
-apple-system,
BlinkMacSystemFont,
"SF Pro Display",
"SF Pro Text",
"Helvetica Neue",
Arial,
sans-serif;
}
.hero h1{
font-size:clamp(4.2rem,9.5vw,8.9rem);
line-height:.86;
letter-spacing:-.082em;
}
.section-head h2{
font-size:clamp(3rem,6.7vw,6rem);
line-height:.92;
letter-spacing:-.066em;
}
.eyebrow{
color:var(--blue);
font-size:.78rem;
letter-spacing:.11em;
text-transform:uppercase;
font-weight:760;
}Liquid Glass is a control material
Glass is most useful when it communicates an interactive layer floating above content. In PlexUI it belongs on navigation, selected states, settings surfaces, compact toolbars, and other controls that benefit from depth.
A convincing glass surface needs more than opacity. PlexUI combines background translucency, saturation, blur, bright internal reflections, and a soft external shadow. These layers create a material edge even when the background underneath is nearly flat.
Content cards should usually remain solid. If everything is translucent, the interface loses hierarchy and glass stops feeling special.
Use glass for
Navigation, selected states, compact floating tools, settings chrome, tab bars, slider thumbs, and other interactive layers.
Avoid glass for
Every paragraph, large article surfaces, every product card, long tables, and decorative backgrounds with no functional reason.
CSS — material
.glass-material{
background:
color-mix(
in srgb,
var(--glass) 84%,
transparent
);
border:
1px solid var(--glass-border);
backdrop-filter:
blur(18px)
saturate(165%);
box-shadow:
inset 1px 1px 0 rgba(255,255,255,.46),
inset -1px -1px 0 rgba(255,255,255,.12),
inset 0 -7px 16px rgba(60,60,67,.035),
0 8px 25px rgba(0,0,0,.08);
}Liquid selection
The selected state moves as a material, not a flat rectangle. A brief bridge joins the old and new positions, then collapses as the active surface settles.
Segmented control
The labels are examples. Replace them with choices that match your product.
HTML
<div class="segmented" data-liquid-tabs>
<button class="active">Overview</button>
<button>Activity</button>
<button>Details</button>
</div>CSS
.segmented{
height:54px;
padding:4px;
display:flex;
border-radius:999px;
background:rgba(127,127,127,.10);
border:1px solid var(--line-soft);
}
.liquid-indicator{
position:absolute;
top:4px;
height:calc(100% - 8px);
border-radius:999px;
background:color-mix(in srgb,var(--glass-strong) 88%,transparent);
backdrop-filter:blur(12px) saturate(180%);
transition:transform 340ms var(--ease-ios),width 340ms var(--ease-ios);
}JavaScript
function setTab(container,item){
container.querySelectorAll('button').forEach(button => {
button.classList.toggle('active',button === item);
});
positionLiquid(container,item,true);
}Buttons respond, they do not perform
Hover motion should be felt more than noticed. Primary buttons can lift slightly; icon controls may grow a little more; dense segmented controls should barely move.
Primary and secondary
| Control | Hover | Pressed |
|---|---|---|
| Primary action | translateY(-2px), scale(1.018) | scale(.975) |
| Icon button | scale(1.04–1.06) | scale(.94–.97) |
| Segment | scale(1.01–1.02) | scale(.975) |
| Card | translateY(-4px to -6px) | Usually none |
CSS
.btn{
min-height:50px;
padding:0 20px;
border-radius:16px;
border:1px solid transparent;
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:680;
transition:
transform 160ms var(--ease),
background-color 180ms ease,
box-shadow 180ms ease;
}
.btn-primary{
background:var(--blue);
color:white;
}
.btn-primary:hover{
transform:translateY(-2px) scale(1.018);
background:var(--blue2);
}
.btn:active{
transform:scale(.975);
}Settings float above the page
The settings sheet is centered, compact, and translucent. The page behind it is dimmed, not blurred into unreadable mush.
Appearance
Settings surfaces use stronger glass than ordinary content. Theme selection can reuse the liquid segmented-control system.
CSS — centered settings sheet
.settings{
position:fixed;
inset:0;
z-index:4000;
display:grid;
place-items:center;
padding:18px;
}
.settings-bg{
position:absolute;
inset:0;
background:rgba(0,0,0,.25);
}
.settings-panel{
position:relative;
width:min(400px,100%);
padding:18px;
border-radius:30px;
background:color-mix(in srgb,var(--surface) 80%,transparent);
border:1px solid var(--glass-border);
backdrop-filter:blur(22px) saturate(165%);
box-shadow:
0 28px 90px rgba(0,0,0,.22),
inset 1px 1px rgba(255,255,255,.35);
}Elastic pointer
The pointer stays exact. Only the cursor shape responds to velocity. The demo below hides the native pointer inside the box and restores it as soon as you leave.
Move your pointer here.Fast movement stretches the shape. Hovering outside returns to your normal cursor.
Motion that can be replayed
Entry motion should remain subtle and should be able to replay when content leaves and re-enters the viewport. The system favors opacity, translation, and short blur over dramatic scale effects.
JavaScript — replayable reveal
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
entry.target.classList.toggle('is-visible',entry.isIntersecting);
});
},{ threshold:.16 });
document.querySelectorAll('.reveal').forEach(element => {
observer.observe(element);
});Scroll-spy should be deterministic
Navigation state should not jump because two sections happen to intersect the viewport at once. PlexUI uses a fixed activation line inside the viewport and selects whichever section actually occupies that line.
A useful default is 42% of the viewport height. This makes the selected navigation item track what the user is actually reading and prevents short sections from being skipped.
JavaScript — active section
const sectionIds=[
'overview',
'features',
'pricing',
'contact'
];
const sections=
sectionIds.map(id=>
document.getElementById(id)
);
function currentSection(){
const activationY=
innerHeight*.42;
for(const section of sections){
const rect=
section.getBoundingClientRect();
if(
rect.top<=activationY &&
rect.bottom>activationY
){
return section.id;
}
}
return sections[0].id;
}
addEventListener('scroll',()=>{
requestAnimationFrame(()=>{
updateNavigation(
currentSection()
);
});
},{passive:true});Content surfaces stay solid
Cards organize content, but they should not become the personality of the whole interface. PlexUI cards are generally neutral, thin-bordered, softly elevated, and spacious.
Real screenshots: use object-fit: contain when users need to see the complete interface.
Radius: roughly 24–30px for large content cards, smaller for nested UI.
Elevation: a soft shadow should separate a card without making it look detached from the page.
Glass: avoid using it for long reading surfaces or every content card.
CSS — content card
.content-card{
border-radius:28px;
overflow:hidden;
background:var(--surface);
border:1px solid var(--line-soft);
box-shadow:
0 16px 46px rgba(0,0,0,.08);
transition:
transform 260ms var(--ease),
box-shadow 260ms ease;
}
.content-card:hover{
transform:translateY(-4px);
box-shadow:
0 24px 62px rgba(0,0,0,.12);
}
.content-card img{
width:100%;
height:auto;
object-fit:contain;
border-radius:5px;
}Range controls can carry the material
A slider is not a mandatory PlexUI feature. When a product genuinely needs a numeric range, the track stays simple and the draggable thumb becomes the glass element.
Glass thumb
The thumb stretches slightly while dragging and settles back to its resting shape.
HTML
<div class="range-wrap" id="rangeWrap">
<div class="range-track">
<div class="range-fill"></div>
</div>
<div class="range-thumb"></div>
<input
id="rangeInput"
type="range"
min="0"
max="100"
value="40"
>
</div>JavaScript
const input=
document.querySelector('#rangeInput');
const wrap=
document.querySelector('#rangeWrap');
function updateRange(){
const progress=
(
(+input.value - +input.min) /
(+input.max - +input.min)
)*100;
wrap.style.setProperty(
'--progress',
progress+'%'
);
}
input.addEventListener(
'input',
updateRange
);
updateRange();Forms should feel quiet
Inputs are functional surfaces. Keep them readable, adequately sized, and visually subordinate to the task they perform.
| Property | Guideline |
|---|---|
| Minimum control height | About 48–52px for important inputs |
| Radius | 14–18px depending on density |
| Focus state | Blue border plus soft focus ring |
| Placeholder | Supportive, never the only accessible label |
| Motion | Minimal; focus should not bounce the field |
CSS — input
.field{
width:100%;
min-height:52px;
padding:0 14px;
border-radius:16px;
border:1px solid var(--line);
background:var(--surface);
color:var(--text);
outline:none;
transition:
border-color 150ms ease,
box-shadow 150ms ease;
}
.field:focus{
border-color:
rgba(10,132,255,.65);
box-shadow:
0 0 0 4px
rgba(10,132,255,.16);
}Mobile is a different composition, not a smaller desktop
On compact screens, dense desktop chrome should simplify. PlexUI typically replaces the centered desktop island with a bottom floating tab bar that is easier to reach.
Touch targets and safe areas
Primary mobile controls should be comfortable to tap, not merely technically clickable. Use env(safe-area-inset-bottom) for floating controls on devices with home indicators.
CSS — floating mobile tab bar
.mobile-tabs{
position:fixed;
left:50%;
bottom:max(
12px,
env(safe-area-inset-bottom)
);
transform:translateX(-50%);
width:min(370px,calc(100% - 22px));
height:70px;
padding:7px;
display:flex;
border-radius:26px;
background:
color-mix(
in srgb,
var(--glass) 88%,
transparent
);
border:1px solid var(--glass-border);
backdrop-filter:
blur(22px)
saturate(180%);
}Accessibility is part of the system
Motion and transparency have fallbacks. Mobile controls use practical touch targets. Interfaces should remain readable when glass or animation is reduced.
Use prefers-reduced-motion to remove non-essential motion and prefers-reduced-transparency to replace glass with an opaque surface. Do not make core functionality depend on hover.
Implementation checklist
This is a developer checklist, not interface content. It exists to catch the small mistakes that make a polished system feel inconsistent.
- Light, Dark, and Auto appearance work and persist correctly.
- Desktop and mobile layouts are both intentional, not merely responsive.
- Touch targets remain practical on compact screens.
- Liquid Glass is limited to controls and floating interface layers.
- Every segmented control uses the same selection behavior.
- Scroll reveals replay only where replaying is useful.
- The custom pointer never changes perceived pointer sensitivity.
- Real screenshots are not unintentionally cropped.
- Reduced-motion and reduced-transparency preferences are respected.
- Keyboard focus remains visible and usable.
- No duplicate IDs, dead links, or console errors remain.
- No random purple/blue SaaS glow has replaced the neutral visual hierarchy.
Do not render this checklist in the product.
It is for the person or AI implementing the interface. Only show a QA checklist to end users when the product itself genuinely requires one.
Use PlexUI as a reference
The text reference includes the foundations, code patterns, motion rules, responsive behavior, and implementation checklist in a format that can be read by developers or attached directly to an AI coding task.
Example instruction
Build a website for [purpose]. Use the attached PlexUI Design Reference as the UI/UX design system. Preserve its visual language, Liquid Glass behavior, typography, spacing, light/dark appearance, motion, and responsive principles. Adapt the content, information architecture, features, data, and functionality to this project.
Roadmap
We’re taking this further.
We’re planning a larger project built around this interface language. The goal is to extend PlexUI beyond a single website into a broader system for production interfaces, reusable components, and consistent product experiences.