CURATED · OPEN · FREE

Grandleisure

A minimalist, system-level authentication dialog for a web application.

CleanReferenceMobile UIRestraint

Open in OpenDesign

Visit: https://grandleisure.org

Identity DNA

utilitariansystemdialogauthentication

A standard browser or OS native authentication modal.

Color

#0078d4Accent

#000000Ink

#ffffffBG

#666666Muted

rgba(0, 0, 0, 0.1)Line

High-contrast, system-native color palette with minimal accent usage.

Typography

system-sans · system-mono

display20px · 500
body14px · 400
caption12px · 400

Spacing

4px

8px

12px

16px

24px

32px

consistent 4px base grid

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

1px solid rgba(0, 0, 0, 0.1)

None: 0 4px 16px rgba(0,0,0,0.12)

Layout

300container

1columns

16pxgutter

centered modal dialog with fixed width

Motion & Interaction

0msmicro

0mssmall

0msmedium

lineareasing

none

standard system cursor change · button press state

Components

button system-native button with blue primary fill and gray secondary outline
card modal dialog container with subtle drop shadow
input standard text input with gray border and blue focus ring

Voice & Don'ts

Tone neutral, utilitarian, system-generated
Headlines direct and functional
CTAs clear action verbs

don't use decorative imagery — screenshot shows a purely functional dialog
don't apply rounded corners — screenshot shows sharp rectangular edges
don't use complex gradients — screenshot shows flat, solid colors
don't implement elaborate animations — screenshot shows static system UI
don't use custom fonts — screenshot uses system-level typography
don't add extraneous layout elements — screenshot shows minimal, focused modal
Avoid: marketing language
Avoid: expressive typography
Avoid: decorative elements

System prompt

This is a system-level authentication dialog. It uses a minimal, high-contrast palette of white (#ffffff), black (#000000), and a standard blue accent (#0078d4). Typography is entirely system-native sans-serif. The layout is a centered, fixed-width modal with a subtle shadow. Critical donts: never use rounded corners, never add decorative elements, never use custom fonts, and avoid any complex animations or gradients. The focus is purely on functional, utilitarian interaction.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗

en · zh-CN · zh-TW · ja · ko