# SkyPesos brand Make your SkyMiles worth something. A friendly lookout for better SkyMiles trips. The supplied smiling cloud is the visual anchor: its soft lobes, two eyes, open smile, and message-bubble tail stay recognizable across every size. ## Direction - Color: Cloud #FFFFFF, Night sky #10223D, Twilight #193253, Lookout blue #345CDA, Starlight #AAC8FF, Mint #A0E5C4. - Type: Nunito 800 for headings, 900 for the wordmark; Nunito Sans 400–800 for reading and controls. Fonts are self-hosted, with their SIL Open Font License files included. - Layout: left-aligned copy and a large mascot share the opening; a message bubble ties the character to the alert product. Generous space around the mascot, quiet surfaces around forms. - Character: helpful, light, specific. The mascot is the memorable element. Avoid competing decorative imagery or additional mascots. Forms and messages echo the cloud. The deep navy background gives the white mascot and its animations a clear silhouette. Keep mascot appearances on dark surfaces, with Twilight panels providing separation from the page. ## Palette and contrast Use #F5F8FF for headings and body text, and #B3C3DB for secondary text. Use white text on Lookout blue buttons. Starlight is for links, icons, and focus rings. Error text is #FFB1BE; success text is Mint on #183E38. Form controls use #7893B6 borders. Match these values to tokens.json and the :root variables in styles.css. Present airline logos in monochrome white on navy cards, preserving each mark’s original shape and proportions. The site applies a white filter to the original transparent assets. Reserve light logo previews for the navy vector wordmark; dimensional clouds, white marks, and action animations belong on navy. ## Logo - cloud-mascot.png: transparent master, 1000 × 1000. - cloud-mascot.webp: optimized hero illustration. - cloud-small.webp: 160 × 128 for navigation and small UI appearances. - cloud-mark.svg / cloud-mark-navy.svg: flat vector adaptations for compact use. - cloud-icon-navy-white-256.png: navy cloud icon on a white 256 × 256 canvas, without lettering. Use when an upload requires an icon smaller than 512px. - cloud-icon-navy-transparent-256.png: the same navy icon on a transparent 256 × 256 canvas, for white or light backgrounds. Both preserve the supplied flat vector mark and include clear space. - wordmark-navy.svg / wordmark-white.svg: complete horizontal logos, with outlined lettering and no font dependency. - wordmark-*.png: transparent 1200 × 300 exports. - app-icon-192.png / app-icon-512.png: blue square app assets; the 512px mark stays within the maskable safe area. - favicon.svg, favicon.ico, favicon-32.png, apple-touch-icon.png: browser and device variants. - social-card.png / social-card.svg: 1200 × 630 share artwork on Night sky. Use the dimensional mascot at 48px wide or larger. For smaller sizes, use the flat mark or favicon. Keep clear space at least one eye diameter around the logo. Preserve proportions and the original expression. Place white marks on blue or navy; use the navy mark on white. Do not stretch, recolor individual facial features, rotate the wordmark, or add busy backgrounds. ## Icons and shape The `illustrations` folder adds three dimensional companion assets: a white passenger plane, two destinations connected by a flight path, and a pale blue globe. Use them for trip inspiration, watch setup, empty alert history, and campaign artwork. The cloud remains the main character. Preview and download the illustrations at `/brand.html#illustrations`; transparent PNGs, web-sized WebPs, final prompts, and source notes are included in the full kit. Preserve their proportions and use them on the dark brand surfaces. Twelve matching icons use a 24 × 24 viewBox, a 1.8-unit stroke, and round ends and joins. Use individual SVGs or the shared sprite. Interface icons inherit currentColor. Keep icon buttons labeled for assistive technology. Inputs have 12px corners, destination cards 20px, larger form panels 26px. Pills are reserved for actions and selectable filters. Alert bubbles use one tighter lower corner, echoing the mascot's tail. Travel month tiles are grouped by year with visible checkmarks and full accessible month/year names. Anytime is a separate choice. Shortcuts include the current month; summaries preserve gaps in a travel window. Keep controls at least 44px tall and preserve visible keyboard focus. ## Voice Warm, direct, and useful. Say “Start my watch,” “Your cities,” and “Save watch.” Explain errors with a next action. Reserve playful copy for headings and empty states. Keep prices, delivery channels, and availability statements literal. Email is the default alert channel and the first step in signup. Telegram and Slack are optional connections after email verification. SMS and WhatsApp are labeled “Coming soon,” with no active connection controls. Sample awards and previews must be clearly marked as illustrative. Never present illustrative seats as live inventory or promise that a fare will remain available. ## Account setup and email Account setup follows two steps: verify an email address, then choose a watch. Use the same Night sky, Twilight, Starlight, and Mint palette for sign-in, account settings, and transactional emails. Email templates use a system sans-serif fallback for email clients, a white cloud on navy, and readable text alongside the HTML version. The kit includes example sign-in and alert emails; their codes and fares are illustrative. ## Motion and accessibility The seven supplied animations are available as transparent, 240px WebP files in the animations folder, alongside the original GIF pack. Preview and download them at /brand.html#animations. - Hero: one bounce on page load, with an optional replay control. Uses original-size WebP and a matching still. - Loading: gentle hover, shown only after 160ms. Motion stops after four seconds; the loading message stays until the request finishes. - Successful watch creation, saves, and resumes: one excited reaction after the server confirms success. - Sign-in code sent and watch paused: one blink and smile. Signing in uses the short pop-in. - Bounce, talking, and spin: optional brand assets, available in the gallery. Never delay navigation or request completion to finish an animation. Failed requests show an actionable message and restore controls. Reduced-motion settings and hidden tabs stop playback and show a still cloud. Avoid decorative animations that run continuously. Keep visible keyboard focus, semantic labels, selected-state checkmarks, and readable contrast. ## Campaign gradients and destination photography Campaign backgrounds can move from Night sky through a muted blue (#1E406B), returning to deep navy. Keep the transition broad and subtle, with a soft blue glow behind the mascot. Buttons may use a restrained #4774E8 → #345CDA → #2B52C4 gradient. These are campaign treatments; the core palette remains the reference for product controls. For full-bleed destination photography, use a navy overlay that is darkest behind the logo and captions. Preserve the destination's recognizable landmarks when cropping to 9:16. The SkyPesos explainer uses CC0 photographs of Tokyo, Paris, and Hawaii; source pages, author credits, and license records are included in the Meta ad pack. Keep historical award examples separate from destination imagery and label inspiration as subject to changing availability. ## Asset provenance The dimensional mascot is derived from the user-supplied image. Low-alpha edge specks were removed, the transparent margins cropped, and web-sized exports created; the face and shading were retained. The flat marks and interface icons are companion artwork. Font licenses cover the included font files; they do not establish rights to the supplied mascot.