Nexus — CORE
Nexus Interface Dashboard Section — clear information density, modular panels, and interface rhythm. Suitable for product showcases, admin panels, and analytics experiences.
- Layout
- Grid
- Width
- Full Bleed
- Framing
- Glassy
- Grid
- Strong
- Base unit
- 4px
- Icon set
- Solar
Composition cues.
The high-level posture every page in this system should hold before any individual component or token is touched.
Moderate motion.
Durations, easings, and patterns observed in the source. Hover the demo to see the system's primary duration / easing applied to a real element.
- ease
- cubic-bezier(0.4, 0, 0.2, 1)
- gsap-scrolltrigger
Animations in context.
Live animations using this system's primary duration and easing. Each tile labels the values it's using.
Four hero layouts.
Working hero layouts rendered in this system's tokens — typography, colour, radii, and motion all derive from the spec.
Build something unforgettable.
A demonstration of this system's centered editorial hero composition.
Three card recipes.
Different case-study cards built from this system's components — image-led, side-by-side, and quote-led.
Three voices, one system.
Testimonial cards rendered with this system's tokens — single quote, three-up, and an auto-advancing carousel.
“MD Files turned our brand exploration from weeks into a single afternoon. It's the best gift to designers I've seen this year.”
“Saved my team weeks of token discovery.”
“Drop-in spec, drop-in product polish.”
“Felt like cheating. Beautiful tokens.”
Rendered scene specification.
Where the source file describes a canvas-backed effect, the spec is captured here as a structured insights table — scene, primitives, motion, render, interaction.
- Scene
- Full-bleed background field
- Effect
- Dot-matrix particle field
- Primitives
- Dot particles + soft depth fade
- Motion
- Slow breathing pulse
- Interaction
- Pointer-reactive drift
- Render
- Canvas-backed effect
Four roles. One palette.
Primary, secondary, tertiary, and neutral. Each tile previews the colour at full bleed with its hex value and intended role.
Live tokens, real samples.
Each typography token is rendered at its specified family, size, weight, line height, and tracking. Background uses the system's own surface so contrast reads accurately.
- ui-sans-serif
- 72px · weight 300
- line 72px
- tracking -0.05em
- ui-sans-serif
- 18px · weight 300
- line 28px
- ui-sans-serif
- 12px · weight 500
- line 16px
One rhythm, applied everywhere.
Base unit 4px. The full scale below — every spacing decision should snap to one of these steps.
Glass surfaces, gradient-border shell.
The exact recipe used for elevated surfaces in this system. Wrapper provides a 1px gradient frame; inner surface carries the real content.
Built from the recipe on the right — wrapper + inner surface, exactly as specified.
/* outer wrapper */ padding: 1px; border-radius: 32px; background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.05), rgba(0,0,0,0)); /* inner surface */ border-radius: 31px; background: rgba(26,26,26,0.9); backdrop-filter: blur(24px);
- 1px #94A3B8
- 1px #CBD5E1
- 1px #FFFFFF
- 0 25px 50px -12px rgba(0,0,0,0.25)
- 0 1px 2px rgba(0,0,0,0.05)
- 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)
Radius family.
The full set of corner radii used across surfaces, controls, and badges. Stay within this family for visual cohesion.
Buttons, links, and cards.
Live components built directly from this system's recipes — background, text colour, radius, padding, and border are pulled from the spec.
Background #FFFFFF · radius 31px · padding 20px · blur 24px.
Solar · Linear
A 12-icon Solar grid rendered in the system's accent colour against its background — the same recipe should hold across the product.
Constraints that keep the system honest.
- Use the primary palette as the main accent for emphasis and action states.
- Keep spacing aligned to the detected 4px rhythm.
- Reuse the Glass surface treatment consistently across cards and controls.
- Keep corner radii within the 24–32px and pill family.
- Don't introduce extra accent colors outside the core palette roles.
- Don't mix unrelated shadow or blur recipes that break the depth system.
- Don't exceed the moderate motion intensity without a deliberate reason.