Slite — sky-blue multi-provider registration screen

---
version: alpha
name: Slite — sky-blue multi-provider registration screen
colors:
  surface: '#9adbfe'
  card: '#fdfdfd'
  ink: '#3f434a'
  accent: '#2e77e5'
  primary: '#3f434a'
typography:
  primary:
    fontFamily: Garnett
    fontSize: 26px
    fontWeight: 500
  body:
    fontFamily: Garnett
    fontSize: 26px
    fontWeight: 500
  control:
    fontFamily: UniversalSans
    fontSize: 13.3333px
    fontWeight: 400
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 8px
---

## Overview

A white sign-up panel on a textured sky-blue background, with three provider choices, an email alternative and a bright-blue primary action.

Source: https://slite.com/organization/create. Captured 2026-10-09T06:23:52.836765+00:00. This guide describes the observed page, not an official brand specification.

## Colors

Observed surface and computed-style palette: surface: #9adbfe; card: #fdfdfd; ink: #3f434a; accent: #2e77e5; primary: #3f434a. Keep the documented accents distinct from neutral copy and form surfaces. Decorative artwork contains additional tones not represented by these core tokens.

## Typography

The primary sampled text uses Garnett, FixEmoji, sans-serif at 26px/normal, weight 500, with normal tracking. The body sample uses Garnett, FixEmoji, sans-serif at 26px/normal. These are measured element styles, not a universal brand scale. The matching mobile primary sample uses 26px/normal.

## Layout

Anchor the Slite wordmark at the upper left of the blue scribbled canvas. Center a rounded white panel with a left-aligned account heading, stacked Google/Apple/Slack buttons, an or divider, email field, blue continuation action and legal helper. Keep the join-existing-team link below the panel.

The main screenshot records a 1440px-wide desktop page with a document height of 1000px. Mobile evidence is the opening 390×844px viewport, not a complete mobile-page audit.

At 390px the panel spans the screen beneath the logo and extends vertically with generous blank space under the controls. Provider choices and email continuation retain full-width alignment. The blue background remains visible above and below the panel.

## Elevation & Depth

The grainy blue background and loose pale linework add texture; the white panel uses soft rounded corners and restrained elevation. Provider buttons use low-contrast gray fills, while email continuation is saturated blue. Exact shadow blur and motion easing were not measured.

## Shapes

The sampled action has a computed corner radius of 8px and padding 0px. Treat additional spacing or breakpoint choices as adaptation decisions, not measured source constants.

## Components

This is the public initial registration state. Provider authentication, email continuation, terms links and team joining were not activated.

## Do's and Don'ts

- Do preserve the documented hierarchy and observed mobile content order.
- Do keep field labels, source attribution and alternative actions visibly associated with their content.
- Do treat prices, metrics and testimonials as dated source content, not verified results.
- Don't infer unseen interaction states, successful authentication or application behavior.
- Don't reproduce low-contrast text without checking accessibility in the new implementation.