Cocoon Brand Identity

A complete profile of Cocoon's visual system — colors, typography, components, and personality.

Quick Facts

Color Palette

• primary: #D7D9C4
• secondary: #505530
• accent: #505530
• background: #FFFFFF
• textPrimary: #231A08
• link: #231A08

Typography

• primary: Akkurat — https://fonts.google.com/specimen/Akkurat
• heading: GT Ultra Fine — https://fonts.google.com/specimen/GT+Ultra+Fine

Visual Assets

• Logo:
• Favicon:
• Social card (og:image):

UI Components

• input: background=#FFFFFF, textColor=#71695F, borderColor=#F2F0EE, borderRadius=10.08px, shadow=none
• buttonPrimary: background=#505530, textColor=#FBF9F6, borderRadius=10.08px, shadow=none
• buttonSecondary: background=#FBF9F6, textColor=#231A08, borderRadius=0px, shadow=none

Brand Personality

Tone: professional · Energy: medium · Audience: business professionals

Cocoon Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

• What is leave management software + benefits and features

  Source: Leave Management Software System Guide

• Announcements | Cocoon Blog

  Source: Cocoon Blog Announcements

• Learn about CA PFL administration requirements for employers

  Source: California Leave Laws

• 5 different types of employee leave policies you should consider

  Source: Progressive Employee Leave Policies

• SaaS tools transform how HR leaders manage employee leave

  Source: Digital Transformation Strategy

• FMLA and compliance checklist for employee leave of absence

  Source: Compliance Checklist

Working with these fonts

Not found on Google Fonts? Here’s a flow that can help:

1. Open the company's homepage in a browser with DevTools open.
2. In the Network tab, filter by "Font" (or by extension: woff2, woff, ttf, otf).
3. Hard-reload the page and click around (pricing, blog, careers) — some weights only load on specific routes.
4. For each captured font URL: right-click → Save As to download the file locally.
5. View the page's CSS and copy out the matching @font-face declarations.

Machine-Readable Profile

{
 "colorScheme": "light",
 "fonts": [
  {
   "family": "Akkurat",
   "role": "body"
  },
  {
   "family": "GT Ultra Fine",
   "role": "heading"
  }
 ],
 "colors": {
  "primary": "#D7D9C4",
  "secondary": "#505530",
  "accent": "#505530",
  "background": "#FFFFFF",
  "textPrimary": "#231A08",
  "link": "#231A08"
 },
 "typography": {
  "fontFamilies": {
   "primary": "Akkurat",
   "heading": "GT Ultra Fine"
  },
  "fontStacks": {
   "heading": [
    "GT Ultra Fine",
    "sans-serif"
   ],
   "body": [
    "GT Ultra Fine",
    "sans-serif"
   ],
   "paragraph": [
    "Akkurat",
    "sans-serif"
   ]
  },
  "fontSizes": {
   "h1": "70px",
   "h2": "45px",
   "body": "16px"
  }
 },
 "spacing": {
  "baseUnit": 4,
  "borderRadius": "8px"
 },
 "components": {
  "input": {
   "background": "#FFFFFF",
   "textColor": "#71695F",
   "borderColor": "#F2F0EE",
   "borderRadius": "10.08px",
   "shadow": "none"
  },
  "buttonPrimary": {
   "background": "#505530",
   "textColor": "#FBF9F6",
   "borderRadius": "10.08px",
   "shadow": "none"
  },
  "buttonSecondary": {
   "background": "#FBF9F6",
   "textColor": "#231A08",
   "borderRadius": "0px",
   "shadow": "none"
  }
 },
 "images": {
  "logo": "https://cdn.prod.website-files.com/64ce9f51615cb3ead94d5f9f/64ce9fb53431183bd289df2e_Cocoon%20logo%20-%20primary.svg",
  "favicon": "https://cdn.prod.website-files.com/64ce9f51615cb3ead94d5f9f/64e8c64a1b022f56983e2964_cocoon%20favicon.webp",
  "ogImage": "https://cdn.prod.website-files.com/64ce9f51615cb3ead94d5f9f/6502910ee911682b42526266_Cocoon%20-%20welcome%20to%20the%20modern%20era%20of%20employee%20leave.png"
 },
 "personality": {
  "tone": "professional",
  "energy": "medium",
  "targetAudience": "business professionals"
 },
 "designSystem": {
  "framework": "custom",
  "componentLibrary": ""
 }
}