Brand Assets & Design System

Umbrella brand

Haritt Group

The umbrella brand for the group and its ventures. Warm off-white, editorial serif headlines and a deep red accent.

haritt.com · Source: haritt.com/site.css and the original logo artwork

Logos

Primary logo (3D circle)PNG · Flame icon in a glossy circle. Use for hero areas, share images and large placements. 512 × 512, transparent background.

Download

Flat circlePNG · Flat version for small sizes, favicon and single-colour use.

Download

3D circle, largePNG · 1024 × 1024 master.

Download

Flat circle, largePNG · 1024 × 1024 master.

Download

Favicon / compactPNG · Browser tab and app icon use (flat circle).

Download

Social share coverJPG · 1200 × 630 link preview image.

Download

Monochrome logo Not available
Dedicated dark-background version Not available
Wordmark as a file (the site sets HARITT in Montserrat Bold with GROUP in red as live text) Not available

Colours

Brand

Primary Red

#A70D22

rgb(167, 13, 34)

hsl(352, 86%, 35%)

--hg-red

Bright Red

#C8102E

rgb(200, 16, 46)

hsl(350, 85%, 42%)

--hg-red-bright

Logo

Logo Red Light

#C8102A

rgb(200, 16, 42)

hsl(352, 85%, 42%)

--hg-logo-red-1

Logo Red Mid

#9E0A1C

rgb(158, 10, 28)

hsl(353, 88%, 33%)

--hg-logo-red-2

Logo Red Deep

#5E0010

rgb(94, 0, 16)

hsl(350, 100%, 18%)

--hg-logo-red-3

Surface

Background

#F5F4EF

rgb(245, 244, 239)

hsl(50, 23%, 95%)

--hg-bg

Background Alt

#ECEAE2

rgb(236, 234, 226)

hsl(48, 21%, 91%)

--hg-bg-alt

Card

#FBFAF7

rgb(251, 250, 247)

hsl(45, 33%, 98%)

--hg-card

Text

Text

#17161A

rgb(23, 22, 26)

hsl(255, 8%, 9%)

--hg-ink

Text Secondary

#3A3833

rgb(58, 56, 51)

hsl(43, 6%, 21%)

--hg-ink-2

Muted

#6E6A60

rgb(110, 106, 96)

hsl(43, 7%, 40%)

--hg-muted

Faint

#9A968B

rgb(154, 150, 139)

hsl(44, 7%, 57%)

--hg-faint

Border

Border

#DDDAD0

rgb(221, 218, 208)

hsl(46, 16%, 84%)

--hg-line

Success, warning and error colours are not defined on haritt.com.

Typography

Aa Bb 123

Source Serif 4Headings, display · weights 400, 500, 600, italic 500Google Fonts · SIL Open Font License 1.1

Aa Bb 123

InterBody, UI, navigation · weights 400, 500, 600Google Fonts · SIL Open Font License 1.1

Style	Size (desktop → mobile)	Line height	Letter spacing	Weight
Display (home hero)	`clamp(46px, 7.2vw, 92px)`	1.02	-0.02em	Serif 500
H1 (page)	`clamp(44px, 6.4vw, 80px)`	inherits	-0.02em	Serif 500
H2	`clamp(34px, 4.6vw, 56px)`	1.08	-0.02em	Serif 500
H3 (cards)	`23–34px (24px most cards)`	1.25	-0.02em	Serif 500
Lead	`clamp(19px, 2.1vw, 22px)`	1.6	normal	Sans 400
Body	`17px`	1.65	normal	Sans 400
Card text	`16px`	1.65	normal	Sans 400
Navigation	`14.5px`	1.65	normal	Sans 400
Button	`15px`	1.65	normal	Sans 500
Eyebrow / caption	`12.5px uppercase`	1.65	0.16em	Sans 600

Observed on the live site. clamp() values scale between mobile and desktop automatically.

Theme & UI

Light only. The site does not ship a dark theme.

Container	max-width 1160px, side padding 24px
Section spacing	110px top and bottom (64px under 700px)
Card	background --hg-card, 1px solid --hg-line, radius 20px, padding 30px
Button	pill (radius 999px), 11px × 20px, background --hg-ink, text --hg-bg
Navigation	floating pill, 60px high, frosted card with radius 999px
Shadow	0 10px 30px -18px rgba(40,20,10,.35) on the navigation
Motion	hover .2s; cards .35s cubic-bezier(.2,.7,.2,1); reduced motion respected
Breakpoints	520, 600, 700, 760, 860, 900, 960px
Icons	real product icons; line icons where needed

Design tokens

CSS custom properties

colors.css

/* Haritt Group design tokens. Source: haritt.com/site.css and the original logo artwork. Copy only into projects for this brand. */
.brand-haritt-group, :root {
  --hg-red: #A70D22;
  --hg-red-bright: #C8102E;
  --hg-logo-red-1: #C8102A;
  --hg-logo-red-2: #9E0A1C;
  --hg-logo-red-3: #5E0010;
  --hg-bg: #F5F4EF;
  --hg-bg-alt: #ECEAE2;
  --hg-card: #FBFAF7;
  --hg-ink: #17161A;
  --hg-ink-2: #3A3833;
  --hg-muted: #6E6A60;
  --hg-faint: #9A968B;
  --hg-line: #DDDAD0;
  --hg-radius-card: 20px;
  --hg-radius-pill: 999px;
  --hg-container: 1160px;
  --hg-section-y: 110px;
  --hg-shadow-nav: 0 10px 30px -18px rgba(40,20,10,.35);
  --hg-ease: cubic-bezier(.2,.7,.2,1);
  --hg-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --hg-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --hg-text-display: clamp(46px, 7.2vw, 92px);
  --hg-text-h1: clamp(44px, 6.4vw, 80px);
  --hg-text-h2: clamp(34px, 4.6vw, 56px);
  --hg-text-h3: 24px;
  --hg-text-body: 17px;
  --hg-text-small: 14.5px;
  --hg-text-caption: 12.5px;
  --hg-leading-body: 1.65;
}

Typography CSS

typography.css

/* Haritt Group typography */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,500&family=Inter:wght@400;500;600&display=swap");
.brand-haritt-group, :root {
  --hg-font-1: "Source Serif 4", Georgia, "Times New Roman", serif; /* Source Serif 4: Headings, display */
  --hg-font-2: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* Inter: Body, UI, navigation */
  --hg-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --hg-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --hg-text-display: clamp(46px, 7.2vw, 92px);
  --hg-text-h1: clamp(44px, 6.4vw, 80px);
  --hg-text-h2: clamp(34px, 4.6vw, 56px);
  --hg-text-h3: 24px;
  --hg-text-body: 17px;
  --hg-text-small: 14.5px;
  --hg-text-caption: 12.5px;
  --hg-leading-body: 1.65;
}

JSON tokens

tokens.json

{
  "brand": "Haritt Group",
  "website": "https://haritt.com",
  "source": "haritt.com/site.css and the original logo artwork",
  "theme": "Light only. The site does not ship a dark theme.",
  "color": {
    "red": {
      "name": "Primary Red",
      "hex": "#A70D22",
      "rgb": "rgb(167, 13, 34)",
      "hsl": "hsl(352, 86%, 35%)",
      "group": "Brand"
    },
    "red-bright": {
      "name": "Bright Red",
      "hex": "#C8102E",
      "rgb": "rgb(200, 16, 46)",
      "hsl": "hsl(350, 85%, 42%)",
      "group": "Brand"
    },
    "logo-red-1": {
      "name": "Logo Red Light",
      "hex": "#C8102A",
      "rgb": "rgb(200, 16, 42)",
      "hsl": "hsl(352, 85%, 42%)",
      "group": "Logo"
    },
    "logo-red-2": {
      "name": "Logo Red Mid",
      "hex": "#9E0A1C",
      "rgb": "rgb(158, 10, 28)",
      "hsl": "hsl(353, 88%, 33%)",
      "group": "Logo"
    },
    "logo-red-3": {
      "name": "Logo Red Deep",
      "hex": "#5E0010",
      "rgb": "rgb(94, 0, 16)",
      "hsl": "hsl(350, 100%, 18%)",
      "group": "Logo"
    },
    "bg": {
      "name": "Background",
      "hex": "#F5F4EF",
      "rgb": "rgb(245, 244, 239)",
      "hsl": "hsl(50, 23%, 95%)",
      "group": "Surface"
    },
    "bg-alt": {
      "name": "Background Alt",
      "hex": "#ECEAE2",
      "rgb": "rgb(236, 234, 226)",
      "hsl": "hsl(48, 21%, 91%)",
      "group": "Surface"
    },
    "card": {
      "name": "Card",
      "hex": "#FBFAF7",
      "rgb": "rgb(251, 250, 247)",
      "hsl": "hsl(45, 33%, 98%)",
      "group": "Surface"
    },
    "ink": {
      "name": "Text",
      "hex": "#17161A",
      "rgb": "rgb(23, 22, 26)",
      "hsl": "hsl(255, 8%, 9%)",
      "group": "Text"
    },
    "ink-2": {
      "name": "Text Secondary",
      "hex": "#3A3833",
      "rgb": "rgb(58, 56, 51)",
      "hsl": "hsl(43, 6%, 21%)",
      "group": "Text"
    },
    "muted": {
      "name": "Muted",
      "hex": "#6E6A60",
      "rgb": "rgb(110, 106, 96)",
      "hsl": "hsl(43, 7%, 40%)",
      "group": "Text"
    },
    "faint": {
      "name": "Faint",
      "hex": "#9A968B",
      "rgb": "rgb(154, 150, 139)",
      "hsl": "hsl(44, 7%, 57%)",
      "group": "Text"
    },
    "line": {
      "name": "Border",
      "hex": "#DDDAD0",
      "rgb": "rgb(221, 218, 208)",
      "hsl": "hsl(46, 16%, 84%)",
      "group": "Border"
    }
  },
  "font": [
    {
      "family": "Source Serif 4",
      "use": "Headings, display",
      "weights": "400, 500, 600, italic 500",
      "css": "\"Source Serif 4\", Georgia, \"Times New Roman\", serif",
      "source": "Google Fonts \u00b7 SIL Open Font License 1.1"
    },
    {
      "family": "Inter",
      "use": "Body, UI, navigation",
      "weights": "400, 500, 600",
      "css": "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif",
      "source": "Google Fonts \u00b7 SIL Open Font License 1.1"
    }
  ],
  "tokens": {
    "radius-card": "20px",
    "radius-pill": "999px",
    "container": "1160px",
    "section-y": "110px",
    "shadow-nav": "0 10px 30px -18px rgba(40,20,10,.35)",
    "ease": "cubic-bezier(.2,.7,.2,1)",
    "font-heading": "\"Source Serif 4\", Georgia, \"Times New Roman\", serif",
    "font-body": "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif",
    "text-display": "clamp(46px, 7.2vw, 92px)",
    "text-h1": "clamp(44px, 6.4vw, 80px)",
    "text-h2": "clamp(34px, 4.6vw, 56px)",
    "text-h3": "24px",
    "text-body": "17px",
    "text-small": "14.5px",
    "text-caption": "12.5px",
    "leading-body": "1.65"
  },
  "logos": [
    {
      "name": "Primary logo (3D circle)",
      "path": "https://haritt.com/logo.png",
      "format": "PNG"
    },
    {
      "name": "Flat circle",
      "path": "https://haritt.com/logo-flat.png",
      "format": "PNG"
    },
    {
      "name": "3D circle, large",
      "path": "https://haritt.com/brand-assets/haritt-group/logos/haritt-group-3d-circle.png",
      "format": "PNG"
    },
    {
      "name": "Flat circle, large",
      "path": "https://haritt.com/brand-assets/haritt-group/logos/haritt-group-flat-circle.png",
      "format": "PNG"
    },
    {
      "name": "Favicon / compact",
      "path": "https://haritt.com/favicon.png",
      "format": "PNG"
    },
    {
      "name": "Social share cover",
      "path": "https://haritt.com/og.jpg",
      "format": "JPG"
    }
  ]
}

Tailwind: paste the colour values into theme.extend.colors.hg and the font stacks into theme.extend.fontFamily. These tokens document the live site; copying or editing them does not change any website.

Digital services & technology brand

Haritt Developers

The client-service brand for development, branding, marketing, lead generation and AI. Dark, premium surfaces with a red-to-orange growth gradient.

developers.haritt.com · Source: developers.haritt.com/site.css and the original logo file

Logos

Primary logo (3D circle)PNG · Flame icon in an orange glossy circle. 1024 × 1024, transparent background.

Download

Flat circlePNG · Flat version for small sizes, favicon and single-colour use.

Download

Compact / icon (256px)PNG · Header, footer and cross-brand cards (3D circle).

Download

Monochrome logo Not available
Wordmark as a file (the site sets Haritt Developers in Sora Bold) Not available

Colours

Brand

Primary Red

#E5263A

rgb(229, 38, 58)

hsl(354, 79%, 52%)

--hd-red

Growth Orange

#FF7A3D

rgb(255, 122, 61)

hsl(19, 100%, 62%)

--hd-orange

Gradient Mid

#FF5A3C

rgb(255, 90, 60)

hsl(9, 100%, 62%)

--hd-grad-mid

Gradient End

#FF9A3D

rgb(255, 154, 61)

hsl(29, 100%, 62%)

--hd-grad-end

Surface

Background

#07080C

rgb(7, 8, 12)

hsl(228, 26%, 4%)

--hd-bg

Background Alt

#0E1017

rgb(14, 16, 23)

hsl(227, 24%, 7%)

--hd-bg-alt

Card

#12141C

rgb(18, 20, 28)

hsl(228, 22%, 9%)

--hd-card

Light Section

#F6F5F2

rgb(246, 245, 242)

hsl(45, 18%, 96%)

--hd-light

Light Card

#FFFFFF

rgb(255, 255, 255)

hsl(0, 0%, 100%)

--hd-light-card

Text

Text

#F4F5F8

rgb(244, 245, 248)

hsl(225, 22%, 96%)

--hd-ink

Text Secondary

#A3A7B3

rgb(163, 167, 179)

hsl(225, 10%, 67%)

--hd-soft

Faint

#6F7380

rgb(111, 115, 128)

hsl(226, 7%, 47%)

--hd-faint

Text on Light

#5D5F66

rgb(93, 95, 102)

hsl(227, 5%, 38%)

--hd-light-soft

Link on Light

#C41E30

rgb(196, 30, 48)

hsl(353, 73%, 44%)

--hd-link

Border

Border on Light

#E6E3DC

rgb(230, 227, 220)

hsl(42, 17%, 88%)

--hd-light-line

State

Error

#FF8A8A

rgb(255, 138, 138)

hsl(0, 100%, 77%)

--hd-error

Success

#24AA6E

rgb(36, 170, 110)

hsl(153, 65%, 40%)

--hd-success

Dark-surface border is rgba(255,255,255,.09) (--hd-line). Brand gradient: linear-gradient(100deg, #E5263A 0%, #FF5A3C 45%, #FF9A3D 100%). No warning colour is defined.

Typography

Aa Bb 123

SoraHeadings, display, brand name · weights 600, 700Google Fonts · SIL Open Font License 1.1

Aa Bb 123

InterBody, UI, forms · weights 400, 500, 600Google Fonts · SIL Open Font License 1.1

Style	Size (desktop → mobile)	Line height	Letter spacing	Weight
H1 (home)	`clamp(38px, 5.2vw, 64px)`	1.08	-0.02em	Sora 700
H1 (page)	`clamp(38px, 5.6vw, 66px)`	1.08	-0.02em	Sora 700
H2	`clamp(30px, 4.2vw, 50px)`	1.08	-0.02em	Sora 700
H3	`20px`	1.08	-0.01em	Sora 600
Lead	`clamp(17px, 1.6vw, 20px)`	1.65	normal	Inter 400
Body	`16.5px`	1.65	normal	Inter 400
Navigation	`15px`	1.65	normal	Inter 500
Button	`15.5px`	1.65	normal	Inter 600
Form label	`14px`	1.65	normal	Inter 600
Eyebrow / caption	`13px uppercase`	1.65	0.1em	Inter 600

Observed on the live site. clamp() values scale between mobile and desktop automatically.

Theme & UI

Dark theme with light content sections on the same page. No user-switchable light/dark mode.

Container	max-width 1180px, side padding 24px
Section spacing	110px (80px under 760px)
Card	background --hd-card, 1px solid --hd-line, radius 22px, padding 28px
Primary button	pill, gradient background, white text, glow 0 14px 30px -12px rgba(229,38,58,.7)
Ghost button	pill, 1px border --hd-line, rgba(255,255,255,.03) fill
Inputs	background #0B0C12, radius 14px, 13px × 14px padding, orange focus border
Icon tiles	46px, radius 14px, red-orange tinted fill, 1.8px line icons
Shadow	0 30px 60px -30px rgba(0,0,0,.6)
Motion	hover .2–.25s; reveal .8s cubic-bezier(.2,.7,.2,1); floating logo 6s; reduced motion respected
Breakpoints	760, 1020px

Design tokens

CSS custom properties

colors.css

/* Haritt Developers design tokens. Source: developers.haritt.com/site.css and the original logo file. Copy only into projects for this brand. */
.brand-haritt-developers, :root {
  --hd-red: #E5263A;
  --hd-orange: #FF7A3D;
  --hd-grad-mid: #FF5A3C;
  --hd-grad-end: #FF9A3D;
  --hd-bg: #07080C;
  --hd-bg-alt: #0E1017;
  --hd-card: #12141C;
  --hd-light: #F6F5F2;
  --hd-light-card: #FFFFFF;
  --hd-ink: #F4F5F8;
  --hd-soft: #A3A7B3;
  --hd-faint: #6F7380;
  --hd-light-soft: #5D5F66;
  --hd-link: #C41E30;
  --hd-light-line: #E6E3DC;
  --hd-error: #FF8A8A;
  --hd-success: #24AA6E;
  --hd-radius-card: 22px;
  --hd-radius-input: 14px;
  --hd-radius-pill: 999px;
  --hd-container: 1180px;
  --hd-section-y: 110px;
  --hd-gradient: linear-gradient(100deg, #E5263A 0%, #FF5A3C 45%, #FF9A3D 100%);
  --hd-line: rgba(255,255,255,.09);
  --hd-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
  --hd-shadow-cta: 0 14px 30px -12px rgba(229,38,58,.7);
  --hd-ease: cubic-bezier(.2,.7,.2,1);
  --hd-font-heading: "Sora", "Inter", system-ui, sans-serif;
  --hd-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hd-text-h1: clamp(38px, 5.2vw, 64px);
  --hd-text-h2: clamp(30px, 4.2vw, 50px);
  --hd-text-h3: 20px;
  --hd-text-body: 16.5px;
  --hd-text-small: 14px;
  --hd-text-caption: 13px;
  --hd-leading-body: 1.65;
  --hd-z-nav: 50;
}

Typography CSS

typography.css

/* Haritt Developers typography */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700&display=swap");
.brand-haritt-developers, :root {
  --hd-font-1: "Sora", "Inter", system-ui, sans-serif; /* Sora: Headings, display, brand name */
  --hd-font-2: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Inter: Body, UI, forms */
  --hd-font-heading: "Sora", "Inter", system-ui, sans-serif;
  --hd-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hd-text-h1: clamp(38px, 5.2vw, 64px);
  --hd-text-h2: clamp(30px, 4.2vw, 50px);
  --hd-text-h3: 20px;
  --hd-text-body: 16.5px;
  --hd-text-small: 14px;
  --hd-text-caption: 13px;
  --hd-leading-body: 1.65;
}

JSON tokens

tokens.json

{
  "brand": "Haritt Developers",
  "website": "https://developers.haritt.com",
  "source": "developers.haritt.com/site.css and the original logo file",
  "theme": "Dark theme with light content sections on the same page. No user-switchable light/dark mode.",
  "color": {
    "red": {
      "name": "Primary Red",
      "hex": "#E5263A",
      "rgb": "rgb(229, 38, 58)",
      "hsl": "hsl(354, 79%, 52%)",
      "group": "Brand"
    },
    "orange": {
      "name": "Growth Orange",
      "hex": "#FF7A3D",
      "rgb": "rgb(255, 122, 61)",
      "hsl": "hsl(19, 100%, 62%)",
      "group": "Brand"
    },
    "grad-mid": {
      "name": "Gradient Mid",
      "hex": "#FF5A3C",
      "rgb": "rgb(255, 90, 60)",
      "hsl": "hsl(9, 100%, 62%)",
      "group": "Brand"
    },
    "grad-end": {
      "name": "Gradient End",
      "hex": "#FF9A3D",
      "rgb": "rgb(255, 154, 61)",
      "hsl": "hsl(29, 100%, 62%)",
      "group": "Brand"
    },
    "bg": {
      "name": "Background",
      "hex": "#07080C",
      "rgb": "rgb(7, 8, 12)",
      "hsl": "hsl(228, 26%, 4%)",
      "group": "Surface"
    },
    "bg-alt": {
      "name": "Background Alt",
      "hex": "#0E1017",
      "rgb": "rgb(14, 16, 23)",
      "hsl": "hsl(227, 24%, 7%)",
      "group": "Surface"
    },
    "card": {
      "name": "Card",
      "hex": "#12141C",
      "rgb": "rgb(18, 20, 28)",
      "hsl": "hsl(228, 22%, 9%)",
      "group": "Surface"
    },
    "light": {
      "name": "Light Section",
      "hex": "#F6F5F2",
      "rgb": "rgb(246, 245, 242)",
      "hsl": "hsl(45, 18%, 96%)",
      "group": "Surface"
    },
    "light-card": {
      "name": "Light Card",
      "hex": "#FFFFFF",
      "rgb": "rgb(255, 255, 255)",
      "hsl": "hsl(0, 0%, 100%)",
      "group": "Surface"
    },
    "ink": {
      "name": "Text",
      "hex": "#F4F5F8",
      "rgb": "rgb(244, 245, 248)",
      "hsl": "hsl(225, 22%, 96%)",
      "group": "Text"
    },
    "soft": {
      "name": "Text Secondary",
      "hex": "#A3A7B3",
      "rgb": "rgb(163, 167, 179)",
      "hsl": "hsl(225, 10%, 67%)",
      "group": "Text"
    },
    "faint": {
      "name": "Faint",
      "hex": "#6F7380",
      "rgb": "rgb(111, 115, 128)",
      "hsl": "hsl(226, 7%, 47%)",
      "group": "Text"
    },
    "light-soft": {
      "name": "Text on Light",
      "hex": "#5D5F66",
      "rgb": "rgb(93, 95, 102)",
      "hsl": "hsl(227, 5%, 38%)",
      "group": "Text"
    },
    "link": {
      "name": "Link on Light",
      "hex": "#C41E30",
      "rgb": "rgb(196, 30, 48)",
      "hsl": "hsl(353, 73%, 44%)",
      "group": "Text"
    },
    "light-line": {
      "name": "Border on Light",
      "hex": "#E6E3DC",
      "rgb": "rgb(230, 227, 220)",
      "hsl": "hsl(42, 17%, 88%)",
      "group": "Border"
    },
    "error": {
      "name": "Error",
      "hex": "#FF8A8A",
      "rgb": "rgb(255, 138, 138)",
      "hsl": "hsl(0, 100%, 77%)",
      "group": "State"
    },
    "success": {
      "name": "Success",
      "hex": "#24AA6E",
      "rgb": "rgb(36, 170, 110)",
      "hsl": "hsl(153, 65%, 40%)",
      "group": "State"
    }
  },
  "font": [
    {
      "family": "Sora",
      "use": "Headings, display, brand name",
      "weights": "600, 700",
      "css": "\"Sora\", \"Inter\", system-ui, sans-serif",
      "source": "Google Fonts \u00b7 SIL Open Font License 1.1"
    },
    {
      "family": "Inter",
      "use": "Body, UI, forms",
      "weights": "400, 500, 600",
      "css": "\"Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
      "source": "Google Fonts \u00b7 SIL Open Font License 1.1"
    }
  ],
  "tokens": {
    "radius-card": "22px",
    "radius-input": "14px",
    "radius-pill": "999px",
    "container": "1180px",
    "section-y": "110px",
    "gradient": "linear-gradient(100deg, #E5263A 0%, #FF5A3C 45%, #FF9A3D 100%)",
    "line": "rgba(255,255,255,.09)",
    "shadow": "0 30px 60px -30px rgba(0,0,0,.6)",
    "shadow-cta": "0 14px 30px -12px rgba(229,38,58,.7)",
    "ease": "cubic-bezier(.2,.7,.2,1)",
    "font-heading": "\"Sora\", \"Inter\", system-ui, sans-serif",
    "font-body": "\"Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "text-h1": "clamp(38px, 5.2vw, 64px)",
    "text-h2": "clamp(30px, 4.2vw, 50px)",
    "text-h3": "20px",
    "text-body": "16.5px",
    "text-small": "14px",
    "text-caption": "13px",
    "leading-body": "1.65",
    "z-nav": "50"
  },
  "logos": [
    {
      "name": "Primary logo (3D circle)",
      "path": "https://haritt.com/brand-assets/haritt-developers/logos/haritt-developers-3d-circle.png",
      "format": "PNG"
    },
    {
      "name": "Flat circle",
      "path": "https://haritt.com/brand-assets/haritt-developers/logos/haritt-developers-flat-circle.png",
      "format": "PNG"
    },
    {
      "name": "Compact / icon (256px)",
      "path": "https://haritt.com/icons/haritt-developers.png",
      "format": "PNG"
    }
  ]
}

Tailwind: paste the colour values into theme.extend.colors.hd and the font stacks into theme.extend.fontFamily. These tokens document the live site; copying or editing them does not change any website.

Digital product ecosystem

HV Verse

The product ecosystem: HV Reset, HV Assess, HV Hunt and HV AI. Clean, light, Apple-like surfaces with a deep blue accent and one colour per product.

thehvverse.com · Source: thehvverse.com index.html styles and the SVG logo files

Logos

Primary logo / app iconSVG · Orbit mark on a blue-violet gradient tile.

Download

HV Reset iconSVG · Product icon.

Download

HV Hunt iconPNG · Product icon.

Download

HV Assess iconPNG · Product icon.

Download

HV AI iconSVG · Product icon.

Download

Wordmark logo ("HV Verse" text lockup) Not available
Monochrome logo Not available
Dark-background version Not available

Colours

Brand

Accent Blue

#2E43A6

rgb(46, 67, 166)

hsl(230, 57%, 42%)

--hvw-accent

Accent Hover

#1D2B72

rgb(29, 43, 114)

hsl(230, 59%, 28%)

--hvw-accent-hover

Logo

Logo Navy

#1C2A6B

rgb(28, 42, 107)

hsl(229, 59%, 26%)

--hvw-logo-1

Logo Indigo

#4A46C9

rgb(74, 70, 201)

hsl(242, 55%, 53%)

--hvw-logo-2

Logo Violet

#7C5CE0

rgb(124, 92, 224)

hsl(255, 68%, 62%)

--hvw-logo-3

Product

HV Assess Green

#127A4F

rgb(18, 122, 79)

hsl(155, 74%, 27%)

--hvw-test

HV Reset Blue

#4A72C8

rgb(74, 114, 200)

hsl(221, 53%, 54%)

--hvw-reset

HV Hunt Gold

#A87A22

rgb(168, 122, 34)

hsl(39, 66%, 40%)

--hvw-vault

HV AI Violet

#6D4FD6

rgb(109, 79, 214)

hsl(253, 62%, 57%)

--hvw-ai

Surface

Background

#F9F9FB

rgb(249, 249, 251)

hsl(240, 20%, 98%)

--hvw-bg

Surface Gray

#F2F3F6

rgb(242, 243, 246)

hsl(225, 18%, 96%)

--hvw-gray

Text

Text

#1D1D1F

rgb(29, 29, 31)

hsl(240, 3%, 12%)

--hvw-ink

Text Secondary

#6E6E73

rgb(110, 110, 115)

hsl(240, 2%, 44%)

--hvw-soft

Faint

#86868B

rgb(134, 134, 139)

hsl(240, 2%, 54%)

--hvw-faint

Border

Border

#E4E5EA

rgb(228, 229, 234)

hsl(230, 12%, 91%)

--hvw-line

Logo accent dots: #F2C063, #34C77B, #F2A77E. Logo core gradient #FFFFFF to #C9D3FF. No shared success, warning or error colours are defined on the HV Verse site.

Typography

Aa Bb 123

HVSora (Sora)Display headings · weights 400, 600–700Self-hosted: /media/fonts/Sora-Regular.ttf, Sora-SemiBold.ttf · SIL Open Font License 1.1

Aa Bb 123

System UI stackBody, UI · weights systemDevice fonts, nothing to license

Style	Size (desktop → mobile)	Line height	Letter spacing	Weight
H1	`clamp(40px, 5.4vw, 64px)`	1	-0.045em	700
H2	`clamp(28px, 3.4vw, 42px)`	1.1	-0.035em	700
H2 (Sora sections)	`clamp(26px, 5vw, 34px)`	1.15	-0.03em	Sora 600
Body	`17px`	1.5	-0.018em	400
Small	`15px`	1.5	-0.018em	400
Caption	`13px`	1.5	-0.018em	400

Observed on the live site. clamp() values scale between mobile and desktop automatically.

Theme & UI

Light only. The HV Verse site does not ship a dark theme (individual apps may differ).

Buttons & chips	pill (radius 999px)
Cards	radius 18–28px (18px most common), light borders --hvw-line
Product theming	each product sets its own colour (--pc) and tint on shared components
Motion	short hover transitions; reduced motion respected
Icons	rounded-square app icons with gradients

Design tokens

CSS custom properties

colors.css

/* HV Verse design tokens. Source: thehvverse.com index.html styles and the SVG logo files. Copy only into projects for this brand. */
.brand-hv-world, :root {
  --hvw-accent: #2E43A6;
  --hvw-accent-hover: #1D2B72;
  --hvw-logo-1: #1C2A6B;
  --hvw-logo-2: #4A46C9;
  --hvw-logo-3: #7C5CE0;
  --hvw-test: #127A4F;
  --hvw-reset: #4A72C8;
  --hvw-vault: #A87A22;
  --hvw-ai: #6D4FD6;
  --hvw-bg: #F9F9FB;
  --hvw-gray: #F2F3F6;
  --hvw-ink: #1D1D1F;
  --hvw-soft: #6E6E73;
  --hvw-faint: #86868B;
  --hvw-line: #E4E5EA;
  --hvw-radius-card: 18px;
  --hvw-radius-card-lg: 28px;
  --hvw-radius-pill: 999px;
  --hvw-font-display: HVSora, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hvw-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hvw-text-h1: clamp(40px, 5.4vw, 64px);
  --hvw-text-h2: clamp(28px, 3.4vw, 42px);
  --hvw-text-body: 17px;
  --hvw-text-small: 15px;
  --hvw-text-caption: 13px;
  --hvw-leading-body: 1.5;
  --hvw-tracking-body: -0.018em;
}

Typography CSS

typography.css

/* HV Verse typography */
.brand-hv-world, :root {
  --hvw-font-1: HVSora, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; /* HVSora (Sora): Display headings */
  --hvw-font-2: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; /* System UI stack: Body, UI */
  --hvw-font-display: HVSora, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hvw-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hvw-text-h1: clamp(40px, 5.4vw, 64px);
  --hvw-text-h2: clamp(28px, 3.4vw, 42px);
  --hvw-text-body: 17px;
  --hvw-text-small: 15px;
  --hvw-text-caption: 13px;
  --hvw-leading-body: 1.5;
  --hvw-tracking-body: -0.018em;
}

JSON tokens

tokens.json

{
  "brand": "HV Verse",
  "website": "https://thehvverse.com",
  "source": "thehvverse.com index.html styles and the SVG logo files",
  "theme": "Light only. The HV Verse site does not ship a dark theme (individual apps may differ).",
  "color": {
    "accent": {
      "name": "Accent Blue",
      "hex": "#2E43A6",
      "rgb": "rgb(46, 67, 166)",
      "hsl": "hsl(230, 57%, 42%)",
      "group": "Brand"
    },
    "accent-hover": {
      "name": "Accent Hover",
      "hex": "#1D2B72",
      "rgb": "rgb(29, 43, 114)",
      "hsl": "hsl(230, 59%, 28%)",
      "group": "Brand"
    },
    "logo-1": {
      "name": "Logo Navy",
      "hex": "#1C2A6B",
      "rgb": "rgb(28, 42, 107)",
      "hsl": "hsl(229, 59%, 26%)",
      "group": "Logo"
    },
    "logo-2": {
      "name": "Logo Indigo",
      "hex": "#4A46C9",
      "rgb": "rgb(74, 70, 201)",
      "hsl": "hsl(242, 55%, 53%)",
      "group": "Logo"
    },
    "logo-3": {
      "name": "Logo Violet",
      "hex": "#7C5CE0",
      "rgb": "rgb(124, 92, 224)",
      "hsl": "hsl(255, 68%, 62%)",
      "group": "Logo"
    },
    "test": {
      "name": "HV Assess Green",
      "hex": "#127A4F",
      "rgb": "rgb(18, 122, 79)",
      "hsl": "hsl(155, 74%, 27%)",
      "group": "Product"
    },
    "reset": {
      "name": "HV Reset Blue",
      "hex": "#4A72C8",
      "rgb": "rgb(74, 114, 200)",
      "hsl": "hsl(221, 53%, 54%)",
      "group": "Product"
    },
    "vault": {
      "name": "HV Hunt Gold",
      "hex": "#A87A22",
      "rgb": "rgb(168, 122, 34)",
      "hsl": "hsl(39, 66%, 40%)",
      "group": "Product"
    },
    "ai": {
      "name": "HV AI Violet",
      "hex": "#6D4FD6",
      "rgb": "rgb(109, 79, 214)",
      "hsl": "hsl(253, 62%, 57%)",
      "group": "Product"
    },
    "bg": {
      "name": "Background",
      "hex": "#F9F9FB",
      "rgb": "rgb(249, 249, 251)",
      "hsl": "hsl(240, 20%, 98%)",
      "group": "Surface"
    },
    "gray": {
      "name": "Surface Gray",
      "hex": "#F2F3F6",
      "rgb": "rgb(242, 243, 246)",
      "hsl": "hsl(225, 18%, 96%)",
      "group": "Surface"
    },
    "ink": {
      "name": "Text",
      "hex": "#1D1D1F",
      "rgb": "rgb(29, 29, 31)",
      "hsl": "hsl(240, 3%, 12%)",
      "group": "Text"
    },
    "soft": {
      "name": "Text Secondary",
      "hex": "#6E6E73",
      "rgb": "rgb(110, 110, 115)",
      "hsl": "hsl(240, 2%, 44%)",
      "group": "Text"
    },
    "faint": {
      "name": "Faint",
      "hex": "#86868B",
      "rgb": "rgb(134, 134, 139)",
      "hsl": "hsl(240, 2%, 54%)",
      "group": "Text"
    },
    "line": {
      "name": "Border",
      "hex": "#E4E5EA",
      "rgb": "rgb(228, 229, 234)",
      "hsl": "hsl(230, 12%, 91%)",
      "group": "Border"
    }
  },
  "font": [
    {
      "family": "HVSora (Sora)",
      "use": "Display headings",
      "weights": "400, 600\u2013700",
      "css": "HVSora, -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "source": "Self-hosted: /media/fonts/Sora-Regular.ttf, Sora-SemiBold.ttf \u00b7 SIL Open Font License 1.1"
    },
    {
      "family": "System UI stack",
      "use": "Body, UI",
      "weights": "system",
      "css": "-apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"SF Pro Text\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "source": "Device fonts, nothing to license"
    }
  ],
  "tokens": {
    "radius-card": "18px",
    "radius-card-lg": "28px",
    "radius-pill": "999px",
    "font-display": "HVSora, -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "font-body": "-apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"SF Pro Text\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "text-h1": "clamp(40px, 5.4vw, 64px)",
    "text-h2": "clamp(28px, 3.4vw, 42px)",
    "text-body": "17px",
    "text-small": "15px",
    "text-caption": "13px",
    "leading-body": "1.5",
    "tracking-body": "-0.018em"
  },
  "logos": [
    {
      "name": "Primary logo / app icon",
      "path": "https://haritt.com/icons/hv-world.svg",
      "format": "SVG"
    },
    {
      "name": "HV Reset icon",
      "path": "https://haritt.com/icons/hv-reset.svg",
      "format": "SVG"
    },
    {
      "name": "HV Hunt icon",
      "path": "https://haritt.com/icons/hv-vault.png",
      "format": "PNG"
    },
    {
      "name": "HV Assess icon",
      "path": "https://haritt.com/icons/hv-test.png",
      "format": "PNG"
    },
    {
      "name": "HV AI icon",
      "path": "https://haritt.com/icons/hv-ai.svg",
      "format": "SVG"
    }
  ]
}

Tailwind: paste the colour values into theme.extend.colors.hvw and the font stacks into theme.extend.fontFamily. These tokens document the live site; copying or editing them does not change any website.

Library

Brand assets library

Every file, grouped by brand. Download the original or copy its URL.

Brand	Asset	Type	Format
Haritt Group	Primary logo (3D circle)	Logo / icon	PNG	Download
Haritt Group	Flat circle	Logo / icon	PNG	Download
Haritt Group	3D circle, large	Logo / icon	PNG	Download
Haritt Group	Flat circle, large	Logo / icon	PNG	Download
Haritt Group	Favicon / compact	Logo / icon	PNG	Download
Haritt Group	Social share cover	Logo / icon	JPG	Download
Haritt Group	colors.css	Design tokens	CSS	Download
Haritt Group	typography.css	Design tokens	CSS	Download
Haritt Group	tokens.json	Design tokens	JSON	Download
Haritt Group	guidelines.md	Guidelines	MD	Download
Haritt Developers	Primary logo (3D circle)	Logo / icon	PNG	Download
Haritt Developers	Flat circle	Logo / icon	PNG	Download
Haritt Developers	Compact / icon (256px)	Logo / icon	PNG	Download
Haritt Developers	colors.css	Design tokens	CSS	Download
Haritt Developers	typography.css	Design tokens	CSS	Download
Haritt Developers	tokens.json	Design tokens	JSON	Download
Haritt Developers	guidelines.md	Guidelines	MD	Download
HV Verse	Primary logo / app icon	Logo / icon	SVG	Download
HV Verse	HV Reset icon	Logo / icon	SVG	Download
HV Verse	HV Hunt icon	Logo / icon	PNG	Download
HV Verse	HV Assess icon	Logo / icon	PNG	Download
HV Verse	HV AI icon	Logo / icon	SVG	Download
HV Verse	colors.css	Design tokens	CSS	Download
HV Verse	typography.css	Design tokens	CSS	Download
HV Verse	tokens.json	Design tokens	JSON	Download
HV Verse	guidelines.md	Guidelines	MD	Download

Guidelines

Usage rules

Apply to all three brands.

Use the logo files as supplied. Never stretch, squash, rotate, recolour or add effects.

Minimum size: 24px on screen for circular badges and app icons; 32px or larger when the text inside must be readable.

Clear space: keep at least 25% of the logo's width empty on every side.

Circular badges and app icons work on light and dark backgrounds; avoid busy photos behind them.

Keep each brand in its own colours and fonts. Do not mix tokens across brands.

Cross-brand links: show the venture's own logo and name, and link to its own website.

Headers: logo plus brand name only; no parent name beside a venture's name. Only the HV Verse site footer says "A Haritt venture".

Naming: brand-assets/<brand>/logos/<brand>-<variant>.<ext>; CSS variables use the brand prefix (--hg-, --hd-, --hvw-).

Updating a brand: change its values in this documentation and its token files, then update that brand's own website separately. Nothing here is synced to the live sites automatically.