# Gleam brand guidelines This file describes how Gleam looks and sounds. When you design, build or write anything for Gleam, follow it: use only the colors and typefaces listed here, and write in the voice it describes. If something is not covered, say so and ask, do not invent a rule. The published guide: https://joisti.com/gleam. This file lives at https://joisti.com/gleam/brand.md and is always the guide's latest version. Last updated 2026-11-07. ## Colors | Name | Hex | RGB | CMYK | Use | | --- | --- | --- | --- | --- | | Paper | #F5F2EA | 245, 242, 234 | 3, 3, 7, 0 | Primary | | Custard | #FBF0C4 | 251, 240, 196 | 3, 4, 27, 0 | | | Butter | #F7D95C | 247, 217, 92 | 7, 12, 73, 0 | | | Toffee | #7D5A05 | 125, 90, 5 | 42, 57, 100, 30 | | | Blush | #FBE3EE | 251, 227, 238 | 1, 13, 1, 0 | | | Pink | #F7C5E0 | 247, 197, 224 | 3, 28, 0, 0 | | | Raspberry | #9C1B55 | 156, 27, 85 | 35, 98, 47, 18 | | | Haze | #E6DFF8 | 230, 223, 248 | 8, 11, 0, 0 | | | Lilac | #C3B2F0 | 195, 178, 240 | 24, 30, 0, 0 | | | Violet | #55379E | 85, 55, 158 | 85, 94, 1, 0 | | | Ice | #DCE8FB | 220, 232, 251 | 12, 5, 1, 0 | | | Blue | #3B6FE0 | 59, 111, 224 | 79, 61, 0, 0 | | | Navy | #1B2A6B | 27, 42, 107 | 100, 94, 30, 20 | | | Plum | #42102E | 66, 16, 46 | 59, 91, 50, 60 | | CMYK is for print on coated paper, estimated from the hex through U.S. Web Coated (SWOP) v2 unless marked (own): those are the brand's own values, from its printer, and win over any conversion. Section headers in the guide use Plum. ## Typefaces - **Geist Serif** (Primary) - Weights in use: 400 - Headlines at 400 Regular, line height Auto (0.92), letter spacing -3% - Used for: Headlines, one italic word where the line earns it - Available from: the brand's own font files - Font files (all as one zip: https://joisti.com/gleam/files/type-t1mbLm/geist-serif.zip): - 400 Regular: GeistSerif-Regular.woff2 — https://joisti.com/gleam/files/-HcXWuZL/GeistSerif-Regular.woff2 - **Geist** (Secondary) - Weights in use: 400, 500 - Text at 400 Regular, line height Auto, letter spacing Auto - Used for: Everything else, buttons to captions - Available from: Google Fonts - Get it: https://fonts.google.com/specimen/Geist ## Icons 36 icons, on a 24px grid, as the brand's own drawings (follow the SVG files, not a stroke weight): calendar, sparkle, spray, home, sun, pin, washer, key, bell, toggles, chat, bed, star, heart, broom, window, tag, bubbles, mop, door, towels, envelope, plant, trash, clock, shirt, sofa, phone, gift, profile, lock, shield, bolt, soap, search, bucket. All of them as SVG, in one zip: https://joisti.com/gleam/files/icons/gleam-icons.zip. Each on its own: - calendar: https://joisti.com/gleam/files/icons/calendar.svg - sparkle: https://joisti.com/gleam/files/icons/sparkle.svg - spray: https://joisti.com/gleam/files/icons/spray.svg - home: https://joisti.com/gleam/files/icons/home.svg - sun: https://joisti.com/gleam/files/icons/sun.svg - pin: https://joisti.com/gleam/files/icons/pin.svg - washer: https://joisti.com/gleam/files/icons/washer.svg - key: https://joisti.com/gleam/files/icons/key.svg - bell: https://joisti.com/gleam/files/icons/bell.svg - toggles: https://joisti.com/gleam/files/icons/toggles.svg - chat: https://joisti.com/gleam/files/icons/chat.svg - bed: https://joisti.com/gleam/files/icons/bed.svg - star: https://joisti.com/gleam/files/icons/star.svg - heart: https://joisti.com/gleam/files/icons/heart.svg - broom: https://joisti.com/gleam/files/icons/broom.svg - window: https://joisti.com/gleam/files/icons/window.svg - tag: https://joisti.com/gleam/files/icons/tag.svg - bubbles: https://joisti.com/gleam/files/icons/bubbles.svg - mop: https://joisti.com/gleam/files/icons/mop.svg - door: https://joisti.com/gleam/files/icons/door.svg - towels: https://joisti.com/gleam/files/icons/towels.svg - envelope: https://joisti.com/gleam/files/icons/envelope.svg - plant: https://joisti.com/gleam/files/icons/plant.svg - trash: https://joisti.com/gleam/files/icons/trash.svg - clock: https://joisti.com/gleam/files/icons/clock.svg - shirt: https://joisti.com/gleam/files/icons/shirt.svg - sofa: https://joisti.com/gleam/files/icons/sofa.svg - phone: https://joisti.com/gleam/files/icons/phone.svg - gift: https://joisti.com/gleam/files/icons/gift.svg - profile: https://joisti.com/gleam/files/icons/profile.svg - lock: https://joisti.com/gleam/files/icons/lock.svg - shield: https://joisti.com/gleam/files/icons/shield.svg - bolt: https://joisti.com/gleam/files/icons/bolt.svg - soap: https://joisti.com/gleam/files/icons/soap.svg - search: https://joisti.com/gleam/files/icons/search.svg - bucket: https://joisti.com/gleam/files/icons/bucket.svg ## Introduction ### Overview Gleam is the app for booking home cleaning. This is an introduction to who we are, what we stand for, and how the brand shows up everywhere. ### Who we are We started with a simple idea: a clean home should be easy to have. Gleam sends a vetted cleaner with everything needed, booked in two taps, for people who care about their homes. ### What we stand for Three beliefs sit behind the product and every decision in this guide. - **The shine is the point** People do not buy cleaning, they buy the feeling of a gleaming home. Every detail should carry that lift. - **Easy or it does not ship** Booking takes two taps. Anything that adds a step, a form or a doubt gets cut. - **Respect the home** We work in people's private spaces. The brand stays warm, tidy and trustworthy, never loud about it. ### About this guide This guide shows how Gleam looks, sounds and behaves. Use it whenever you make something in our name, from an app screen to a flyer, so everything feels like it came from the same bright place. ### Contact Questions about the brand, or need a file that is not here? Write to the brand team and we will help. ## Strategy ### Overview Gleam is built from one feeling outward: walking into a home that has just been cleaned. The light colors, the sparkle and the plain words all exist to bottle that moment. ### Mission Our mission is to make a cared-for home something you can order, not something you have to find time for. We handle the vetting, the supplies and the schedule, so the only thing left for you is the moment you walk back in. ### Brand We believe a clean home clears your head. The brand works like the product: bright, light and finished, with nothing left lying around. If a design feels cluttered or heavy, it is not Gleam yet. ## Logo - **Primary logo**: symbol and wordmark side by side, in its colors. The primary logo: use it first, wherever there is room. File: Gleam_Lockup.svg — https://joisti.com/gleam/logo/Gleam_Lockup.svg - **Brand mark**: the mark on its own, in its colors. File: Gleam_Symbol.svg — https://joisti.com/gleam/logo/Gleam_Symbol.svg - **Wordmark**: the name set in type, in its colors. File: Gleam.svg — https://joisti.com/gleam/logo/Gleam.svg - **Brand mark, white**: the brand mark all in white, made by Joisti from the color file. File: gleam-brand-mark-white.svg — https://joisti.com/gleam/logo/gleam-brand-mark-white.svg - **Brand mark, black**: the brand mark all in black, made by Joisti from the color file. File: gleam-brand-mark-black.svg — https://joisti.com/gleam/logo/gleam-brand-mark-black.svg - **Wordmark, white**: the wordmark all in white, made by Joisti from the color file. File: gleam-wordmark-white.svg — https://joisti.com/gleam/logo/gleam-wordmark-white.svg - **Wordmark, black**: the wordmark all in black, made by Joisti from the color file. File: gleam-wordmark-black.svg — https://joisti.com/gleam/logo/gleam-wordmark-black.svg - **Primary logo, white**: the primary logo all in white, made by Joisti from the color file. File: gleam-primary-logo-white.svg — https://joisti.com/gleam/logo/gleam-primary-logo-white.svg - **Primary logo, black**: the primary logo all in black, made by Joisti from the color file. File: gleam-primary-logo-black.svg — https://joisti.com/gleam/logo/gleam-primary-logo-black.svg - **Logo suite**: every file above, in the kit's folders, as one zip — https://joisti.com/gleam/files/logos/gleam-logos.zip Where a reverse, white or black version isn't listed, it isn't made for this logo (a picture, or a layered mark): use the color file, or the guide's Logos tiles. Never redraw, recolor outside the palette, stretch or add effects to the logo. Use the files from the guide. ### Construction The sparkle and the wordmark are drawn to share one cap height, so they lock together cleanly at every size. Use the files provided; never redraw or rebuild either part. ### Logos The primary logo pairs the sparkle with the name: use it first, wherever there is room. The wordmark alone suits wide, quiet places. The sparkle stands on its own only where the name is already clear, like the app icon. ### Clearspace Give the logo room to breathe. Keep a clear area of half the logo's height on every side, and never let type, photographs or other marks cross into it. The guide's clearspace diagram uses 50% of the logo's height as the unit. Where the written guidance above measures it differently, the written guidance wins. ### Logo colors The logo is Plum on every light ground and Paper on Plum. One ink at a time: never two colors inside the lockup, never a color outside the palette, never a ground it cannot be read against. Logo color on each background, as the designer chose: - On Custard (#FBF0C4): the logo in Toffee (#7D5A05) - On Butter (#F7D95C): the logo in Toffee (#7D5A05) - On Toffee (#7D5A05): the logo in Custard (#FBF0C4) - On Blush (#FBE3EE): the logo in Raspberry (#9C1B55) - On Raspberry (#9C1B55): the logo in Blush (#FBE3EE) - On Haze (#E6DFF8): the logo in Violet (#55379E) - On Violet (#55379E): the logo in Haze (#E6DFF8) - On Ice (#DCE8FB): the logo in Navy (#1B2A6B) - On Navy (#1B2A6B): the logo in Ice (#DCE8FB) - On Paper (#F5F2EA): the logo in Plum (#42102E) - On Plum (#42102E): the logo in Pink (#F7C5E0) - On Blue (#3B6FE0): the logo in Ice (#DCE8FB) The logo files in each of these colors, made by Joisti from the color file: - Toffee: Brand mark — https://joisti.com/gleam/logo/gleam-brand-mark-toffee.svg; Wordmark — https://joisti.com/gleam/logo/gleam-wordmark-toffee.svg; Primary logo — https://joisti.com/gleam/logo/gleam-primary-logo-toffee.svg - Custard: Brand mark — https://joisti.com/gleam/logo/gleam-brand-mark-custard.svg; Wordmark — https://joisti.com/gleam/logo/gleam-wordmark-custard.svg; Primary logo — https://joisti.com/gleam/logo/gleam-primary-logo-custard.svg - Raspberry: Brand mark — https://joisti.com/gleam/logo/gleam-brand-mark-raspberry.svg; Wordmark — https://joisti.com/gleam/logo/gleam-wordmark-raspberry.svg; Primary logo — https://joisti.com/gleam/logo/gleam-primary-logo-raspberry.svg - Blush: Brand mark — https://joisti.com/gleam/logo/gleam-brand-mark-blush.svg; Wordmark — https://joisti.com/gleam/logo/gleam-wordmark-blush.svg; Primary logo — https://joisti.com/gleam/logo/gleam-primary-logo-blush.svg - Violet: Brand mark — https://joisti.com/gleam/logo/gleam-brand-mark-violet.svg; Wordmark — https://joisti.com/gleam/logo/gleam-wordmark-violet.svg; Primary logo — https://joisti.com/gleam/logo/gleam-primary-logo-violet.svg - Haze: Brand mark — https://joisti.com/gleam/logo/gleam-brand-mark-haze.svg; Wordmark — https://joisti.com/gleam/logo/gleam-wordmark-haze.svg; Primary logo — https://joisti.com/gleam/logo/gleam-primary-logo-haze.svg - Navy: Brand mark — https://joisti.com/gleam/logo/gleam-brand-mark-navy.svg; Wordmark — https://joisti.com/gleam/logo/gleam-wordmark-navy.svg; Primary logo — https://joisti.com/gleam/logo/gleam-primary-logo-navy.svg - Ice: Brand mark — https://joisti.com/gleam/logo/gleam-brand-mark-ice.svg; Wordmark — https://joisti.com/gleam/logo/gleam-wordmark-ice.svg; Primary logo — https://joisti.com/gleam/logo/gleam-primary-logo-ice.svg - Plum: Brand mark — https://joisti.com/gleam/logo/gleam-brand-mark-plum.svg; Wordmark — https://joisti.com/gleam/logo/gleam-wordmark-plum.svg; Primary logo — https://joisti.com/gleam/logo/gleam-primary-logo-plum.svg - Pink: Brand mark — https://joisti.com/gleam/logo/gleam-brand-mark-pink.svg; Wordmark — https://joisti.com/gleam/logo/gleam-wordmark-pink.svg; Primary logo — https://joisti.com/gleam/logo/gleam-primary-logo-pink.svg ### Misuse Keep the logo as it was drawn. Do not stretch, rotate, recolor or outline it, add shadows or other effects, or let it sink into a busy photograph. Don't stretch, squash, rotate, recolor or outline the logo, add effects such as shadows to it, or let it fade into its background. ## Color ### Palette Four families, each a ladder of three: a pale tint, the color, and its deep. Butter runs Custard to Toffee, Pink runs Blush to Raspberry, Lilac runs Haze to Violet, Blue runs Ice to Navy. Paper is the one white and Plum the one ink outside the families. ### Proportion Roughly how much of each color appears across a piece. Paper carries most of the weight, the pastels take turns as the surface color, Plum is every word, and Blue appears about once per piece. ### Combinations Pairs live inside one family, and the value gap does the work: tint ground with the deep on it, deep ground with the tint or the color on it. Hue never changes within a surface, so nothing can clash, and the families take turns across a piece. Plum on Paper stays the reading pair. The color combinations the brand uses (background, then what sits on it; the ratio says what text it can carry): - On Custard (#FBF0C4): Toffee (#7D5A05, 5.5:1, AA) - On Butter (#F7D95C): Toffee (#7D5A05, 4.5:1, AA) - On Toffee (#7D5A05): Butter (#F7D95C, 4.5:1, AA) - On Blush (#FBE3EE): Raspberry (#9C1B55, 6.4:1, AA) - On Pink (#F7C5E0): Raspberry (#9C1B55, 5.2:1, AA) - On Raspberry (#9C1B55): Blush (#FBE3EE, 6.4:1, AA) - On Haze (#E6DFF8): Violet (#55379E, 6.7:1, AA) - On Violet (#55379E): Lilac (#C3B2F0, 4.5:1, AA) - On Ice (#DCE8FB): Navy (#1B2A6B, 10.7:1, AAA) - On Blue (#3B6FE0): Ice (#DCE8FB, 3.7:1, AA Large) - On Paper (#F5F2EA): Plum (#42102E, 14.0:1, AAA) - On Plum (#42102E): Pink (#F7C5E0, 10.4:1, AAA) Keep to these combinations and avoid low-contrast mixes. ### Misuse Combinations to avoid: pairs that cross families, and rungs that sit too close on the same ladder. If the hues differ or the values nearly match, it is not a Gleam pair. Color combinations to avoid (background, then what sits on it): - Butter on Pink - Blue on Lilac - Custard on Butter - Violet on Raspberry - Navy on Blue ### Color modes Each mode suits a medium. RGB gives the brightest Butter and Blue on screen, where this brand lives; CMYK covers everyday printing and will soften them a little, which is expected and fine. ## Typography ### Typeface Two voices, two jobs. Geist Serif carries every headline at minus three percent, with one italic word where the line earns it. Geist does everything else, from buttons to captions. Nothing in between: a line is either the serif moment or quiet sans. ### Hierarchy Hierarchy tells people what to read first. Two sizes do the work: the serif display moment and the quiet sans label, both in Plum, set tight and close to the edges. Use these steps and nothing in between. | Role | Size | Line height | Tracking | Weight | | --- | --- | --- | --- | --- | | Display | 64px | 1 | -3% | | | Heading | 40px | 1.1 | -3% | | | Subheading | 24px | 1.25 | 0% | | | Body | 16px | 1.4 | 0% | | | Caption | 12px | 1.4 | 1% | | Line height and tracking are what each style is set in. A style follows its typeface's line height and letter spacing for headlines or text, unless the value is marked (own): set for that style alone, it stays when the typeface's changes. ## Motion ### Overview We move on one curve and three timings. Small things are quick, most moves take the base timing, and the big shine moments are slow. Keep to those and everything feels like Gleam. ### Principles Three ideas behind every move. Everything else in this section follows from them. - **Clear** Every move has a reason: to show where something came from or where it went. - **Purposeful** Motion guides attention to what matters, then gets out of the way. - **Consistent** The same kind of moment always moves the same way. ### Curve Our signature curve. Use it for anything that moves, in place of the defaults in your tools. Signature curve: cubic-bezier(0.22, 0.24, 0, 1). Use it for anything that moves, never a tool's default easing. Durations: fast 150ms (small things), base 300ms (most moves), slow 500ms (big moments). Fades take about half as long as the move they go with, so nothing looks washed out on the way in. With reduced motion turned on, replace movement with a short fade. ### In use Our logo, and the components every screen has, each moving on our curve. ### Do and don’t A few rules that keep motion feeling like us. - Purpose - Do: Move things to show where they came from or where they went. - Don't: Animate just to decorate. - Timing - Do: Quick for small things, slow only for the shine moments. - Don't: Make anyone wait for an animation before they can book. - Comfort - Do: Respect the reduced motion setting: fade instead of move. - Don't: Spin, flash or shake large areas of the screen. ## Layout ### Overview Our grid runs tight to the edges: a 3% margin, six columns, one subject per frame. Labels sit in the corners on the same inset everywhere, display type goes as big as the format allows, and nothing floats. ### Grid One grid for every format. Swipe through to see how the logo, headlines and photographs sit on it. - **Setup** Our margin is tight: 3% of the shortest side of the format, 6 mm on an A4 page. Inside it are six columns, with gutters half the size of the margin. (page: https://joisti.com/gleam/files/0GQJVY7g/grid-setup.png) - **Formats** The margin follows each format's shortest side, so the grid scales with it: 6 mm on A4, 32 px on a square post or a 16:9 screen. (page: https://joisti.com/gleam/files/QFJ_nwff/grid-formats.png) - **Logo** The logo sits on the bottom margin: a third of the width in layouts, up to margin to margin when it is the hero. (page: https://joisti.com/gleam/files/A5RfhHN_/grid-logo.webp) - **Headlines** Headlines start on the top margin and run from margin to margin. Set them as big as the layout allows, close to the edges. (page: https://joisti.com/gleam/files/xrKipCmC/grid-headlines.png) - **Photography** Photographs run to the edge, across the whole format or half of it. Never crop or stretch them, and keep type on the paper, not on the photograph. (page: https://joisti.com/gleam/files/S5dCv7d5/grid-photography.webp) ### Do and don’t The rules that keep every Gleam layout tight. They apply to every surface, from a story to a billboard. - Space - Do: Scale the headline and the image until the gap between them closes. - Don't: Leave dead space in the middle, or float things with air on every side. - Alignment - Do: One axis per surface: the image sits on the same margin line as the type. - Don't: Center an image against left-set text. - Hierarchy - Do: Two type sizes only: giant display or a small label in a corner. - Don't: Add in-between sizes that compete with the headline. ## Photography ### Overview Our photography is the result, not the chore. Bright rooms, crisp linens and people glad to be home, shot in daylight with calm compositions, so every image feels like walking in after the clean. ### Principles Three qualities make a photograph ours. Check a new image against each of them before it is used. - **Daylight** Soft natural light from windows. No flash, no moody shadows, no filters. - **The home leads** Rooms, linens and surfaces people are proud of. The work shows up in details, not in struggle. - **Quiet joy** People at ease in their own space. Nothing posed, nothing grinning at the camera. ### Style A small set of images that sets the tone. New photography should sit comfortably beside these. - getty-images-iWG9i7p36rg-unsplash.webp: https://joisti.com/gleam/files/kHrtsTFP/getty-images-iWG9i7p36rg-unsplash.webp - Breakfast in the sun.webp: https://joisti.com/gleam/files/IPYan22b/Breakfast%20in%20the%20sun.webp - brooke-cagle-MRY-C77u3Bc-unsplash.webp: https://joisti.com/gleam/files/kS3_Qnhx/brooke-cagle-MRY-C77u3Bc-unsplash.webp - Booking together.webp: https://joisti.com/gleam/files/e7nKW5CP/Booking%20together.webp - getty-images-U4tss1wd3DU-unsplash.webp: https://joisti.com/gleam/files/-_geyDBa/getty-images-U4tss1wd3DU-unsplash.webp - Towels at the window.webp: https://joisti.com/gleam/files/8Q1MDqI2/Towels%20at%20the%20window.webp - getty-images-2pZntDUPmzs-unsplash.webp: https://joisti.com/gleam/files/9xoBMYvW/getty-images-2pZntDUPmzs-unsplash.webp - hans-0V4nMShv52Y-unsplash.webp: https://joisti.com/gleam/files/-maeyoh3/hans-0V4nMShv52Y-unsplash.webp - andrej-lisakov-FYs-TCDKri0-unsplash.webp: https://joisti.com/gleam/files/TGrYY1Za/andrej-lisakov-FYs-TCDKri0-unsplash.webp - hans--NtXjRMe_Ak-unsplash.webp: https://joisti.com/gleam/files/GpU5IeKj/hans--NtXjRMe_Ak-unsplash.webp - The bath.webp: https://joisti.com/gleam/files/qGBxxREx/The%20bath.webp - hans-Bg6ZNNOEYjA-unsplash (1).webp: https://joisti.com/gleam/files/8KlTtrKd/hans-Bg6ZNNOEYjA-unsplash%20%281%29.webp - Pressed napkins.webp: https://joisti.com/gleam/files/ZlnSQUU4/Pressed%20napkins.webp - Folded linens.webp: https://joisti.com/gleam/files/twNVTIuC/Folded%20linens.webp These pictures show the brand's style; rights stay with their owners, so check the brand's own license before reusing one. ### Treatment How an image is framed and finished. Photographs sit inside the brand's own shapes wherever a crop is a choice: the sparkle and its diamond core are the windows, on a flat palette ground. Full bleed is for covers and headers only. | Aspect | Guidance | | --- | --- | | Light | Daylight, soft and even, from windows | | Color | True to life and airy, never filtered | | Composition | Calm and frontal, with clear space for type | | Depth | Shallow focus for details, deep focus for rooms | | Crop | Full bleed to the edge, wide for headers, 4:5 for cards | ### Do and don’t The most common decisions when choosing or placing a photograph, with the right call beside the wrong one. - Subjects - Do: Show the clean home and people enjoying it. - Don't: Show grime, mess or before-and-after shock shots. - Shaped windows - Do: Show the whole sparkle or diamond, with air around it, over a still life. - Don't: Crop the shape itself until it stops reading. - Faces - Do: Give people clean rectangles. - Don't: Let a shape's edges cut through a face. - Editing - Do: Correct exposure and white balance, then stop. - Don't: Add filters, vignettes or heavy contrast. ## Applications ### Overview A selection of the brand in use, showing how the sparkle, the colors and the tight grid come together in the places people actually meet Gleam. ### In use - gleam-sign-row.webp: https://joisti.com/gleam/files/seKcKiFL/gleam-sign-row.webp - Tote, Lilac on Violet.webp: https://joisti.com/gleam/files/v7elF6kq/Tote%2C%20Lilac%20on%20Violet.webp - gleam-billboard.webp: https://joisti.com/gleam/files/74Uhq-Ls/gleam-billboard.webp - Team badges.webp: https://joisti.com/gleam/files/im-3AqNO/Team%20badges.webp - Business card, back.webp: https://joisti.com/gleam/files/cujniUB_/Business%20card%2C%20back.webp - Splash screen.webp: https://joisti.com/gleam/files/_IK_AFdc/Splash%20screen.webp - Business card, front.webp: https://joisti.com/gleam/files/ij0MC1yq/Business%20card%2C%20front.webp - gleam-poster-mark.webp: https://joisti.com/gleam/files/X4_QOXe_/gleam-poster-mark.webp - gleam-wide-board.webp: https://joisti.com/gleam/files/6m9Z5TcX/gleam-wide-board.webp - Street-sign.webp: https://joisti.com/gleam/files/SDg1ORtk/Street-sign.webp - gleam-welcome-book.webp: https://joisti.com/gleam/files/PVZtMS2b/gleam-welcome-book.webp These pictures show the brand's style; rights stay with their owners, so check the brand's own license before reusing one. ### Social media The brand on social media. The profile picture is the sparkle in Pink on Plum, the same on every network; the banner is cut to each network's own size, and the files are in Resources, ready to upload. Profile bio: Gleam is an app for booking home cleaning, made for people who care about their homes. Pick a time, and a vetted cleaner arrives with everything needed; the home gleams by the time you're back. Clean, happy, residential — the shine is the point. ### App icon The sparkle in Paper on Plum is the app icon. It is what people see on their phone, in a browser tab and in the dock. ### Email signature One signature for everyone, drawn from the brand. Type your details into it, copy it, and paste it into Gmail, Outlook or Apple Mail. ## Illustration ### Overview Illustration explains what a photograph cannot: how booking works, what is included, why it is easy. Ours is flat and geometric, built from the sparkle's shapes and colored from the palette. ### Style A small set of illustrations that sets the style. New drawings should look like they belong to this family. - Clover.svg: https://joisti.com/gleam/files/-flLtkf5/Clover.svg - Trefoil.svg: https://joisti.com/gleam/files/zy9erEce/Trefoil.svg - Soft cross.svg: https://joisti.com/gleam/files/YyQtqGU1/Soft%20cross.svg - Rounded diamond.svg: https://joisti.com/gleam/files/28ud6Lq5/Rounded%20diamond.svg - Sparkle gem.svg: https://joisti.com/gleam/files/QJEALqHK/Sparkle%20gem.svg - Arch.svg: https://joisti.com/gleam/files/G9PiuCsh/Arch.svg - Leaf.svg: https://joisti.com/gleam/files/rKJlvhZe/Leaf.svg - Shimmer.svg: https://joisti.com/gleam/files/LoG_Wqd8/Shimmer.svg - Seal.svg: https://joisti.com/gleam/files/t39hvCKO/Seal.svg These pictures show the brand's style; rights stay with their owners, so check the brand's own license before reusing one. ### Patterns Patterns are built from the sparkle, its diamond core and the G, always at giant scale: three or four modules visible on a surface, never a wallpaper repeat. One pattern wears one of the brand's color combinations, like Butter on Toffee or Pink on Plum, and patterns never sit behind body text. - Pattern-Butter-on-Toffee.webp: https://joisti.com/gleam/files/MCTxd3pt/Pattern-Butter-on-Toffee.webp - Pattern-Ice-on-Blue.webp: https://joisti.com/gleam/files/7PPFIUCn/Pattern-Ice-on-Blue.webp - Pattern-Pink-on-Plum.webp: https://joisti.com/gleam/files/h1s0KzTM/Pattern-Pink-on-Plum.webp These pictures show the brand's style; rights stay with their owners, so check the brand's own license before reusing one. ## Iconography ### Overview Icons help people book without reading twice. Ours are flat and friendly, drawn on one grid from the same rounded shapes as our illustration. Each icon lives inside one color family and flips its rungs — a pale body with the deep for detail — so a screen full of them still reads as one brand. ### Icons Our icons are designed to sit beside the sparkle. They share its clean points and simple geometry, so a bucket, a calendar and a doorbell all feel like one family. ### Icon grid Every icon is drawn on the same grid with the same stroke. The keylines guide consistent proportions across different shapes. Icons are drawn on a 24px grid. ### Principles A few qualities run through the whole set. New icons should follow them so they sit comfortably next to the rest. - Simple shapes that read at a glance. - One stroke weight across the whole set. - Sharp points where the sparkle has them, soft corners everywhere else. ### Sizes Icons are drawn for a small set of sizes. Use these sizes rather than scaling freely, so strokes stay crisp and consistent. Sizes: 16px, 24px, 32px, 48px ## Language ### Overview How we write is part of the shine. Gleam sounds like a friend who has their life together: clear about what happens next, warm about your home, and never precious about cleaning. ### Voice - **Light.** Cleaning is a chore; reading about it should not be. We keep sentences short and the mood bright. - We are: Bright, Brief, Fresh, Easy - We are not: Jokey, Cute, Shouty, Flippant - **Sure.** People are letting us into their homes. We say exactly what will happen and stand behind it. - We are: Clear, Specific, Honest, Calm - We are not: Vague, Hedging, Pushy, Corporate - **Warm.** We write to one person about their home, not to a market about a service. It shows in the details we notice. - We are: Friendly, Personal, Respectful, Human - We are not: Overfamiliar, Gushing, Sentimental, Chatty ### In practice The voice is easiest to understand in real copy. Each line here shows one rule at work. - "Booked. Friday, 9 am. We bring everything." (Say what happens next: After someone acts, tell them exactly what is now true. No celebration needed.) - "Your cleaner is Maria. Background checked, 4 years of homes like yours." (Be specific about trust: Trust comes from details, not adjectives. Give the fact that earns it.) - "Come home to a made bed." (Sell the shine, not the scrub: Talk about the result people walk into, not the work that got it there.) - "We missed a spot? Tell us within 24 hours and we re-clean it free." (Calm when things break: When something goes wrong, drop the brightness. Say what happened and what we do about it.) ### Do and don’t The same rules, side by side, in the places our copy shows up most. - Headlines - Do: Come home to it done. - Don't: Revolutionizing the home care experience. - Buttons - Do: Book Friday - Don't: Get started - Empty states - Do: No cleans booked. Pick a day to begin. - Don't: Looks a little dusty in here. - Errors - Do: We could not book that time. Pick another. - Don't: Oops, something went wrong on our end. ### Writing tips A few habits keep the voice consistent, whoever is writing. - **Write like you speak** Read it out loud. If a sentence sounds stiff, rewrite it the way you would say it. - **Lead with the result** The made bed comes first. How we did it can follow. - **Cut what you can** People are busy; that is why they hired us. Shorter is kinder. - **Earn trust with facts** Vetted means background checked. Say the checkable thing, not the adjective. - **Respect the home** Never make fun of someone's mess. We clean it, we do not comment on it. ## Resources ### Overview Everything you need to work with the brand lives here, always up to date: logo files, color values, the typeface and templates. If something is missing, ask the brand team before improvising. ### Downloads - **Logo suite**: every logo file, in the kit's folders, as one zip — https://joisti.com/gleam/files/logos/gleam-logos.zip - **Color palette**: palette.css (custom properties) and palette.json (hex, CMYK) as one zip — https://joisti.com/gleam/files/colors/gleam-palette.zip - **Geist Serif**: its font file as one zip — https://joisti.com/gleam/files/type-t1mbLm/geist-serif.zip - **Geist**: get it on Google Fonts — https://fonts.google.com/specimen/Geist - **Icon set**: 36 SVG icons as one zip — https://joisti.com/gleam/files/icons/gleam-icons.zip - **Social kit**: the profile picture and the X and LinkedIn banners as PNG, as one zip — https://joisti.com/gleam/files/social/gleam-social.zip - **Brand file for AI**: this file — https://joisti.com/gleam/brand.md