Slite — blush workspace-discovery sign-in screen

---
version: alpha
name: Slite — blush workspace-discovery sign-in screen
colors:
  surface: '#f7e3ea'
  card: '#fdfdfd'
  ink: '#3f434a'
  primary: '#3f434a'
typography:
  primary:
    fontFamily: Garnett
    fontSize: 26px
    fontWeight: 500
  body:
    fontFamily: Garnett
    fontSize: 26px
    fontWeight: 500
  control:
    fontFamily: UniversalSans
    fontSize: 14px
    fontWeight: 500
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 0px
---

## Overview

A pink textured workspace-discovery screen with a white card offering either email-based team lookup or a workspace subdomain field.

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

## Colors

Observed surface and computed-style palette: surface: #f7e3ea; card: #fdfdfd; ink: #3f434a; 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

Place the dark wordmark on a pale pink hand-drawn background. In the centered white panel, lead with Sign in, then an email team-finder field with a small adjacent arrow button and explanatory text. Separate a second subdomain entry with an or rule. Show the fixed .slite.com suffix within the field and the new-team link outside the card.

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.

The mobile card fills the available width and grows tall, placing the field groups near its top with a large intentional empty area below. The team-creation link stays beneath the card on the pink canvas. The email arrow remains aligned to the field.

## Elevation & Depth

Soft panel corners and a faint shadow lift the white card from the blush canvas. The two entry routes are separated by a fine rule instead of separate boxes. Exact shadow blur and motion easing were not measured.

## Shapes

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

## Components

No email, workspace or subdomain was entered. The disabled-looking arrow is the untouched initial state; email delivery, organization lookup and subsequent authentication were not tested.

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