MOSCAR UI

Moscar UI

Index

System

Systems that stay out of the way. One accent, restraint as the point.

Accent

Cursor

A small filled dot, lightly trailing. Move over the preview.

Effects

4 picked. Each one goes into the prompt with the GSAP recipe for building it.

Shape

Radius 12 px

One radius for panels and controls, half it for chips.

Density

Controls sit at 16px 28px, cards at 32px.

Motion

Speed 1.00×

Enterpower3.out

Hoverpower2.out

Durations150 / 300 / 600 ms

Target

Brief

One line about what is being built. It becomes the first sentence.

Sections

Tokens, type, cursor and effects always ship. The rest is yours to drop.

Take it

Prompt21516 chars

Tokens11737 chars

Pick a system, tune it, paste the prompt into whatever builds it.

Dark Developer

01 — Lime on Dark Developer

Everything in one opinion

Near-black, one acid accent, mono chrome. Body copy sits at 15px with a 1.6 line height, capped at 760px so the measure stays readable. This paragraph is here to prove the pairing works at length, not just in a headline.

Image plate

Collection

Panels separate from the page by one value step and a 1px rule.

Hover me

Go further

Panels separate from the page by one value step and a 1px rule.

Hover me

Showcase

Panels separate from the page by one value step and a 1px rule.

Hover me

Clients — drag

NordwerkAtelier OstVelaKesslerTwo Rivers

Syntax

<button
	class="cta"
	data-ease="power3.out">
	Begin
</button>

Palette

App #0a0a0a

Panel #161616

Line #2a2a2a

Text #f5f5f5

Lime #cdfb62