FLAGGER.GG BRAND KIT ==================== Flagger.gg (flagger.gg): Feature flags for AI agents. Online version of this sheet, with every download: https://flagger.gg/brand/?utm_source=brand-kit&utm_medium=referral&utm_campaign=brand-kit WHICH FILE TO USE - Profile pictures and "brand logo" uploads (circle crops): avatars/avatar-dark-1024.png (smaller copies: avatar-dark-512.png, avatar-dark-256.png; on light: avatar-light-*.png) - The logo on its own, transparent background: marks/mark-transparent-for-dark-bg-1024.png or marks/mark-transparent-for-light-bg-1024.png - The logo with the name: lockups/flagger-horizontal-for-dark-bg.svg (.png), or the -for-light-bg and stacked versions - App or site icon: app-icon/app-icon-rounded.svg (square, unrounded: app-icon/app-icon.svg) - Link previews: social/og-1200x630.png. X / Twitter header: social/x-header-1500x500.png - Website icons: everything in favicon/ (drop-in for a site root) - Vector (any size, for designers): every .svg. Text in the lockups is already converted to outlines. THE MARK: A2, "A FLAG THAT'S A SWITCH" A flagpole whose flag is a toggle switch, switched on. A feature flag is exactly that: a switch you raise on a release, and Flagger.gg is where your agents flip them. The pole is neutral (Mist or Night), the switch is green because green means on. The knob is a cut-out, so it always shows the background behind it. COLORS The dark side is a neutral black, the same black as Sandboxer (#0B0B0C), with neutral grey panels and borders and no blue tint: the developer look shared by North Bay Ventures apps. Green is the only color. Name Hex RGB Use Night #0B0B0C 11,11,12 Background, ink on light Panel #141416 20,20,22 Cards, header, drawers: the first surface on Night Raised #1C1C1F 28,28,31 Menus, dialogs, inputs, hover: a surface on a Panel Border #2A2A2E 42,42,46 Hairlines and card edges on any dark surface Mist #E8EEF4 232,238,244 Text and the pole on dark Muted #A1A1A8 161,161,168 Secondary text on dark On #3DDC97 61,220,151 Brand color: the switch, links and buttons on dark <- use when a form asks for ONE color Off #2E2E33 46,46,51 Switched-off states, quiet fills. Decoration only, never text Warn #F5C451 245,196,81 "In development" and warnings Paper #F6F8FA 246,248,250 Light background Deep #17A067 23,160,103 The switch on light backgrounds Ink green #0E7C4E 14,124,78 Green text and links on light backgrounds Slate #5B5B63 91,91,99 The muted ".gg" of the wordmark on light backgrounds (Until 2026-10-30 Night was #0A0E13, Off #2A3442 and Muted #9AA6B2, all tinted blue. Replace them everywhere.) CONTRAST (WCAG 2.2; AA needs 4.5:1 for body text, 3:1 for large text and for graphics) on Night on Panel on Raised Mist 16.83 15.74 14.55 AAA text On 11.13 10.41 9.62 AAA text; Night on On (button labels) is 11.13 Warn 12.08 11.30 10.44 AAA text; Night on Warn is 12.08 Muted 7.66 7.17 6.62 AAA text on Night and Panel, AA on Raised Off 1.46 1.36 1.26 decoration only (off switches, quiet fills) Border 1.38 1.29 1.19 decoration only (hairlines) Night on Paper 18.48:1 AAA text Deep on white 3.35:1 passes 3:1 for graphics (the mark), not for body text Deep on Paper 3.15:1 passes 3:1 for graphics Ink green on white 5.23:1 AA text Ink green on Paper 4.92:1 AA text Slate on white 6.73:1 AA text (the wordmark's ".gg" on light) Slate on Paper 6.32:1 AA text On on Paper 1.66:1 fails: never put the bright green on light backgrounds; use Deep or Ink green (#1FB877, the first light-background green we tried, is 2.57:1 on white, under 3:1, so the kit uses Deep.) TYPE Inter (free, SIL Open Font License: https://rsms.me/inter/ or Google Fonts). The site loads Inter Regular (400) and Medium (500) and uses Medium for headings, buttons and the wordmark, with tight tracking (-0.02em for the wordmark, about -0.035em for big headlines). Code and flag keys use the system monospace stack. Write the name "Flagger.gg": capital F, the rest lowercase, ".gg" always attached (Jon, 2026-10-30: "flagger.gg is the name then"). Never FLAGGER, FLAGGER.GG or Flagger.GG. Lowercase only in the domain or a URL (flagger.gg) and in code: the CLI is `flagger`, the packages @flaggergg/node and flagger.gg/go. In the wordmark ".gg" is the same weight as "Flagger" and slightly muted (Muted on dark, Slate on light), so it reads as the name with its domain. In running text write plain "Flagger.gg" in one colour. CLEAR SPACE Mark: keep empty space on every side at least the height of the switch (about half the mark's height). Lockups: keep at least the height of the capital F on every side. MINIMUM SIZE Mark: 16 px tall on screen, 6 mm in print. Below 24 px use the pixel-tuned icons (app-icon/icon-16.svg, icon-32.svg, favicon/), which have a heavier pole, a flag flush on the pole and a square knob at 16 px. Horizontal lockup: 24 px tall (100 px wide). Stacked lockup: 64 px tall. DO - Use the dark versions on Night or other dark backgrounds, the light versions on white or Paper. - Use the one-color marks (marks/mark-one-color-*.svg) for single-color printing, embossing or busy photos. - Keep the switch on (knob on the right) and green. - Scale proportionally, from the SVGs. DON'T - Recolor the switch (no red, Warn or brand colors of partners), or put the bright On green on light backgrounds. - Flip the switch to off, move the knob, or fill the knob in a different color than the background. - Stretch, skew, rotate, outline, add shadows or gradients, or put the mark on the tile on a light page in place of the bare light mark. - Retype "Flagger.gg" in another font next to the mark, or drop the ".gg" from the lockup; use the lockup files. - Recolor ".gg" green, or make it a different weight or size from "Flagger". - Put the mark on busy photos without the one-color version. FILES README.txt this sheet marks/mark-for-dark-bg.svg the bare mark, Mist + On marks/mark-for-light-bg.svg the bare mark, Night + Deep marks/mark-one-color-night.svg one color, Night marks/mark-one-color-white.svg one color, white marks/mark-transparent-for-dark-bg-1024.png 1024 x 1024, transparent marks/mark-transparent-for-light-bg-1024.png 1024 x 1024, transparent app-icon/app-icon.svg the mark on the Night tile, square (for platforms that round it) app-icon/app-icon-rounded.svg the mark on the Night tile, rounded corners app-icon/app-icon-rounded-1024.png 1024 x 1024 app-icon/icon-16.svg, icon-32.svg pixel-tuned small icons lockups/flagger-horizontal-for-dark-bg.svg / .png mark + "Flagger.gg", side by side (PNG transparent, 2x) lockups/flagger-horizontal-for-light-bg.svg / .png lockups/flagger-stacked-for-dark-bg.svg / .png mark over "Flagger.gg" lockups/flagger-stacked-for-light-bg.svg / .png avatars/avatar-dark-256/512/1024.png Night background avatars/avatar-light-256/512/1024.png Paper background social/og-1200x630.png link preview card social/x-header-1500x500.png X / Twitter header (content kept clear of the profile photo) favicon/favicon.svg, favicon.ico (16 + 32), favicon-16x16.png, favicon-32x32.png, favicon/apple-touch-icon.png (180, square: iOS rounds it), icon-192.png, icon-512.png COMPANY Flagger.gg, by North Bay Opco I, Inc. (a Delaware corporation), 777 Brickell Ave, Suite 500 PMB 1074, Miami, FL 33131. A North Bay Ventures company. REGENERATE The kit is generated by brand/build.mjs in the Flagger.gg repo (NBV-AppFactory/flagger): npm install && node build.mjs