Brand

Brand

Job Matcher's mark is a check drawn as two flat-cut highlighter strokes. Where the strokes cross, the marker passes twice and the yellow deepens: that overlap is the match. It borrows from the product itself, which highlights the reasons a listing fits your resume. The brand is deliberately small: one mark in three forms, two lockups, six colours and one typeface. The source of truth is docs/brand with its README and the full brand guide (PDF). This page documents the files, the geometry, the rules and how the mark reaches the app, the marketing site and the browser.

The mark

Default	Check only	Full-bleed tile
mark.svg	mark-check.svg	mark-square.svg

Geometry

The mark is drawn on a 64 × 64 unit grid. Every SVG copy uses the same three shapes:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect width="64" height="64" rx="14" fill="#1c2a23"/>                              <!-- tile (Ink) -->
  <path d="M8 30 19.73 48h14.94L22.93 30zm11.73 18L41.07 16H56L34.67 48z" fill="#f3de6e"/>  <!-- strokes (Marker) -->
  <path d="M19.73 48h14.94l-7.39-11.33z" fill="#e2b92a"/>                            <!-- overlap (Marker, twice) -->
</svg>

Element	Points (units)	Notes
Tile	0,0 to 64,64, corner radius 14	Omitted in mark-check.svg; square corners in mark-square.svg
Short stroke	(8, 30) → (19.73, 48) → (34.67, 48) → (22.93, 30)	Top edge at y = 30
Long stroke	(19.73, 48) → (41.07, 16) → (56, 16) → (34.67, 48)	Top edge at y = 16
Overlap	(19.73, 48) → (34.67, 48) → (27.28, 36.67)	The triangle where both strokes cover the same area

• Flat cuts. Both strokes end in horizontal edges, like a chisel-tip marker. Each stroke is about 14.93 units wide along the horizontal.
• Placement. The check spans x = 8 to 56 and y = 16 to 48, so it sits centred on the tile with 8 units of margin left and right and 16 above and below.
• Pixel alignment. The brand README states that the horizontal edges land on whole pixels at 16 and 32 px. At 32 px (scale 0.5) the three edges fall at 8, 15 and 24 px. At 16 px (scale 0.25) the y = 16 and y = 48 edges fall at 4 and 12 px, but the short stroke's top (y = 30) falls at 7.5 px.
• Radius. 14 of 64 units (about 22% of the tile). The lockups scale the tile to 113.91 units with a 24.92-unit radius, the same proportion.

Concept

The yellow is the app's --highlight token, the same colour used to mark matched requirements in a job's reason. The overlap colour exists only here; the CSS comment on --highlight-deep reads "The highlighter passing twice: only where the logo's two strokes cross." See Visual System.

Files

In docs/brand

File	Format	Use it for
mark.svg	SVG, 64-unit viewBox	The default mark on its rounded Ink tile: favicons, avatars, the app header
mark-check.svg	SVG	The check without its tile, for dark backgrounds
mark-square.svg	SVG	Full-bleed square tile, for platforms that round the corners themselves
lockup.svg	SVG, 746 × 114	Mark and wordmark for light backgrounds (Ink wordmark)
lockup-dark.svg	SVG, 717 × 114	Tile-less check and wordmark for dark backgrounds (wordmark in #f4f6f1)
app-icon-1024.png	PNG, 1024 × 1024, opaque	Full-bleed master for raster app icons
brand-guide.pdf	PDF	The full guide
README.md	Markdown	The short guide this page expands on

The raster artwork (social preview, app icons and the PDF) was built in Canva from the same geometry as the SVGs. In both lockups the wordmark is outlined to paths, so it renders without the font installed.

Light lockup	Dark lockup

Elsewhere in docs

File	Use
docs/social-preview.png	1280 × 640 link preview for GitHub, Open Graph and Twitter cards
docs/logo.svg	Byte-identical copy of mark.svg, shown at the top of the repository README

Copies across the repository

Location	Files	Notes
apps/web/app/	icon.svg, favicon.ico, apple-icon.png, manifest.ts	Next.js file-convention icons. icon.svg is byte-identical to mark.svg.
apps/web/public/	icon-192.png, icon-512.png, icon-maskable-512.png	Install icons referenced by the manifest
apps/web/components/logo.tsx	Inline SVG	The app header mark, coloured by tokens
site/assets/	logo.svg, favicon.ico, apple-touch-icon.png, social-preview.png	Byte-identical to mark.svg, the app's favicon.ico, the app's apple-icon.png and docs/social-preview.png respectively
site/index.html	Inline SVG	The marketing site header mark, with literal hex colours

When the mark changes, every copy has to be replaced; nothing generates them.

Colour

Swatch	Name	Hex	Role	App token
	Ink	#1c2a23	Text and the tile	--foreground, --primary
	Paper	#eef1ec	Page background	--background
	Sheet	#fafbf8	Cards and panels	--card, --popover
	Marker	#f3de6e	The check and highlighted text	--highlight
	Marker, twice	#e2b92a	Only where the two strokes cross	--highlight-deep
	Match	#2f6b4f	Verdicts	--match, --ring

The dark lockup's wordmark uses #f4f6f1, the app's --primary-foreground, which is not one of the six named colours. The full token set is in Design Tokens.

Type

Schibsted Grotesk, one family throughout: bold for headings and the wordmark, regular for reading. The outlined wordmark in the SVGs is set in bold with −1.5% tracking.

Where	How it is loaded	Wordmark styling
Web app	next/font/google, served from the app's origin	Logo: text-lg font-bold tracking-tight (700, −0.025em)
Marketing site	Self-hosted site/assets/fonts/schibsted-grotesk-latin.woff2 (v1.100, Latin subset, SIL Open Font License 1.1)	.brand: font-weight: 800; letter-spacing: -0.02em
Brand SVGs	Outlined paths	Bold, −1.5%

The live-text wordmarks in the app and on the site do not match the outlined wordmark exactly (−2.5% at weight 700, and −2% at weight 800). App page titles also use weight 800 (font-extrabold) rather than bold. See Visual System.

Using the logo

• Clear space: half the tile height on every side.
• Minimum size: the mark at 16 px; the lockup at 120 px wide.
• Dark backgrounds: use the check without its tile (mark-check.svg, lockup-dark.svg).
• Platforms that round corners (app stores, some avatars): use mark-square.svg or the full-bleed raster icons.
• Do not recolour, outline, rotate or add effects to the mark. Keep the colours as drawn.

Inline logo component

apps/web/components/logo.tsx exports two components.

Export	Props	Renders
LogoMark	className?	The 64-unit SVG at size-7 (28 px), aria-hidden, with the tile filled var(--primary), the strokes var(--highlight) and the overlap var(--highlight-deep)
Logo	href	A Link containing LogoMark and the text "Job Matcher" (flex items-center gap-2.5 text-lg font-bold tracking-tight)

Because the fills are tokens, the header mark changes with the theme tokens, while every file copy keeps literal hex values. The mark is decorative (aria-hidden); the link's accessible name comes from the visible text. Logo links to / on the landing and auth pages and to /home inside the app.

The marketing site draws the same paths inline in site/index.html at 2rem with literal colours; its 404 page uses <img src="/AI-Job-Resume-Matcher/assets/logo.svg"> instead.

Favicon and icon pipeline

flowchart LR
  svg["docs/brand/mark.svg"] -- "identical copy" --> icon["apps/web/app/icon.svg"]
  svg -- "identical copy" --> sitelogo["site/assets/logo.svg"]
  svg -- "identical copy" --> docslogo["docs/logo.svg"]
  canva["Canva, same geometry"] --> master["docs/brand/app-icon-1024.png"]
  canva --> raster["apps/web/app/favicon.ico<br/>apps/web/app/apple-icon.png<br/>apps/web/public/icon-*.png"]
  canva --> social["docs/social-preview.png"]
  raster -- "identical copies" --> siteraster["site/assets/favicon.ico<br/>site/assets/apple-touch-icon.png"]
  social -- "identical copy" --> sitesocial["site/assets/social-preview.png"]

Loading

The "identical copy" edges were checked byte for byte. The raster files were exported from Canva, per the brand README; no build step generates any of them, so they are committed by hand.

Web app

Next.js turns files in app/ into <head> tags and routes automatically.

File	Size and format	Served as	Purpose
app/icon.svg	SVG (rounded tile)	<link rel="icon" type="image/svg+xml">	Sharp favicon in modern browsers
app/favicon.ico	ICO with 3 PNG images (16, 32 and 48 px per the brand README)	/favicon.ico	Fallback favicon
app/apple-icon.png	180 × 180 PNG, opaque, full bleed	<link rel="apple-touch-icon">	iOS home screen (iOS rounds the corners)
app/manifest.ts	TypeScript	/manifest.webmanifest	Install metadata and icon list
public/icon-192.png	192 × 192 PNG with transparency	Manifest icon, purpose: "any"	Rounded tile
public/icon-512.png	512 × 512 PNG with transparency	Manifest icon, purpose: "any"	Rounded tile (transparent corners)
public/icon-maskable-512.png	512 × 512 PNG, opaque Ink background	Manifest icon, purpose: "maskable"	Full bleed for launchers that crop to a shape

Maskable safe zone

Android and other launchers crop maskable icons to a circle, squircle or rounded square. The safe zone is the central circle whose radius is 40% of the icon size; anything outside it may be cut off. The maskable icon therefore:

• fills the whole 512 px square with Ink (no transparent corners), and
• scales the check to 80% of its size in the regular icon.

Measured from the files, the check spans 381 px in icon-512.png and 305 px in icon-maskable-512.png (80%). Its farthest corner is about 184 px from the centre, inside the 205 px safe radius.

Manifest

manifest.ts sets name and short_name to "Job Matcher", start_url to /home, display to standalone, and both background_color and theme_color to Paper (#eef1ec). Details are in Frontend.

Marketing site

site/index.html links assets/favicon.ico (sizes="32x32"), assets/logo.svg (type="image/svg+xml") and assets/apple-touch-icon.png, sets theme-color to #eef1ec, and uses assets/social-preview.png (1280 × 640) for og:image and the Twitter summary_large_image card. See Marketing Site.