nit · brand assets

The final brand assets for the storefront and for social media. The logo text is converted to outlines, so the SVGs don't depend on any installed font.

Main rule: the web is calm, social media is expressive

Web (storefront): neutral and professional, in the spirit of Etsy. The product photos are the colour.

• Backgrounds: --background (paper) and --card (white). At most a --section (linen) tone for an occasional section.
• Olive (--primary) only for primary actions: add to cart, main CTAs, active states, focus ring.
• No coloured bands (full olive, walnut or kraft sections), no kraft backgrounds, no Caveat.
• --sale only for discounts and the active favourite.
• Components, buttons, icons, radius and spacing stay as your shadcn system defines them. This package only changes the colour variables.

Social media, print and packaging: the whole palette (olive, walnut, kraft, sage), the thread motif, and Caveat for 2–4 words.

Structure

logo/
  nit-logo-horizontal[-inverse|-ink|-white|-mono].svg   main lockup
  nit-logo-stacked[...].svg                              vertical lockup
  nit-mark[...].svg                                      heart-thread symbol on its own
  nit-wordmark[-white|-mono].svg                         "nit" on its own
icon/
  favicon.svg · favicon.ico · favicon-32.png
  apple-touch-icon.png (180) · icon-192.png · icon-512.png · icon-maskable-512.png
elements/
  thread-divider[-mono].svg · thread-line.svg · pattern-hearts-tile[.png|-transparent.svg]
social/
  og-default.svg/.png (1200×630) · avatar.svg · avatar-1080.png
tokens/
  shadcn-theme.hsl.css     for shadcn-vue on Tailwind v3 (HSL values without hsl())
  shadcn-theme.oklch.css   for Tailwind v4 / the newer shadcn format
  brand-tokens.json        source values (hex), fonts
components/
  NitLogo.vue              variant: horizontal | stacked | mark · tone: brand | inverse | mono
  NitThreadDivider.vue     decorative divider in currentColor

Variant suffixes:

• (no suffix): olive thread and walnut text, for light backgrounds.
• -inverse: gold and linen, for dark backgrounds.
• -ink: everything walnut.
• -white: everything white, for photos and olive backgrounds.
• -mono: currentColor, for inline SVG that inherits its colour.

Colours (light)

Token	Hex	Use
primary	#56613A	primary actions
foreground	#3F2A1E	text
background / card	#FBF8F2 / #FFFFFF	page / cards
secondary, muted	#F4EEE3	secondary buttons, quiet surfaces
muted-foreground	#7A685A	meta text (5.0:1 on background)
accent	#E7EADB	hover, selected item
border / input	#E4DACB	lines, fields
sale	#A0553A	discounts, active favourite
brand-kraft	#B07A48	decoration only (3.46:1, not for small text)

The dark mode values in the CSS files are a proposal and need visual checking.

Fonts

• Figtree: body text and the whole interface (already on the site).
• Fraunces 600: h1–h3, prices, quotes in italic 400. Load with the latin-ext subset (č ć đ š ž).
• Caveat 700: social media and printed thank-you cards only. Never on the web.

Don'ts

• Don't redraw or change the proportions of the logo, and don't add shadows or gradients.
• Don't use "nit.ba" or "NIT" as the logo. The brand name is always lowercase "nit".
• No AI-generated imagery anywhere. Only real product and creator photos.