# tynk.in — Official Brand Story & Logo Guidelines

Welcome to the official brand story, visual identity, and logo guidelines for **tynk.in**. These specifications ensure consistent, high-precision representation across web, mobile, print, signage, and partner communications.

---

## 1. The Brand Story: What `TYNK` Stands For

Every business starts as a passing thought—a raw notion of *"what if?"* Yet most promising ideas stall before they ever reach the market because founders get overwhelmed by fragmented planning, legal registrations, digital setup, and physical branding.

While **tynk** phonetically echoes *"Think"*, the name is a purposeful four-letter abbreviation that defines how we bridge raw thought into real-world business execution across **Ideate . Plan . Launch**:

> **T · Y · N · K — Transform Your Notion into Knowledge (and Kickoff)**

### How `T · Y · N · K` Maps to Our 3-Phase Builder Framework (`Ideate . Plan . Launch`)

| Letter | Stands For | 3-Phase Alignment | How It Connects to the Business Idea |
| :--- | :--- | :--- | :--- |
| **T** | **Transform** | **Phase 1: Ideate** | Move beyond passive thinking. Validate market demand, clarify your exact customer, and **transform** an early spark into a viable venture concept before spending capital. |
| **Y** | **Your** | **Founder-First Ownership** | Tailored to **your** goals, **your** budget, and **your** language—giving independent entrepreneurs and small-business owners the capability of a full venture studio. |
| **N** | **Notion** | **Phase 2: Plan** | Shape a raw **notion** into a structured roadmap: plain-language business plans, financial budgets, government subsidy intelligence, and step-by-step registration guidance. |
| **K** | **Knowledge & Kickoff** | **Phase 3: Launch** | Convert actionable **knowledge** into a real-world **kickoff**—deploying websites, running local & digital promotions, and executing physical branding from shop signage to hoardings. |

This story is directly encoded into our logo:
- The **Luminous AI Chat Crossbar** at the top represents the **Notion & Knowledge** phase—where you converse with AI to ideate and plan.
- The **Grounded Deep Obsidian Vertical Stem** at the base represents the **Transformation & Kickoff**—turning digital plans into a tangible, standing business in the real world.

---

## 2. The Brand Mark ("The AI Chat-Bar `T`")

The standalone symbol is a custom two-part geometric monogram that unifies three core metaphors into an unmistakable capital **`T`**:

1. **Top AI Chat Crossbar**: A horizontal rounded chat bar (`88u × 28.5u`, outer corner radius `7.2u`) with a centered speech-bubble pointer descending from its lower edge. It represents **ideation, dialogue, and AI-guided strategy**.
2. **Grounded Vertical Foundation Stem**: A solid Deep Obsidian (`#0F172A`) vertical pillar (`28u` width) that anchors the mark, representing **real-world execution, registration, and physical business presence**.
3. **$27^\circ$ Precision Bevel & Negative-Space Channel**: Both the downward speech-bubble tail and the upward-sheared top edge of the vertical stem are cut at an exact **$27^\circ$ angle** ($\tan 27^\circ \approx 0.5095$), separated by a parallel negative-space channel that creates upward visual momentum.
4. **`12.6u` Corner AI Spark & Matched `5.4u` Negative-Space Channel (Rule of 9 Geometry)**: A 4-point concave AI diamond (**`12.6u`** outer radius where $1+2+6=9$) is perched at `(92.8, 7.8)` with a uniform **`5.4u`** ($5+4=9$) parallel negative-space channel—matching the exact **`5.4u`** ($5+4=9$) perpendicular negative-space channel of the **$27^\circ$** ($2+7=9$) speech-tail cut.

---

## 3. Typography & Font System

### A. Logotype / Wordmark Typography (`tynk.in`)

The **`tynk.in`** wordmark is a custom-engineered lowercase geometric sans-serif lockup:

| Element | Font / Construction | Details & Proportions |
| :--- | :--- | :--- |
| **Core Glyphs (`y`, `n`, `k`)** | **Century Gothic Bold** (`GOTHICB.TTF`) | Selected for its pure circular/geometric construction, wide open counters, uniform stroke weight, and modern architectural legibility. |
| **Custom Lowercase `t`** | **Bespoke Vector Construction** | Matches the exact stroke width of Century Gothic Bold (`1.0 × stem_w`), with a horizontal crossbar (`2.15 × stem_w` wide, `0.88 × stem_w` tall) aligned to the x-height, and a **$27^\circ$ upward-beveled ascender terminal** that directly mirrors the $27^\circ$ bevel of the standalone `T` symbol. |
| **Domain Dot (`.`) & `i` Tittle** | **Custom Rounded Squares** | Constructed at `1.08 × stem_w` with a `24%` squircle corner radius (`0.24 × dot_size`), echoing the rounded geometry of the chat crossbar and app icon container. |
| **Tracking & Kerning** | **Optical Proportional Spacing** | Symbol-to-wordmark gap is `0.27 × ascender_height`; optical kerning pairs are tuned across `t→y` (`+3.5%`), `y→n` (`+3.0%`), `n→k` (`+5.5%`), `k→.` (`+2.5%`), `.→i` (`+5.5%`), and `i→n` (`+6.5%`). |

### B. Product, UI & Marketing Typography (Hybrid Brand System)

Across the **tynk.in** web application, dashboard, and marketing pages, the brand pairs self-hosted **Century Gothic** (`GOTHICB.TTF`) for headings and display titles with **Plus Jakarta Sans** for high-density body copy and UI controls:

| Role | Typeface | CSS Variable | Weights & Usage |
| :--- | :--- | :--- | :--- |
| **Display & Headings (`h1`–`h4`, Card Titles)** | **Century Gothic** | `--font-century-gothic` / `--font-display` | **Bold (`700–900` / `GOTHICB.TTF`)**: Hero headlines (`tracking-tight`, line-height `1.15–1.2`), section titles, and feature card headers—giving every page the unmistakable `tynk.in` wordmark DNA. |
| **Body Copy & Dashboard UI** | **Plus Jakarta Sans** | `--font-jakarta` / `--font-sans` | **600 SemiBold / 500 Medium / 400 Regular**: Body paragraphs, buttons, navigation badges, form labels, and dense CRM/subsidy dashboard tables. |
| **Monospace / Technical** | **Geist Mono** | `--font-geist-mono` | **500 Medium / 400 Regular**: Verification codes, financial/budget tables, preview slugs, and system logs. |

---

## 4. Brand Color Palette & Gradients

### Primary Structural Ink
- **Deep Obsidian** (Vertical `T` Stem, `tynk` Wordmark, Primary Headings)
  - **HEX**: `#0F172A`
  - **RGB**: `rgb(15, 23, 42)`
  - **CMYK**: `C88 M76 Y52 K72`

### Luminous AI Gradient (Chat Crossbar, Corner Spark & `.in` Suffix)
The signature 3-stop diagonal gradient runs from bottom-left to top-right (`135deg`):

| Stop | Name | HEX | RGB | Role |
| :--- | :--- | :--- | :--- | :--- |
| **`0%`** | **Electric Cobalt** | `#2B59FF` | `rgb(43, 89, 255)` | Primary brand blue, trust, and structural clarity |
| **`50%`** | **Luminous Indigo** | `#6366F1` | `rgb(99, 102, 241)` | Mid-tone transition bridging blue and violet |
| **`100%`** | **AI Violet** | `#8B5CF6` | `rgb(139, 92, 246)` | AI intelligence, corner diamond spark, and `.in` terminal |

- **CSS Gradient Token**:
  ```css
  background: linear-gradient(135deg, #2B59FF 0%, #6366F1 50%, #8B5CF6 100%);
  ```

### App Icon & Surface Neutrals
- **Pure White Container**: `#FFFFFF` (`rgb(255, 255, 255)`) — Light squircle background for favicons and app icons.
- **Soft Slate Border**: `#E2E8F0` (`rgb(226, 232, 240)`) — Subtle `1.5%` inset border defining the light squircle container on white browser tabs.

---

## 5. Clear Space, Minimum Sizes & Usage Rules

### Clear Space
- Maintain a minimum clear space around the full lockup equal to **`0.5 ×` the height of the `T` symbol** (`0.5H`) on all four sides.
- For the standalone symbol (`tynk-logo-mark.png`), maintain **`0.25 ×` symbol width** clear space on all sides.

### Minimum Sizes
- **Full Wordmark Lockup (`logo.png`)**: Minimum height of **`24px`** on digital screens (`110px` width) or **`8mm`** in print.
- **Standalone Symbol (`logo-mark.png` / `favicon.ico`)**: Legible down to **`16×16px`**. Use the standalone symbol (without the wordmark) for spaces narrower than `96px`.

### Do's and Don'ts
- **DO** use the primary transparent lockup (`tynk-logo-primary.png`) on light or subtle slate backgrounds (`#FFFFFF`, `#F8FAFC`, `#F1F5F9`).
- **DO** use the standalone symbol (`tynk-logo-mark.png`) or light squircle icon (`tynk-app-icon-light.png`) for avatars, favicons, app launchers, and compact UI badges.
- **DO NOT** alter the $27^\circ$ bevel angle, reposition the `12.6u` top-right AI diamond, or detach the `.in` suffix from `tynk`.
- **DO NOT** stretch, skew, rotate, or apply drop shadows directly to the symbol or wordmark.
- **DO NOT** split the horizontal chat crossbar vertically—its continuous full-width geometry is essential so the symbol always reads unmistakably as **`T`**.

---

## 6. Official Brand Kit Contents

The downloadable **tynk.in Brand Kit** (`/tynk-brand-kit.zip`) includes:
1. `tynk-logo-primary.png` — Primary horizontal lockup (`981×252` transparent PNG, 8x supersampled)
2. `tynk-logo-mark.png` — Standalone AI Chat-Bar `T` symbol (`512×512` transparent PNG)
3. `tynk-app-icon-light.png` — Light-background squircle app icon (`512×512` PNG)
4. `tynk-brand-presentation.png` — Complete visual identity presentation board (`1600×1120` PNG)
5. `favicon.ico` — Multi-resolution browser icon (`16×16`, `32×32`, `48×48`, `64×64`, `256×256`)
6. `BRAND_GUIDELINES.md` — This official brand story and specification document