Potiential-Automation/DESIGN.md

name, description, colors, typography, rounded, spacing, components

name	description	colors	typography	rounded	spacing	components
G2Team Potential Updater	A local ops tool for running the Charge Billed bot, set in a quiet night sky watched by an orange owl.	night panel panel-line field field-line pill-fill pill-fill-hover pill-line pill-text ink ink-2 owl owl-soft error #040b26 #0c1638 #26335e #050c28 #56689c #0a1435 #101d45 #c9d5f2 #ffffff #eef2ff #a9b6d8 #ec7d33 #f5a25a #ff9a9a	display title body label button input message fontFamily fontSize fontWeight lineHeight letterSpacing Segoe UI Variable Text, Segoe UI, system-ui, -apple-system, sans-serif clamp(20px, 5vw, 23px) 650 1.2 -0.01em fontFamily fontSize fontWeight Segoe UI Variable Text, Segoe UI, system-ui, -apple-system, sans-serif 20px 700 fontFamily fontSize fontWeight lineHeight Segoe UI Variable Text, Segoe UI, system-ui, -apple-system, sans-serif 15px 400 1.5 fontFamily fontSize fontWeight lineHeight Segoe UI Variable Text, Segoe UI, system-ui, -apple-system, sans-serif 15px 600 1.5 fontFamily fontSize fontWeight letterSpacing Segoe UI Variable Text, Segoe UI, system-ui, -apple-system, sans-serif 15px 600 0.02em fontFamily fontSize fontWeight letterSpacing Segoe UI Variable Text, Segoe UI, system-ui, -apple-system, sans-serif 16px 400 0.04em fontFamily fontSize fontWeight lineHeight Segoe UI Variable Text, Segoe UI, system-ui, -apple-system, sans-serif 14px 400 1.5	card pill round 18px 999px 50%	tight control-gap card 8px 20px 24px	button-pill button-pill-hover input-pill icon-button-reveal card backgroundColor textColor typography rounded height width {colors.pill-fill} {colors.pill-text} {typography.button} {rounded.pill} 46px 100% backgroundColor {colors.pill-fill-hover} backgroundColor textColor typography rounded padding height width {colors.field} {colors.ink} {typography.input} {rounded.pill} 0 52px 0 20px 46px 100% textColor rounded size {colors.ink-2} {rounded.round} 38px backgroundColor rounded padding width {colors.panel} {rounded.card} 28px 24px 24px min(360px, 100%)

Design System: G2Team Potential Updater

Overview

Creative North Star: "The Owl's Night Watch"

A calm night sky, one lit card, and a smooth, softly shaded orange owl perched on its top edge who watches you type. Everything around the owl is quiet and dark: deep navy ground, a few small round stars, dark outlined pill controls, and the platform's own UI face. The owl is the only warm thing on the screen and the only thing that moves with purpose; its reactions (eyes following the caret, a sad droop on a wrong password, an amber glow when the password is shown, a hop on success) carry the feedback alongside plain text, never instead of it.

The world is rendered natural, not game-like. The user explicitly rejected a pixel-art or game look ("it must not look like a game, be natural"): shapes are smooth vector curves with radial-gradient shading, stars are soft round dots, motion is short and eased. This is an Operate tool for an ops team, so density stays low and copy stays plain.

The system has been built on one surface so far (the sign-in page). Anything below described as a single instance has only that one use in the build and should be treated as provisional, not a pattern.

Key Characteristics:

• Deep navy night ground with a sparse, seeded field of small round stars, kept clear of text and controls.
• One warm accent, owl orange, reserved for the owl, focus rings, caret, selection and the hover border.
• Dark outlined pill controls for both the field and the button, after the user's HOOT button.
• Platform UI face for every text role, including the product name.
• A smooth shaded owl mascot whose states are the page's expressive feedback; reduced motion turns its movement off.

Colors

A cold, near-monochrome navy ramp lit by a single warm orange; the warmth belongs to the owl.

Primary

• Owl Orange (owl): the system's only UI accent. Used for focus outlines on every control, the hover border on the pill button, the text caret, and the text-selection background (with Night as the selected text). It is never a fill for controls.
• Lamplight Orange (owl-soft): the gentler orange for advisory text, currently only the "Caps Lock is on" note (single instance).

Neutral

• Night Navy (night): the page ground and the sky. Also the scrollbar track.
• Card Navy (panel): the one raised surface, the sign-in card.
• Card Edge (panel-line): the card's 1px border and the scrollbar thumb.
• Well Navy (field): the input fill, slightly darker than the card so the field reads as recessed.
• Field Edge (field-line): the input's resting 1px border (about 3.4:1 against the field).
• Button Navy (pill-fill) and Button Navy Lifted (pill-fill-hover): the pill button's fill at rest and on hover. These live as literal values in the button rule, not as custom properties.
• Moonlight Edge (pill-line): the button's 1.5px outline. At 10% alpha it is also the reveal icon's hover wash.
• Starlight Ink (ink): primary text, the product name and input text.
• Mist Ink (ink-2): secondary text (the "Sign in" subtitle, body copy under the signed-in title) and the resting reveal icon.
• Pure White (pill-text): the pill button label only.

Semantic

• Soft Alarm (error): error message text and the invalid field's border and focus outline. A light coral chosen to read on navy, not a saturated red.

Illustration values (not UI tokens)

• Star field: stars are drawn by script from four colors (Sky Blue #6ea8ff, Teal #4fd1c5, Ember #f29c4b, Frost #dfe7ff), 1.5 to 3px, 0.45 to 0.9 opacity, about a third twinkling.
• Owl palette: the mascot's own gradients and fills, listed under The Owl in Components, including its peek glow (#ffc400, #ffd84d, #ffb300, #ffe066). These live only inside the owl SVG and its state rules; they are never applied to UI chrome.

Named Rules

The One Warm Thing Rule. Orange belongs to the owl. In the UI it appears only as a signal (focus, caret, selection, hover border, the caps-lock note); controls and surfaces stay navy. The owl's ambers and golds stay inside the owl.

The Clear Sky Rule. Stars never sit behind text, the owl or the card; they are placed with a 10px keep-out around each and redrawn on resize from a fixed seed so they do not jump.

Typography

Display Font: Segoe UI Variable Text (with Segoe UI, system-ui, -apple-system, sans-serif) Body Font: the same stack Label/Mono Font: none distinct

Character: One platform face for everything, as the direction contract specifies for this Windows-hosted ops tool. Hierarchy comes from weight and size, not from a second family.

Hierarchy

• Display (650, clamp(20px, 5vw, 23px), 1.2, -0.01em, balanced wrapping): the product name, centered at the top of the card. Single instance.
• Title (700, 20px): the signed-in confirmation heading. Single instance.
• Body (400, 15px, 1.5): the "Sign in" subtitle and running copy, usually in Mist Ink.
• Label (600, 15px): field labels, 8px above the field.
• Button (600, 15px, 0.02em): the pill button label.
• Input (400, 16px, 0.04em): typed text; 16px keeps mobile browsers from zooming.
• Message (400, 14px): the error and caps-lock lines under the field.

Layout

A single centered column on a full-viewport sky. The column is anchored a fixed distance above mid-screen (top padding max(32px, 50vh - 230px), 16px sides, 48px bottom) rather than vertically centered, so a message appearing in the card grows the card downward instead of moving the owl. The card is min(360px, 100%) wide, with its top margin reserving the owl's height (owl width × 50/48 + 12px) so the owl perches on the card's top edge with its feet 7px over the border.

Everything sits inside the card. The product name and the "Sign in" subtitle are centered at its top (subtitle 4px below the name, 22px above the field label); the form below them is left-aligned. After sign-in the subtitle and form hide and the signed-in panel takes their place under the product name.

Spacing is small and repeated: 8px between label and field and between field and message lines; 20px between the field block and the button; 6px between the signed-in title and its copy; 24px card padding (28px at top).

One breakpoint: at 420px and below the owl shrinks from 190px to 160px wide; nothing else reflows.

Elevation & Depth

Mostly tonal: the night ground, the slightly lighter card, and the slightly darker recessed field carry the layering. The card is the one lifted object, with a single deep, soft ambient shadow that sinks it into the night rather than floating it. Under the owl a faint orange radial glow (#ffaa5a at 35% fading to 0) grounds it on the card. No other element casts a shadow.

Shadow Vocabulary

• Night lift (box-shadow: 0 18px 40px rgba(0, 3, 15, .5)): the sign-in card only. Single instance.

Named Rules

The Single Lift Rule. One raised surface per screen; controls are outlined, not shadowed.

Shapes

Full round pills (999px) for both the field and the primary button; the reveal icon button is a 38px circle inset 4px into the field's right end. The card uses a gently rounded 18px corner with a 1px border. The owl is one smooth rounded silhouette with a heart-shaped face disc, oval eyes and softly rounded rectangular glasses (1.5 corner radius in SVG units). Stars are circles. Nothing in the system is sharp-cornered or stepped.

Components

Buttons

Dark, outlined and calm, after the user's HOOT button.

• Shape: full pill (999px), 46px tall, full card width.
• Primary (pill): Button Navy fill, Pure White label (600, 15px, 0.02em), 1.5px Moonlight Edge outline, 20px above it.
• Hover: border turns Owl Orange and the fill lifts to Button Navy Lifted, over 0.15s ease-out.
• Active: nudges down 1px.
• Focus: 2px Owl Orange outline, 3px offset.
• The only button variant in the build; there is no secondary or ghost button yet.

Inputs / Fields

• Style: Well Navy fill, 1px Field Edge border, full pill (999px), 46px tall, 20px left padding and 52px right padding to clear the reveal button; Starlight Ink text at 16px with 0.04em tracking. Label sits above in Label weight. The password field takes focus on load.
• Focus: 2px Owl Orange outline at 2px offset and the border also turns Owl Orange.
• Error: when invalid, the border and focus outline turn Soft Alarm, and a Soft Alarm message (14px) appears 8px below; the message is announced and clears as soon as the user types.
• Caps Lock: a Lamplight Orange note, "Caps Lock is on", appears below while the key is on and hides on blur.
• Reveal (show/hide password): a 38px circular icon button inside the field's right end, Mist Ink at rest; on hover Starlight Ink with a 10% Moonlight wash; focus is a 2px Owl Orange outline at 0 offset. The icon is a standard 24-unit stroke eye (20px, 1.8 stroke, round caps and joins) that swaps to eye-off; it does not steal focus from the field. This is the build's only icon.

Cards / Containers

• Corner Style: 18px.
• Background: Card Navy, 1px Card Edge border.
• Shadow Strategy: Night lift (see Elevation & Depth).
• Internal Padding: 28px top, 24px sides and bottom.
• Single instance: the sign-in card, which hosts the owl on its top edge and the centered product name and subtitle inside.

The Owl (signature component)

An inline SVG (viewBox 48×50, 190px wide, 160px at 420px and below), smooth and shaded, every shape outlined in dark brown (#38200b, 1.2 stroke, round joins). The coat is a radial gradient (#ff990e → #f58200 → #bd4b00), the wings a darker linear gradient (#ed7b00 → #a73e00), with crown feather strokes (#ac4904) and rows of small golden chevron feather marks on the breast (#ffbe42). A flat cream face disc (#ffe8b3) holds oval eyes (whites #fffdf4, brown irises #6b3518, near-black pupils #170e08, white catchlights), a beak (#eb870a) and small feet (#ed900f). Square, rounded-rectangle glasses in dark brown (#2a180c, 1 stroke) sit low on the face across the lower half of the eyes, with a curved bridge and short temple arms; this is the user's preferred look and supersedes the round glasses in the direction contract. It is decorative (aria-hidden); every state it shows is also stated in text.

States:

• Idle: a breathing bob of 0.4 SVG units (about 1.6px at 190px) over 3.2s, continuous.
• Blink: eyelids close for 160ms at random 2.5 to 6s intervals; skipped during the success and sad states.
• Gaze: while the password field has focus, the irises look down and slide from left to right as the typed text (or masked dots) fills the field, tracking the caret; they recenter on blur.
• Empty submit (tilt): the head tilts -10deg and back over 0.8s.
• Wrong password (sad): over 1.4s the head droops (down 1.2 units, rotated -6deg) and the eyes close in one slow blink, then the gaze returns to the caret.
• Show password (peek): while the password is visible, the eye rims glow amber (stroke #ffc400 at 1.5, drop-shadow glow #ffd84d and #ffb300) and the glasses lenses fill with a translucent gold (#ffe066 at 45%, glow #ffc400), easing in and out over 0.15s. These four are illustration values of the owl, not UI tokens.
• Tap the owl (jump): clicking the owl plays the success hop and wing flap without the smile. Pointer-only and purely decorative.
• Success (hop): a 0.75s hop (14 units, then a 3-unit rebound), both wings flap, and the eyes close into upward smile arcs; then the subtitle and form hide, the signed-in panel replaces them and receives focus.
• Reduced motion: all owl and star animation and transitions are off, blinking and the tap jump stop, and success goes straight to the signed-in panel. The gaze still repositions and the peek glow still shows, both without easing.

Do's and Don'ts

Do:

• Do keep the ground Night Navy and let the owl be the only warm, shaded object on screen.
• Do use Owl Orange for focus rings (2px outline) on every interactive element.
• Do build controls as dark outlined pills (999px, 46px tall) for both fields and primary buttons.
• Do say in text whatever the owl expresses; the owl is decoration with feedback, never the only feedback.
• Do give every owl or star animation a reduced-motion path that turns it off.
• Do keep stars small (1.5 to 3px), round, sparse, seeded and clear of text and controls.
• Do use clearly fake sample data in any design, mockup or screenshot (real run output is PHI).

Don't:

• Don't make it look like a game: no pixel art, stepped edges, chunky pixel fonts or arcade effects (user decision, 22 Oct).
• Don't fill controls with orange; orange is a signal, not a surface.
• Don't add shadows to controls; the card is the only lifted object.
• Don't add a second type family for display; hierarchy comes from weight and size in the platform face.