← Back to the library

Auth form · Publishing

Ghost — Minimal Site-Address Sign-In Gateway

Sign in to save

A quiet white sign-in gateway with the Ghost wordmark, one site-address input, a full-width dark Continue button, and a small account-creation link.

Visit original website ↗Captured Sep 30, 2026 · 1440px wide

Build with this design

Download DESIGN.md into your project and ask your coding agent to follow it alongside this reference. Review inferred values against the original before implementation.

Download DESIGN.md ↓
View DESIGN.md
---
version: alpha
name: Ghost — Minimal Site-Address Sign-In Gateway
colors:
  paper: '#FFFFFF'
  field: '#F3F6F7'
  primary: '#15171A'
typography:
  heading:
    fontFamily: '"Inter var", sans-serif'
    fontSize: 15px
    fontWeight: 400
    lineHeight: 24px
  body:
    fontFamily: '"Inter var", sans-serif'
    fontSize: 15px
    fontWeight: 400
    lineHeight: 24px
---

## Overview
A quiet white sign-in gateway with the Ghost wordmark, one site-address input, a full-width dark Continue button, and a small account-creation link. Inspected on 2026-09-30 at 1440px and 390px widths. This is a full-page or complete initial-screen reference, not an isolated component crop.

## Colors
The token values above are measured opaque CSS text, surface or action colors. Transparent roots inherit their surrounding surfaces and are not treated as measured white. Artwork and logo colors remain source-specific rather than universal tokens.

## Typography
The selected heading/label sample uses "Inter var", sans-serif, 15px / 24px, weight 400; the corresponding mobile sample is 15px. Supporting text sample is 15px / 24px. Preserve the hierarchy rather than assuming every paragraph uses the same size. Computed font stacks do not grant font licenses; choose licensed equivalents when adapting.

## Layout
Desktop uses a centered narrow form with a 500px input and generous surrounding whitespace. At 390px the input is 334px wide, leaving 28px gutters; the wordmark and field group move toward the top. This is the initial site-address step, not a username/password screen. Measured outer document/component bounds: 1440 × 1000px desktop; 390 × 949px mobile. These two widths do not establish the exact breakpoint rules.

## Elevation & Depth
Nearly flat white canvas; the visible focused field has a bright green outline and soft halo. Keep depth concentrated on the active control.

## Shapes
Inputs and primary button use measured 8px radii. Keep the button width tied to the input width and retain the short arrow in the action label.

## Components
Wordmark, explicit Site address label, site-domain placeholder, Continue action and Create one here link. No input was entered and Continue was not activated. The green focus outline is present in the captured initial state; downstream authentication and validation are untested.

## Do's and Don'ts
Do preserve the observed reading order, contrast, spacing and responsive emphasis. Do supply keyboard focus, meaningful labels and reduced-motion alternatives in an implementation. Do not copy source testimonials, brand assets or performance claims as your own. Do not infer successful submission, hidden validation, hover or authentication behavior from resting screenshots.

If copying fails, download the file or select the text above.

Full screenshot of Ghost — Minimal Site-Address Sign-In Gateway

Design belongs to its original creator. Use this example for inspiration, not as a licensed template.

A little more taste in your inbox.

A weekly selection of standout designs, useful UI elements, and fresh inspiration from TastefulKit.