--- 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.