RETAILER APPLY / WORKING BRAND GUIDE

A clear identity for business connections.

The core identity is selected. This guide brings those decisions together and shows proposed usage rules for the next stage of design.

Brand direction · v0.1
Editable working guide
APPROVED · ICONB3 · Rounder frameExact selected SVG geometry
APPROVED · WORDMARKPlus Jakarta Sans600 · −0.045em tracking · 7 px gap
APPROVED · PALETTEB · Navy / cool neutralOriginal palette tokens retained
APPROVED · UI ICONSLucideOutline product icons; custom B3 logo
Loading Plus Jakarta Sans…

02 · Approved palette B

Navy and cool neutrals. These are the exact selected color values and roles from the comparison board.

Brand / primary action#284775
Canvas#F4F6FA
Primary text#1E293B
Secondary text#526177
Accent surface#E6ECF6
Field border#8998AD
Card / on action#FFFFFF
Calculated contrast for the selected palette
PairForeground / backgroundRatio
Body / canvas#1E293B / #F4F6FA13.52:1
Secondary / canvas#526177 / #F4F6FA5.82:1
Logo / canvas#284775 / #F4F6FA8.63:1
Button text / action#FFFFFF / #2847759.34:1
Field text / white#1E293B / #FFFFFF14.63:1
Label / white#526177 / #FFFFFF6.30:1
Accent text / tint#284775 / #E6ECF67.87:1

Calculated using sRGB relative luminance for opaque colors. These pair calculations do not establish full product accessibility.

03 · Typography

Plus Jakarta Sans is selected. The interface hierarchy and additional weights below are recommendations for review.

PROPOSED · TYPE SCALE
DISPLAY · 40 / 46 · 600
More business.
Less paperwork.
SECTION · 24 / 32 · 600
Your business profile
BODY · 16 / 24 · 400
Keep your business details ready for your next wholesale application.
LABEL · 14 / 20 · 500
Business email
HELPER · 12 / 18 · 400
Use the address you share with your wholesale partners.

Voice & reading rhythm

PROPOSED · WRITING GUIDANCE

Use plain, specific language about business profiles, wholesale accounts and applications. Keep headings short and forms direct.

  • Say “Apply for a wholesale account.”
  • Use sentence case in headings and controls.
  • Describe the next action and who reviews it.
  • Keep approval claims tied to actual application status.

Keep the wordmark’s tight tracking specific to the logo. Use normal tracking for body text and labels.

Font availability

The guide serves locally hosted Plus Jakarta Sans font files. The status at the top reports whether all three are available. The approved wordmark always uses 600.

04 · Lucide for the interface

Library selected. These are actual Lucide SVG assets stored with this guide, with their original paths and 2 px strokes.

Wholesale partnersstore
Business profilecontact-round
Documentsfiles
Ready / completecircle-check
PROPOSED · ICON USAGE
  • Start at 20 or 24 px for product controls.
  • Use one outline style consistently.
  • Keep text beside icons when meaning needs explanation.
  • Use accessible names on icon-only controls.

The logo stays custom

B3 identifies Retailer Apply. Lucide icons describe product actions and content. Keep their roles separate and preserve the selected B3 geometry.

Lucide is ISC licensed; inherited Feather icons have MIT terms. Retain the applicable notices when distributing assets.

Official documentationLicenseSaved license noticeAsset source URLs

05 · Usage recommendations

These dimensions, layout rules and semantic colors are draft guidance. They have not been approved as final brand standards.

PROPOSED

Clear space

Retailer Apply

Reserve at least ¼ of the visible mark height around the complete lockup. Measure from the visible artwork, not the SVG canvas.

PROPOSED

Minimum sizes

Start navigation at 18 px wordmark text and a 40 px SVG box. Start icon-only usage at a 24 px box. Test favicon rendering at 16 px before setting its final treatment.

Retain open spaces and consistent stroke weight at every size.

PROPOSED

Space & corner radius

Spacing: 4, 8, 12, 16, 24, 32, 48 px. Start with 24 px card padding, 8 px button corners and 12 px card corners. Reserve pills for status labels.

Use at least 44 px tall interactive targets in the product.

DO · Preserve proportions and clear space

Retailer Apply

Use a single approved brand color or the proposed neutral reproduction treatments. Keep the wordmark and icon aligned.

DON’T · Stretch the lockup

Retailer Apply

The distortion above is an incorrect-use example. Keep the SVG path, type proportions and corner geometry intact; avoid decorative effects.

Semantic colors · proposed separately from approved palette B. Use text and icons alongside color. The following colors are carried from the draft comparison for review.
Profile ready#226342 / #E6F3E96.26:1 text contrast
In review#805300 / #FFF2CE5.97:1 text contrast
Needs attention#A52E36 / #FCEBED5.99:1 text contrast
Information#305989 / #EAF0FA6.29:1 text contrast

06 · The identity in an application

A compact visual example with the approved logo, typeface, palette and Lucide icons. Layout, form sizes, copy and status colors remain proposals.

WHOLESALE, WITH LESS PAPERWORK

One profile.
More business.

Apply for wholesale accounts with the business details you already keep up to date.

Your business. Ready for the next connection.
Business profileExample details
Northline SupplyWholesale applicationIn review
Profile ready to reuse
PROPOSED · APPLICATION PATTERNS

Make the next step clear

Navy carries the main action. Cool neutral surfaces separate the business profile from the surrounding page. Lucide provides recognizable profile and completion cues.

  • Use one primary action per focused task.
  • Keep labels visible above form values.
  • Explain status with words, not color alone.
  • Use the larger proposed type scale when moving beyond this compact comparison.

This sample is a static brand application. Its fields use example data and its button does not submit anything.

Ready for the next stage

The four core choices are consolidated here. Refine the usage details while developing the marketing and product design, preserving these approved assets.