Examples

See the shape of the output before you run your own brand.

Generate yours

B2B AI product design

Northforge Studio

Open preview

AI-generated strategy

Northforge Studio

Northforge Studio feels like a design partner for technical founders who want bold clarity without visual noise.

Audience promise

A brand system that signals strategic rigor from the first screen.

Differentiator

Positions the company between boutique design craft and operator-level product execution.

Shareable preview

Anyone with this link can review the kit. Free previews stay watermarked until purchase.

https://brandkit-express.vercel.app/preview/H4sIAAAAAAAAA41YXW8buxH9KwP2pcVdy5Ls2I6eruzEiVEn16icumiRh9HuaJcVl9yQs5KV1P-9GHIlrRIZuE8WTGrOfJ451A9VkiWPTMWU1USNh-OLk-HZyfDycXgxGQ4nw-FgOBz-W2UqmLZUE2Wd52rhfEkngdtCO5Wpude0UJMfat4GbSmEz1iTmqjPu7sw297VtmgD-42aqOvxNUzvoPGuaHOGgoIurcoU1aiNmqiCavf73KMtlprpufEUwiB3tcoUFv-lnPWKgpr8R4UKfaMylTu70AVZVpmqtdU1GvU1U4y-JJ62hSabi1-3rrUF-QCh0k2jbQnaMnmLBtg5EwBtAY2nWrc1zBBnWx9DBKkbYs3Of_FG4L--SAbQFrO2rjFG9kvgsCAyAYxeEmAXKTTo2ZKHhfPAlFdW52hgsXVuXTlYo2WYO1NAbtBr3sBac-VahpUOLRqwTgcaSEa68B68q3WQKKcQvYKwCUw1cIUMgosmQGCpealz8Lp0HhbeyQ2ChfaBIeSeyIrZQi8W5MmyRnZeTdSDC5q1syFel2Sg3cCceE1kYe5a1t9a2oaYe1xwTKdrpM2cPzG0IrMrOj1T3oq9CBa_9E57qa2zaqLeF5JojQa6eupQxxQA1XPygHlOllPBSh8zV4Cllj2aMDio1p0Nuqw4VixTDRpiJmnaxutUth_Kpr69jZV7LwgqUxU9q4n6y835m7PxVGXKLU1eqUn6-9fh4GIEw8HoCs7O_qYy1QYsxcZDsgqYp2yJhxV5B5UuK5M8eclUoNzZ4hB-xkQG7rUlu4d_9_bm5vrmCPzVJQwHwzO4fHMAj5ZMyCBHX4QsogdqMJYgAqfM9VFja8AHZ4oe6pvp6PzyCOrlhQQ9hstxH_Uai5JSrFQ3FQadgmz9AnPqgT1gQx7-SdrssW6vbs_fvz-C9TZGOPopwhv0BXSWI8oc82XqgR7QE_oanirN1AO6uZ3eXhwDenscyK4wQM_8S6YWztMvYB88NodQo9vx-dnwCNR4nKo2fnOA9ZGwMEKhMYdzV2yA6ZnVS4S0_IDa3xVqomg7GCpTvGlcKdCbf6A0G5rYxB5bm4ulogg7NsOWK5eIpNKG4BNa7xqCJVGTRrqji9xZprpxPjZx5MM4sSeesNgMEix91OTR59VGaPjjCC7OTy-uVKY-juF8fHoeP57B-Or07Fxl6lriGV2dxozc45wMjM5PR1eRpCuq6dEtyYa4SXrFfKU-_RK8lldp_4NOetO3IKe3f8JK4xq3Ir-7MIIhDHsHf8rGlmVe4Y3u_Kipt1cHbvc4Y88CV30W2N047tn5gWd1y3SAFo_Hnal4etTM-dWBmS2hvEIR6fioodGhobnzRS_Zw8Hbvj_aNi2_2hNe2_KVFL9kyrjS7baLLIKfGP_J-aJGv1SZMrhxEUem5buznCbNE3KdwtyvpsZTroMsrEzp3Nm7glBNVOl1AaFJ9rYD_kTzoJmgxsAVYdFbDGHr10vWWwVRPcwY8wOvgvyDip9c-oDGkN-kLc-tp0OHonSDwOh7Ds1cLjHgChl98sYIcVRpdfSd-XwLn5wVqqn7vgjCT4780S17mMtCOPQiSoYgEgTrpufILa7kVnIBmwakEkG9fM3UyumcHp1NGemUSwb0jDmn3fat1cRmA1jPRZ20cfenr3nUcemraQitjzn7EmjRSj1v2ih9hX8KFy_dExZJYLiWc1dTSPch9zo0O9li0JYtxtD-TtSIOtN12EsQbeWqWyTLNjkwk0NYeLSsc5WpP1bk20Awb79_XztJdqaevHRHFOU6ByzJ5hvIXbMRSzWFgKW25YM2Bn00-i4JLdGQW4kldm46uSj0BM5LBaMsvo-1TSTeUX1IGrmMeyf6KXKafJKPIZoO5CWrMG-1EXGqMnUnQlsgOitd1raVf_dZtNJTRZ52WUtasybisNWvJP3xNVMhtuG1TlWY3p0kIdpXsOEwyAHcu9KJxHHG-Qz2WzC1xCNqs9a2gLhZgpTEWYLQeG1Z2uOhW4l6G8hSc8L4VYJ36juD0BAVCUDXjSFJa1y6XUo73ctxkQ32kT1S3RhkSqzDmuOOTtWAd97JJFTOLWXMaL3zaQAzrAniAwcapy2DW8BK0zqKW2w6nTy11sm2jxvcU0pbLAhC7l3TUAHrjt2ybXxgHVOKhStP1HsVHMr-OE27eZ81RvNJeiKAUCp4WhGaTpfvaPFb65hgblykrpxl-GeUXFy0xki-I71ss_GQNDnM2PnNPh_TVOGtMJEWZGDXvWVg--jLafc22j2K9gmaVW4dkTvhD2GNnFfUtW0b6CRHGfP0jY6FYE6iMk5xweThyx0ElKIfpkM_nyRjEBk_2gvtnA1F7dZ66mvHbSaEU7jSIbXnQR5uxJGZxSZUjvd5uD6YhVC51hSpH3cDxoR1gLY5jP2x9TbGXra6oCQvtWUHKBNxEowuCHKjyXJiLcAQiOMo3Gu7pOLOxnz86yDwT8TCUbIm4LedC6kvxHP4DTpWkcbSzS70a-eWgN0kRoKPL_7ZbmtNfigprlss5LZQTnwDm00me0ayJI-j_UM-g2O_NIiCxZy7q_vfLQbpdwv4H1RkjPv9lxP18vJ_CrvFYhgRAAA

Page 3: Brand kit preview

Forge Wordmark

Website mastheads and hero sections

Layout: horizontal

Treatment: Editorial precision

Icon idea: grid spark

Studio Stack

Social avatars and launch cards

Layout: stacked

Treatment: Gallery signature

Icon idea: north star

NF Monogram

Favicons and app marks

Layout: icon

Treatment: Operator badge

Icon idea: compass stamp

Color palette

Forge Ember

Primary actions and hero highlights

#C4532A

rgb(196, 83, 42)

hsl(16 65% 47%)

oklch(0.61 0.18 33)

Steel Linen

Panels, cards, and separators

#D9CCBC

rgb(217, 204, 188)

hsl(33 28% 79%)

oklch(0.87 0.03 75)

Signal Gold

Badges and emphasis

#D5A147

rgb(213, 161, 71)

hsl(38 63% 56%)

oklch(0.76 0.12 72)

Paper Veil

Card surfaces

#F8F4EE

rgb(248, 244, 238)

hsl(36 42% 95%)

oklch(0.97 0.01 75)

Warm White

Canvas background

#FCFAF6

rgb(252, 250, 246)

hsl(40 50% 98%)

oklch(0.99 0.01 75)

Graphite

Headlines and body text

#1F2430

rgb(31, 36, 48)

hsl(222 22% 15%)

oklch(0.22 0.03 255)

Typography pairing

Heading font

Fraunces

Body font

Manrope makes the system usable in UI, docs, and sales assets.

Fraunces adds premium authority while Manrope keeps the system contemporary and product-ready.

H1 64/68H2 42/48H3 28/34Body 18/30Label 14/18

Tailwind `@theme` block

@theme {
  --color-background: oklch(0.99 0.01 75);
  --color-foreground: oklch(0.22 0.03 255);
  --color-card: oklch(0.975 0.01 75);
  --color-card-foreground: oklch(0.22 0.03 255);
  --color-popover: oklch(1 0 0);
  --color-popover-foreground: oklch(0.22 0.03 255);
  --color-primary: oklch(0.61 0.18 33);
  --color-primary-foreground: oklch(0.985 0.01 75);
  --color-secondary: oklch(0.88 0.03 75);
  --color-secondary-foreground: oklch(0.24 0.03 255);
  --color-accent: oklch(0.76 0.12 72);
  --color-accent-foreground: oklch(0.18 0.03 255);
  --color-muted: oklch(0.94 0.02 75);
  --color-muted-foreground: oklch(0.48 0.03 255);
  --color-border: oklch(0.9 0.02 75);
  --color-input: oklch(0.99 0.01 75);
  --color-ring: oklch(0.61 0.18 33);
}

shadcn theme tokens

:root {
  --background: oklch(0.99 0.01 75);
  --foreground: oklch(0.22 0.03 255);
  --card: oklch(0.975 0.01 75);
  --card-foreground: oklch(0.22 0.03 255);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.22 0.03 255);
  --primary: oklch(0.61 0.18 33);
  --primary-foreground: oklch(0.985 0.01 75);
  --secondary: oklch(0.88 0.03 75);
  --secondary-foreground: oklch(0.24 0.03 255);
  --muted: oklch(0.94 0.02 75);
  --muted-foreground: oklch(0.48 0.03 255);
  --accent: oklch(0.76 0.12 72);
  --accent-foreground: oklch(0.18 0.03 255);
  --border: oklch(0.9 0.02 75);
  --input: oklch(0.99 0.01 75);
  --ring: oklch(0.61 0.18 33);
}

{
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "cssVariables": true,
    "baseColor": "neutral"
  },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

Brand voice

Strategic, exact, and quietly ambitious.

AssuredUsefulCurated

• Lead with outcomes
• Use crisp product language
• Keep claims grounded in proof

Do not

• Sound frantic
• Overuse buzzwords
• Write generic agency copy

Taglines and social bios

Taglines

Sharper brands for serious builders
Identity systems with operator DNA
Where product rigor meets visual edge

Bio options

AI-first brand systems for operators. Logos, color, typography, and Tailwind themes in one sprint.
Premium identity kits for founders who want clarity, speed, and implementation-ready design tokens.

Template concept

Launch Drop

New identity. Same sharp point of view.

Announce the rebrand with a cropped wordmark, founder note, and three strategic differentiators.

Layout

Split-screen logo reveal with editorial quote block

See the full kit

Template concept

Palette Story

A color system built to signal confidence without noise.

Show the palette swatches with use-case captions and a before/after UI sample.

Layout

Six-swatch grid with subtle texture background

Use this theme

Template concept

Case Snapshot

Brand systems should speed product teams up.

Turn the guidelines into a one-slide client proof asset for LinkedIn and X.

Layout

Metric card + product screenshot + tagline strip

Book a sprint

Fractional CFO and finance operations

Harborwell Advisory

Open preview

AI-generated strategy

Harborwell Advisory

Harborwell Advisory feels steady, mature, and digitally fluent without falling into bank-brand cliches.

Audience promise

Financial clarity that makes founders feel in control instead of behind.

Differentiator

Combines boardroom trust with startup responsiveness.

Shareable preview

Anyone with this link can review the kit. Free previews stay watermarked until purchase.

https://brandkit-express.vercel.app/preview/H4sIAAAAAAAAA41Y224juRH9lQLzkgBtWRePxqOn9SVaG1jvOCMvFkgwD6Xu6m6u2GSjyJasnfjfgyJ1aTkykqcZTFNVp4qnTh3OD1WRJcZAxU1QMzUejqcXw8nF8PPLcDobDWfD4WA4HP5TZcqbrlIzVSMvHW_ImAss1to73qpMLVlTqWY_1LLz2pL3v2JDaqYeDqfh5nha26LzgbdqpuaMedDOooG7-VdAW0CpLdqcwLUCTDvrVaaoQW3UTBXUuJ-WjLZY6UCvLZP3g9w1KlNY_EF50GvyavYvFbjzYeM41JIxRyNHGlcQW_U9UwG5onDTFZpsLkjnrrMF8YWhAjzxWucEpebGR0wLxMUOkGMPSwobIgueqIjfPbEmDzeSyjUtBR0c_8ZGoHx_k_6gLRZd02Cs-kxboCQyHnwgLLYZNBg6piwGL3SlAxqzhdJ0ZANsdKhdF6BEY7StQNvgYIl2dRHzQG50XpMfSFN2FT6za7SPhcb2ajSQG2QdthBqDNDgijyUqQs-ogFtIXc2sJO_RmTgSlhSrW0hwQtdlsRkg5a2qJm6c81Srh-WDrlg5xqI9xARgw_IoWuBybfOer0mYUoMRF5X9l4zRTKomVq4MqTk6EMmPwmM2lIBpnvteJs600gBuiHIO_LQebm7FlnbymwHJ3fxaL2u6hDvI1MtGgqBhLAt63QpP5TtcxZ-xbUwp6ZXNVN_Gc0nnz5dq0y5lclrNUt__nU4mFzBcDD8DONPk7-pTHUeKwly24XgrM_A4jphxS7ULva7cQ3Z4NVbpjzlzhan-RfBWYIn7cMx_f31_f399Ez6L5J9BKOrT_3sL7g0lJjrOy4xp5gN85xs6KW6ZfQeFrqyaI7Jbr9cT6-uziSbfobhYATTk0rv0BgPwUEa5FRrTJQqTPl7Se_QrtEf082n88_zybnars8Wd4dcxNBLzFcVC2P73UMT4PdaB-pluJnfzs9d3pfz7XvGiqAX_S1TpWP6r1y_UFERw6Nd9YhyPZ5MRmdyjSXVBMZX1yc8ccUWAr0G9Raz2PCMmh8LNVM5YxmoUJkK29ZVjG29_YZJLGMfHDeO0Qb4GRkbZwtYCvU9VIxrHdDDptaG4PH2CZ4NvcICrYcVUesh1AQrHaCN-pujgdIxFOjrOLqJO8_38zieYdvSgyZGzuutiOvDCKbjy6m09GEMV8PLK-HmwwTG08vJWGWprNH15ViO3GEbmTGaXI6uo_jW1NCLW5H1cWf07vGjq-n3_4OW5sjFx-yRr_P_HaR1rVsTH76PYAjD3of_J8ReUT7SiN2Bs6Held3Thw9G_nDiPLKrE2hNJ4Tqhbo6iRU_n41zNZWD432cvZCcV4b09Wyc0fQEz9Jx0Wv2cHB9Wpy2bRc-7o6w_aM2v2XKuModdooo_zuJj_s3ip_sWpUpg1sX84lQ_-lsiKoYmDA0qd6n_cKJa00Q5s4-FoRqppaEubNgtKXegN9TvkrT1LJrnUcj2nVA8uSsjHYDC4rJDhB8wHyVpr-X_1aGE1r5JCubV6cQZN-JovsUbI_hG7WOQ0Kh7drptA8OIA4e5BaL6qQREvsdhPvkRoCapaHmNH8yh2Bk1fby37QtyKm0kJyYD_X2PVMRyYuzuzXSZAf7c_SBOhqflinXnkSM0o8YdVzm6onQdxwbdWcIWWXqG6H3XSTH90wVLp57YbTeYCCQJhl61UHW-2-eQNvScUOF-I1SF9EQZmqOa8fgW8p1qXMwaKtO9oKoANTbllJwm2AshOgQmGwhYb-uiTc1mSY5nz-Qq9hISVcS8kVNuN5CydjsYDbkPVbaVs_aGOQY9G5n0ESaD-ZTZWoRuwRVpwtMYBdbH6jxycr5XBZENLmVsDHGmu9c9d70RVw7uyeEoijUpjk4PklasduIwYy8spp8lHbk4oIjAts1S2I_gK87dLt_3yMbCIp04bc63cM7w78_GdMd3OemdmDFW-_QZpBjvJfEjNwQ2iM_wKfqBwd0htZkegfW2uulNvu6xTtjUUhlCGVnzEWcaXqlXEYn9GC_UNMKa5J8BB3MbmpDbbbw3BkffYZzKzVTv0v3DWGswdeuMwWsrNvAkmR_xaXbyE8hN84ng56n5SjOpcZ4hokObyAfrVnPl-doxWiBs2DdZtCf1XsMCD6wbtPlypsHlqajowfMVB5kTn-mEMHkNeUrI05T1GBf3e4pBE_UuGNxd-hrKI3b9MYkWXqf8olrlZvhHS1OqxNbAwhevDlBQ4F1nn6H0BrU9uLvtjLa10CvrUEbjc5Jff_oXKD4PsuRXefJ7J4VXSvyFnlaI4dDlbfOreDwSO1XeGe0vKMWFltfu3Ascs6uASaM70hg2gcO7jCAeyq-vzy3iS0NojOiJ7EAKCWgzPYWfCvD4WuikPzyjscH0wVcb0PdnBR9G5lzKU5QxtTui15G517rqt6Lbap5QYlmoiy0cbyKQhtfz8dNN_uhhFiuLIW0kSu7OROtlx79oqMoP6GNmrR_pWZw_kEvmoF52P3q-F8E--bLCx3-DTUZ4346_1m9vf0H4Hx7d40QAAA

Page 3: Brand kit preview

Harborwell Signature

Decks and proposals

Layout: horizontal

Treatment: Maritime trust

Icon idea: beacon line

Monogram Seal

Reports and invoices

Layout: stacked

Treatment: Board packet mark

Icon idea: compass seal

Advisory Badge

App icon and social

Layout: icon

Treatment: Digital emblem

Icon idea: harbor light

Color palette

Harbor Navy

Buttons, nav, and authority moments

#1F3558

rgb(31, 53, 88)

hsl(217 48% 23%)

oklch(0.34 0.07 253)

Stone Mist

Tables and surfaces

#D8DDD6

rgb(216, 221, 214)

hsl(103 9% 85%)

oklch(0.9 0.01 145)

Brass Signal

Calls to action and accents

#B98644

rgb(185, 134, 68)

hsl(34 46% 50%)

oklch(0.67 0.1 63)

Canvas

Cards

#F6F7F3

rgb(246, 247, 243)

hsl(75 20% 96%)

oklch(0.98 0.01 145)

Salt White

Page background

#FAFBF8

rgb(250, 251, 248)

hsl(80 27% 98%)

oklch(0.99 0.01 145)

Ledger Ink

Body text

#182331

rgb(24, 35, 49)

hsl(214 34% 14%)

oklch(0.2 0.03 248)

Typography pairing

Heading font

Cormorant Garamond

Body font

IBM Plex Sans makes the system usable in UI, docs, and sales assets.

Cormorant Garamond brings gravitas while IBM Plex Sans keeps the kit practical for dashboards and PDFs.

H1 62/68H2 40/46H3 26/32Body 18/28Caption 13/18

Tailwind `@theme` block

@theme {
  --color-background: oklch(0.99 0.01 145);
  --color-foreground: oklch(0.2 0.03 248);
  --color-card: oklch(0.98 0.01 145);
  --color-card-foreground: oklch(0.2 0.03 248);
  --color-popover: oklch(1 0 0);
  --color-popover-foreground: oklch(0.2 0.03 248);
  --color-primary: oklch(0.34 0.07 253);
  --color-primary-foreground: oklch(0.99 0.01 145);
  --color-secondary: oklch(0.9 0.01 145);
  --color-secondary-foreground: oklch(0.24 0.03 248);
  --color-accent: oklch(0.67 0.1 63);
  --color-accent-foreground: oklch(0.16 0.03 248);
  --color-muted: oklch(0.94 0.01 145);
  --color-muted-foreground: oklch(0.46 0.02 248);
  --color-border: oklch(0.89 0.01 145);
  --color-input: oklch(0.99 0.01 145);
  --color-ring: oklch(0.34 0.07 253);
}

shadcn theme tokens

:root {
  --background: oklch(0.99 0.01 145);
  --foreground: oklch(0.2 0.03 248);
  --card: oklch(0.98 0.01 145);
  --card-foreground: oklch(0.2 0.03 248);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0.03 248);
  --primary: oklch(0.34 0.07 253);
  --primary-foreground: oklch(0.99 0.01 145);
  --secondary: oklch(0.9 0.01 145);
  --secondary-foreground: oklch(0.24 0.03 248);
  --muted: oklch(0.94 0.01 145);
  --muted-foreground: oklch(0.46 0.02 248);
  --accent: oklch(0.67 0.1 63);
  --accent-foreground: oklch(0.16 0.03 248);
  --border: oklch(0.89 0.01 145);
  --input: oklch(0.99 0.01 145);
  --ring: oklch(0.34 0.07 253);
}

{
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "cssVariables": true,
    "baseColor": "neutral"
  },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

Brand voice

Calm, steady, and financially precise.

MeasuredClearReassuring

• Translate complexity
• Use informed confidence
• Favor specific language over hype

Do not

• Sound trendy
• Overwhelm with jargon
• Use fear-heavy framing

Taglines and social bios

Taglines

Finance clarity with founder pace
Calm control for growing companies
Board-ready numbers. Operator-ready guidance.

Bio options

Fractional CFO guidance for founders who need clarity, cadence, and clean financial systems.
Board-level financial visibility without adding a full-time exec seat.

Template concept

Monthly Pulse

What leaders should know before the month closes.

Share three finance signals founders can act on now.

Layout

Data strip with calm blue surfaces

Get the checklist

Template concept

Founder Memo

Cash flow confidence starts with one clear number.

Pair a single metric with a plain-English explanation.

Layout

Quote-led carousel with supporting chart

Book advisory

Template concept

Client Snapshot

From reactive reporting to operator cadence.

Show the transformation from messy spreadsheets to a clean dashboard rhythm.

Layout

Before/after panel with brass highlight

See the framework

Field service automation software

Voltloop

Open preview

AI-generated strategy

Voltloop

Voltloop feels kinetic, product-led, and operationally sharp, built for teams that want movement and control.

Audience promise

A brand that looks as fast as the workflows it automates.

Differentiator

Pairs aggressive energy with systems-grade credibility.

Shareable preview

Anyone with this link can review the kit. Free previews stay watermarked until purchase.

https://brandkit-express.vercel.app/preview/H4sIAAAAAAAAA41XXW_bOhL9KwPuyy6gOLabpImfbj6utwXabXCTNrh30QeaGkuzpjhakrKv281_Xwwp23KbAPfJBiXNmc8zh99VhQ69jlheRzVT0_H04mT85mT89nF8MZuOZ-PxaDwe_6EKFWxXqZlas42WuVWFWnjCpZp9V4sukMMQ_qUbVDP15fAKubIL0W_VTM0JbQkB_ZoMgu4iNzoSOwi8jBvtURUKG01WzVSJDf-y8NqVK4r4Z-sxhJHhRhVKl_9BE2mNQc3-rRZsS1WopQ5RFSqiqR0ZbdXXQkXtK4zXXUnojLj1qZVAiV0Ai7pEH6DhEr2jb-QqaDob6cSy6b3qHY2om6AKZbhpMVJk_9lbwf76LBnQrnzomkanEHeBwxLRBliRw0imgNZz2Zl4YrEsQLsSeOeKtnYLoda-LWDRkY2wZJ8xIdY6wka7CA2vsUEX07eGXfRsR5KLPrh7zw0FifEakkv5W8u8CqADSHrkN9YIG_arpeVNAIq7KmAQayUtl-jRRdKRvZqpe00-gK4qST-tEaRVqi1sKNYQtiFiE04qr0sE47GkBVmK22QKA1XujryUip2aqXdU1SfSO7rCHIL4lC1Fz66CCrnB6LcpyNSV3AVwWGmpNoRWGxwdFeK9C1TVMRWjUK22GCNKP7aeckW-K5db8oEqpy3c2E7arMY_1Uz9bXp2fjufq0LxyppazfLv38ej87cwHk2nML04-4cqVBd0JUbus1nQJneROGrJrYJ6LlRAw648Rr0lbzqKMOfqgHp3--t0fv4C6tUUxqPxG5henA9RH3aGodVO2kpgvSabYLUx6OIA89ob-EDNIMzrs_nl-c0LgJdXMB5NLmEyvRoCSqlsSmyCCjl1C11WmCPt_FIbHGY36kgGnmqKA9z52_nVi-m9upRAJz-m91b7MkPqtgVTe25Q8BbarCrPnSsHkPfaInzJ_TSAvJ3fvQx5dS6Y47OfQd1aBxhgPBdqyR5_QrxeRvSV5Q28d6sD5GQ8eTu9fgFycrkr5xHgDZdbMNxu1XNCclHG7H2pZqrnCyGybcuV1229_a2niZRmGQH4p-eIYZUSdfcRHrQLsEJs03RTKfMbt2nkCyipoqhtJp0SDckY2-2QkEYZDt8Reu1NvRVafTeBi7PTt2NVqHdTOJuenl3K3zfwZnz65kIVOYrJ5elUzj9i1DA5O51cJt6tscFHXqELaTcMqvd6OYYZfy2DRvvy9S6Sp_O_YKXlltfo9y9MYAzjwYO_ZGPHL68xRv_Ci7Z-in3AHK9xwf6VFy1Op0feNV3EI8CEN93ZSo9ftHN2cWRnRy2v8UV-_nK-ji0t2JeDlI9HV0cekWu7eJSho8p6ctVrqX4ulOWK95tGdsF-Yj_IKn5iXzbay8RaveUEVLOnb-yittL8HnVscqQPaanBGi0bilvxzbB7X6JWM9V2NiBEod4hW3KDrSw1GbF-rqBO-kI9F3tfeqqCh6jNkS9BDrD8wZFH1A34pA565weOpDVM37CEXmUdyKxpNVUOEneQ6Qm8Jh_DkTMfIC_EoSMC8IMX120L_fEA3vRbbdH5pLp26B95QTbnYanX6bvnr4VaMxl8ZCevzBMr5Q2OLg7FEPuTJfkQhY_yJ15T2u3qricuoSCREVmGqELde1nFvd4rOb38AXXZ64oWU14_h6Q4jMeIB-UVwGpXdXl9PNS8gQUKC51q4XmgpvW96grZusvOPHmKCGtddQjkHK-zXEyMXqhPa_QSniWjI8ISdew8ht6LYBHbLaCL6FtP0k2Sl6-FajAEXZGr7sla7RPSl74LUzTcRTC1ZjH16aAed2pQWDhpWVgmmZ1Va1LBlRVtLgY_suioXtdyG0BHWHbWwnq_R68PsvwgRMlBw0nHFepmL1IHGvYwMF8LFdiQtjeUy_Gq6s8mwlDrOsQyV62ANYVeTxY_ql5popOG1yLad3eHZK4ZZmAH2Uv90cG1R2xaK6I3cUWkaPPtIMATSYg180rN1B2FVkdTQ6QGoeSNG8Ft9gK6NilR3fbq9rHzDjSYLkRu0MOGHJCLLGeeQnvcWyJzyUDLudv3E_gxnctSBtlmuYt7UQAl6Upyne4iUSdhiCB9SzGJ-jzhu3CeepkPv-Ea06D3Yc09N9Bo12kLIaJUgIEdgrGoXWKU49jSbIi2YJsIzmAIhRw48Ml2euhw018JpF1i7RFh6XWTrxb7EB8i--2CJTqjReCjzWEuvChOyDtFrgTU4iHUp1yIGkFuhkeBJqb81emFTcN6CPR37vxgGiDU3NkyXc0g1pRvRceh7pVvhtJkt_v70hEjgJfEJVPUNFiSjmi3R5Hes5dVEeG_HUccFHS3Iz6_B3IB4z7IG-YVaNhou4q1566qE3-mO3Gia6ESkVSiyHm5zMJ7exjPQuhb0vKB3D41g8u4zJA2sX-6u8iPiOF_UKO1_MvgTD0__x9EVaxOHRAAAA

Page 3: Brand kit preview

Loop Wordmark

Homepage and product header

Layout: horizontal

Treatment: System velocity

Icon idea: pulse trail

Voltage Stack

Campaign graphics and shirts

Layout: stacked

Treatment: Team rally mark

Icon idea: energized loop

VL Signal

Mobile and favicon

Layout: icon

Treatment: App icon

Icon idea: circuit burst

Color palette

Signal Blue

Primary actions and links

#245CFF

rgb(36, 92, 255)

hsl(225 100% 57%)

oklch(0.57 0.22 264)

Circuit Fog

Secondary panels and rails

#DCE2F5

rgb(220, 226, 245)

hsl(226 56% 91%)

oklch(0.92 0.03 265)

Arc Lime

Highlights and signal badges

#A4F85B

rgb(164, 248, 91)

hsl(92 92% 66%)

oklch(0.89 0.18 129)

Static White

Cards and app chrome

#F7F9FF

rgb(247, 249, 255)

hsl(225 100% 98%)

oklch(0.98 0.01 264)

Pale Voltage

Canvas background

#FCFDFF

rgb(252, 253, 255)

hsl(220 100% 99%)

oklch(0.995 0.004 264)

Afterglow Ink

Body copy

#10172A

rgb(16, 23, 42)

hsl(224 45% 11%)

oklch(0.18 0.03 264)

Typography pairing

Heading font

Space Grotesk

Body font

DM Sans makes the system usable in UI, docs, and sales assets.

Space Grotesk and DM Sans keep the identity fast, digital, and decisively product-led.

H1 64/70H2 42/48H3 30/36Body 18/28Meta 14/18

Tailwind `@theme` block

@theme {
  --color-background: oklch(0.995 0.004 264);
  --color-foreground: oklch(0.18 0.03 264);
  --color-card: oklch(0.98 0.01 264);
  --color-card-foreground: oklch(0.18 0.03 264);
  --color-popover: oklch(1 0 0);
  --color-popover-foreground: oklch(0.18 0.03 264);
  --color-primary: oklch(0.57 0.22 264);
  --color-primary-foreground: oklch(0.995 0.004 264);
  --color-secondary: oklch(0.92 0.03 265);
  --color-secondary-foreground: oklch(0.22 0.03 264);
  --color-accent: oklch(0.89 0.18 129);
  --color-accent-foreground: oklch(0.16 0.03 264);
  --color-muted: oklch(0.95 0.02 265);
  --color-muted-foreground: oklch(0.46 0.03 264);
  --color-border: oklch(0.9 0.02 265);
  --color-input: oklch(0.99 0.01 264);
  --color-ring: oklch(0.57 0.22 264);
}

shadcn theme tokens

:root {
  --background: oklch(0.995 0.004 264);
  --foreground: oklch(0.18 0.03 264);
  --card: oklch(0.98 0.01 264);
  --card-foreground: oklch(0.18 0.03 264);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.03 264);
  --primary: oklch(0.57 0.22 264);
  --primary-foreground: oklch(0.995 0.004 264);
  --secondary: oklch(0.92 0.03 265);
  --secondary-foreground: oklch(0.22 0.03 264);
  --muted: oklch(0.95 0.02 265);
  --muted-foreground: oklch(0.46 0.03 264);
  --accent: oklch(0.89 0.18 129);
  --accent-foreground: oklch(0.16 0.03 264);
  --border: oklch(0.9 0.02 265);
  --input: oklch(0.99 0.01 264);
  --ring: oklch(0.57 0.22 264);
}

{
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "cssVariables": true,
    "baseColor": "neutral"
  },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

Brand voice

Fast, competent, and operator-first.

DecisiveHigh-energyPractical

• Lead with speed
• Use concrete operations language
• Show before/after improvements

Do not

• Write vague innovation copy
• Overcomplicate features
• Use sleepy enterprise tone

Taglines and social bios

Taglines

Move service ops at full voltage
Automation for teams in motion
Built for operational velocity

Bio options

Field service automation for ops teams that need speed, visibility, and control.
Fast-moving software for modern field service leaders.

Template concept

Ops Win

Dispatch time down. Control up.

Turn a customer win into a crisp before/after metric post.

Layout

Metric-led card with kinetic diagonals

See how it works

Template concept

Workflow Reveal

From manual steps to one clean loop.

Show the old process, then reveal the new system in three frames.

Layout

Storyboard carousel with bright accent stripes

Watch the demo

Template concept

Team Enablement

Your field team should feel this fast.

Highlight the daily workflow improvements reps feel immediately.

Layout

Portrait quote card with product UI inset

Book a walkthrough