HybridOS
v1.0 Public Beta

Design across
boundaries.

A practical design framework that delivers bold visuals, responsive behavior, and consistent UI patterns across every screen.

Buttons

Polished interactive elements with refined gradients and shadows.

Primary Button
index.html
<button class="btn btn-primary">Primary</button>
style.css
/* Primary: Gradient + Depth */ .btn-primary { background: var(--brand-orange); color: white; box-shadow: 0 4px 12px rgba(233, 84, 32, 0.3), inset 0 1px 0 rgba(255,255,255,0.2); text-shadow: 0 1px 1px rgba(0,0,0,0.1); } .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
Secondary Button
index.html
<button class="btn btn-secondary">Secondary</button>
style.css
/* Secondary: Soft & Neutral */ .btn-secondary { background: var(--border-subtle); color: var(--text-main); } .btn-secondary:hover { background: rgba(0,0,0,0.08); }
Outline Button
index.html
<button class="btn btn-outline">Outline</button>
style.css
/* Outline: Crisp Border */ .btn-outline { background: transparent; box-shadow: inset 0 0 0 2px var(--border-subtle); color: var(--text-main); } .btn-outline:hover { box-shadow: inset 0 0 0 2px var(--brand-orange); color: var(--brand-orange); background: rgba(233,84,32,0.04); }
Ghost Button
index.html
<button class="btn btn-ghost">Ghost</button>
style.css
/* Ghost: Minimal */ .btn-ghost { background: transparent; color: var(--brand-orange); } .btn-ghost:hover { background: rgba(233, 84, 32, 0.08); }
Dev Notes#buttons

How to Use

To create a button, start with the base class .btn and append a variant class.

  • Primary Action: Use .btn-primary for the main call-to-action (e.g., "Save", "Submit").
  • Secondary Action: Use .btn-secondary for alternative actions (e.g., "Cancel").
  • Emphasis: Use .btn-outline for lower priority or .btn-ghost for minimal visual noise.

Under the Hood

These buttons rely on specific CSS variables defined in the root:

  • Shape: --radius-pill (999px) creates the stadium shape.
  • Color: --brand-orange is the primary accent.
  • Motion: --ease-smooth controls the hover/active transitions.

Customization Guide

To modify the look:

  1. Change Color: Override the background property on .btn-primary. Ideally, update the --brand-orange variable to propagate changes system-wide.
  2. Adjust Size: Modify the height (currently 48px) and padding (0 28px) in the main .btn class.
  3. Shadows: The depth effect uses refined box-shadows. To flatten the look, remove the box-shadow and text-shadow properties.

Accessibility

All buttons include distinct :focus and :active states. Ensure high contrast labels are used. For icon-only buttons, always include an aria-label.

Gradient Text

Generate webkit-masked typography instantly.

Design Across Boundaries
Generated CSS
style.css
.gradient-text { font-weight: 800; background: linear-gradient(45deg, #E95420, #2C001E); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
HTML
index.html
<h1 class="gradient-text">Design Across Boundaries</h1>
Dev Notes#typography

How it Works

Gradient text relies on the background-clip: text property.

  • Background: Define your gradient here.
  • -webkit-background-clip: Sets the background to clip to the foreground text shape.
  • -webkit-text-fill-color: Sets the text color to transparent so the background shows through.

Accessibility Warning

Ensure the gradient colors have high contrast against the page background. Some older browsers may not support this, so define a fallback color property before the transparent fill.

Liquid Loader

Organic, morphing animation using SVG filters.

HTML
index.html
<div class="gooey-loader-container"> <div class="blob blob-1"></div> <div class="blob blob-2"></div> <div class="blob blob-3"></div> </div> <!-- SVG Filter Required (See Docs) -->
CSS
style.css
.gooey-loader-container { filter: url('#goo'); position: relative; width: 200px; height: 200px; } .blob { background: var(--brand-orange); border-radius: 50%; position: absolute; }
Dev Notes#animation

The "Goo" Effect

This effect is achieved by blurring two or more shapes until they overlap, and then increasing the contrast of the alpha channel to sharpen the edges again.

  • feGaussianBlur: Blurs the elements.
  • feColorMatrix: Increases alpha contrast (values="... 18 -7") to create the hard edge.

Note: This requires an inline SVG filter in your HTML with id="goo".

Media Player

Premium glassmorphism widget with interactive states.

Midnight City

M83

0:00
4:03
HTML
index.html
<div class="media-widget"> <div class="media-art"></div> <div class="media-info"> <h3>Midnight City</h3> <p>M83</p> </div> <!-- Progress & Controls... --> </div>
CSS
style.css
.media-widget { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(40px) saturate(180%); border-radius: 28px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } .media-art-inner { background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%); }
Dev Notes#widget

Premium Glassmorphism

This widget uses multiple layers of backdrop-filter and advanced box-shadows to create a deep, frosted glass effect.

  • Depth: Created using a combination of inner glows and drop shadows.
  • Gradients: The album art is pure CSS conic-gradient.

More on the way...

Edited today at 10:42 AM