---
name: Dominicana Tech Week
version: alpha
website: https://dominicanatechweek.do/
colors:
  # Navy and pink are CO-PRIMARIES — neither is an accent. primary is the
  # dominant navy field, primary-pink is the energy and the icon's color.
  # TODO: confirm exact navy/cream/secondary hexes against the brand source
  # file — primary-pink (#ff2587) and ink (#000000) are sampled from the logo
  # exports; the rest are sampled by eye from the brand boards.
  primary: "#15375f"
  primary-pink: "#ff2587"
  ink: "#000000"
  background: "#f0ebe0"
  surface: "#ffffff"
  text: "#000000"
  text-muted: "#555555"
  on-primary: "#ffffff"
  border: "#ddd5c6"
  sky: "#29b5f2"
  sky-support: "#5380d6"
  green: "#1ec760"
  green-support: "#a8e92f"
  sponsor: "#fdc845"
  sponsor-support: "#f8862e"
  violet: "#5d4fa6"
  violet-support: "#a487ea"
  teal: "#207f8e"
logo:
  color:
    src: assets/logo-color.png
    background: "{colors.background}"
    usage: Primary lockup — cream and light surfaces
  negative:
    src: assets/logo-negative.png
    background: "{colors.primary}"
    usage: Pink icon + white wordmark — navy and black surfaces
  black:
    src: assets/logo-black.png
    background: "{colors.background}"
    usage: Mono ink lockup — single-color print and stamps
  white:
    src: assets/logo-white.png
    background: "{colors.ink}"
    usage: Mono reversed — black surfaces and photography
  acronym:
    src: assets/logo-acronym-color.png
    background: "{colors.background}"
    usage: A + DOTW acronym — pink icon, black wordmark; secondary lockup for tight, wide or informal formats on light surfaces
  acronym-negative:
    src: assets/logo-acronym-negative.png
    background: "{colors.primary}"
    usage: Acronym — pink icon, white wordmark; navy and black surfaces
  acronym-white:
    src: assets/logo-acronym-white.png
    background: "{colors.primary-pink}"
    usage: Acronym, all white; the pink field and photography
  icon:
    src: assets/logo-icon.png
    background: "{colors.background}"
    usage: The "A" alone, pink on transparent (640px) — avatars, badges, patterns; cut from the published acronym lockup, a stopgap until the source-file export
  favicon:
    src: assets/favicon.png
    background: "{colors.background}"
    usage: The pink "A" on the navy field, rounded square, 512px — browser tabs and app icons; navy + pink is the signature composition
    media: web
sources:
  press:
    origin: "The public press kit at dominicanatechweek.do/press — the three acronym lockups and the 2026 press photo are downloaded from it as published. Web-derived; no binary stored."
    link: "https://dominicanatechweek.do/press"
    derives: "logo.acronym, logo.acronym-negative, logo.acronym-white, logo.icon, logo.favicon, examples.press-2026-stage"
examples:
  press-2026-stage:
    src: assets/examples/press-2026-stage.jpg
    caption: "DOTW 2026 — stage backdrop and podium, the stacked lockup in pink and white on navy"
    source: press
    media: physical
typography:
  h1:
    fontFamily: Outfit
    fontSize: "72px"
    fontWeight: "800"
    textTransform: uppercase
    letterSpacing: "0.01em"
  h2:
    fontFamily: Outfit
    fontSize: "48px"
    fontWeight: "800"
    textTransform: uppercase
    letterSpacing: "0.01em"
  h3:
    fontFamily: Outfit
    fontSize: "30px"
    fontWeight: "700"
    textTransform: uppercase
  h4:
    fontFamily: Outfit
    fontSize: "20px"
    fontWeight: "700"
    textTransform: uppercase
  body-md:
    fontFamily: Outfit
    fontSize: "16px"
    fontWeight: "400"
  body-sm:
    fontFamily: Outfit
    fontSize: "14px"
    fontWeight: "400"
  label:
    fontFamily: Outfit
    fontSize: "12px"
    fontWeight: "700"
    textTransform: uppercase
    letterSpacing: "0.08em"
  code:
    fontFamily: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
    fontSize: "14px"
    fontWeight: "400"
rounded:
  sm: "4px"
  md: "8px"
  lg: "16px"
  full: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "48px"
combos:
  # Primary text modes (these carry body/label text and back the components)
  navy:
    background: "{colors.primary}"
    text: "{colors.on-primary}"
    mark: "{colors.primary-pink}"
    usage: "Navy ground — white text, pink icon. Nav, hero, save-the-date."
  cream:
    background: "{colors.background}"
    text: "{colors.ink}"
    mark: "{colors.primary-pink}"
    usage: "Cream ground — black text, pink icon. Default poster/page ground."
  white-card:
    background: "{colors.surface}"
    text: "{colors.ink}"
    usage: "White card surface, black text."
  pink-action:
    background: "{colors.primary-pink}"
    text: "{colors.on-primary}"
    usage: "Pink CTA / white-on-pink mode — white label on hot pink."
  sponsor:
    background: "{colors.sponsor}"
    text: "{colors.ink}"
    mark: "{colors.sponsor-support}"
    reserved: true
    usage: "Sponsor / patrocinios ONLY — yellow ground, black text, orange icon."
  # Secondary icon modes (support-color mark on its main color; no body text)
  sky:
    background: "{colors.sky}"
    mark: "{colors.sky-support}"
    usage: "Sky mode — support-blue icon on sky. Sessions/tracks/social."
  green:
    background: "{colors.green}"
    mark: "{colors.green-support}"
    usage: "Green mode — lime icon on green."
  violet:
    background: "{colors.violet}"
    mark: "{colors.violet-support}"
    usage: "Violet mode — lavender icon on violet."
  teal:
    background: "{colors.teal}"
    mark: "{colors.primary}"
    usage: "Teal mode — navy icon on teal."
components:
  button-primary:
    combo: pink-action
    backgroundColor: "{colors.primary-pink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "12px 32px"
  button-secondary:
    combo: cream
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "12px 32px"
  card:
    combo: white-card
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
  nav:
    combo: navy
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
  sponsor-tag:
    combo: sponsor
    backgroundColor: "{colors.sponsor}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    padding: "6px 12px"
---

## Overview

Dominicana Tech Week ([dominicanatechweek.do](https://dominicanatechweek.do/)) is a loud, festival-energy event brand that is *deliberately* all over the place: one geometric "A" mark, one typeface, and a wide set of sanctioned color modes that let every piece of collateral look different while staying unmistakably DOTW. The two true primaries are deep navy (#15375f) and hot pink (#ff2587) — used together, including blue/pink compositions where pink type and marks sit on the navy field. Black is the text color and the second background, cream is the default ground. Everything is set in Outfit — heavy, uppercase, geometric — matching the logo's constructed letterforms.

## Preview

> These previews in `generated/` are auto-built from this file's
> frontmatter by `npm run build`. Don't hand-edit them; edit the tokens above.

### Colors
![Color palette](generated/preview-colors.svg)

### Typography
![Typography scale](generated/preview-typography.svg)

### Components
[components.html](generated/components.html) — one real HTML sample per component, built on `tokens.css`, each with a copy-ready snippet. Rendered live on the brand page and served at `/<slug>/generated/components.html`.

## Logo

Assets stored in `assets/`. The four full lockups are Jaime's exports; the three acronym lockups are the files published on the [press page](https://dominicanatechweek.do/press), taken as published.

| File | Description | Usage |
|------|-------------|-------|
| `assets/logo-color.png` | Pink icon + black wordmark (horizontal) | Primary — cream/light surfaces |
| `assets/logo-negative.png` | Pink icon + white wordmark | Navy and black surfaces |
| `assets/logo-black.png` | All-ink mono lockup | Single-color print, stamps |
| `assets/logo-white.png` | All-white mono lockup | Black surfaces, photography |
| `assets/logo-acronym-color.png` | Acronym lockup — pink A + black DOTW | Secondary: tight, wide or informal formats on light surfaces |
| `assets/logo-acronym-negative.png` | Acronym — pink A + white DOTW | Navy and black surfaces |
| `assets/logo-acronym-white.png` | Acronym, all white | The pink field, photography |
| `assets/logo-icon.png` | The "A" alone, pink on transparent (640×640 px) | Avatars, badges, patterns — cut from the acronym lockup above, a stopgap until Jaime exports the mark from the source file |
| `assets/favicon.png` | The pink "A" on navy `#15375f`, rounded square (512×512 px); `assets/apple-touch-icon.png` is the same at 180 px | Browser tabs and app icons |

For screens there are **web-sized renditions** of the two main lockups, downscaled from the same exports to 960px wide: `assets/web/logo-color.png` and `assets/web/logo-negative.png`. The full exports are 9,124px wide — right for print and for cutting, far too large to decode for a 36px-tall navigation logo. Sites load the `web/` files; everything else uses the full exports.

**Usage rules:**

- The two **main lockups** are the ones carrying the full "Dominicana Techweek" name (boards 18 and 20): pink icon + black wordmark on cream, and pink icon + white wordmark on navy. Use them for all official, first-touch, and partner-facing material.
- The icon-only "A" mark is for secondary applications — avatars, favicons, patterns, and the color-mode tiles described below. Never icon-only on official comms.
- Minimum display width: 140px for the full lockup.
- Always maintain the original aspect ratio; never recolor outside the sanctioned modes; no effects.
- Clear space: at least the height of the "A" icon's inner notch on all four sides.
- # TODO: export the icon-only mark and the stacked lockups (boards 18/20) from Jaime's source file and add them to `assets/`.

## Colors

Two **co-primary** colors lead every layout — pink is not an accent, it carries equal weight:

- **primary (#15375f)** — deep navy. Dominant field for hero surfaces, save-the-dates, and the navy main lockup.
- **primary-pink (#ff2587)** — hot pink. The icon's color and the loudest signal in the system; CTAs, headline highlights, and full pink fields. Navy + pink together (pink type/marks on the navy field) is a signature composition.

Supporting neutrals:

- **ink (#000000)** — black. Technically the text color, but also a relevant brand color in its own right: it is the **second background** (after cream) and the mono lockup color.
- **background (#f0ebe0)** — warm cream. Default page/poster ground.
- **surface (#ffffff)** — white. Cards and panels on cream.
- **text / text-muted / border** — ink for copy, mid-grey for secondary copy, warm grey for hairlines.

Secondary palette — five pairs, each a main color with its **support color** for icon/accent work within the same tile:

| Pair | Main | Support |
|------|------|---------|
| Sky | `sky #29b5f2` | `sky-support #5380d6` |
| Green | `green #1ec760` | `green-support #a8e92f` |
| **Sponsor (Patrocinios)** | `sponsor #fdc845` | `sponsor-support #f8862e` |
| Violet | `violet #5d4fa6` | `violet-support #a487ea` |
| Teal | `teal #207f8e` | (pairs with navy icon) |

**The yellow pair is reserved**: `sponsor` + `sponsor-support` are used for **all sponsor/patrocinios items** and nothing else. The sky, green, and violet pairs (plus teal) are free for all other applications — sessions, tracks, social, merch.

## Typography

Everything is **[Outfit](https://fonts.google.com/specimen/Outfit)** — a geometric sans that matches the logo's constructed letterforms. Headlines are ExtraBold (800) uppercase, echoing the "SAVE THE DATE" poster treatment; UI labels are Bold (700) uppercase with wide tracking; body copy is Regular (400) sentence case. The wordmark itself is custom lettering — never typeset "Dominicana Techweek" in Outfit as a logo substitute.

## Layout

4-based spacing scale. Posters and social lead with oversized type filling the frame edge-to-edge; digital surfaces use conventional container gutters (20–24px). Generous negative space around the logo, dense type stacks elsewhere — the contrast is the look.

## Shapes

Base radius 8px for UI (buttons, cards). The brand's print/social language is sharp and geometric — radius is a screen affordance, not a brand trait. Pill (`full`) only for tags/chips.

## Components

- **button-primary** — pink on white text, Outfit label uppercase. The single CTA style.
- **button-secondary** — transparent with ink text (use on-primary white text on navy/ink fields).
- **card** — white surface on the cream ground, ink text.
- **nav** — navy bar, white Outfit uppercase labels.
- **sponsor-tag** — the yellow chip. Sponsor/patrocinios items only.

## Color Modes

> These modes are now codified in the `combos:` frontmatter block (directional,
> validated, and enforced against the components). The prose below is the
> rationale; the `combos:` entries are the source of truth.

The boards define sanctioned **icon color modes** (tiles 11–20) — combinations of the "A" mark and a background. This is how the brand stays "all over the place" without breaking:

- **Primary modes**: pink icon on navy; white icon on pink; pink icon on cream (the main lockups' modes).
- **Secondary modes**: each secondary pair renders the icon in its support color on the main color (e.g. lime icon on green, lavender icon on violet, orange icon on yellow) — or tone-on-tone within the pair.
- **Sponsor mode**: orange icon on yellow — sponsor materials only.
- Black/white mono modes follow the mono lockups.

Pick any sanctioned mode per piece; vary them aggressively across a campaign.

## Do's and Don'ts

- **Do** use the full-name lockups (color on cream, negative on navy) for all official and first-touch material — the icon alone is for secondary applications.
- **Do** vary the sanctioned color modes aggressively across a campaign; sameness is off-brand, the system is designed to be remixed.
- **Do** keep yellow (+ orange support) exclusively for sponsor/patrocinios items — it's the one mode with a fixed meaning.
- **Do** set all display type in Outfit 800 uppercase; the heavy geometric voice is the brand's typographic signature.
- **Don't** invent icon/background color combinations outside the sanctioned modes — secondary pairs stay paired with their own support color.
- **Don't** recreate the wordmark by typesetting it in Outfit — the lockup is custom lettering and ships only as an asset.
- **Don't** use pink and navy at less than full saturation, as tints, or with transparency — colors are flat and full-strength everywhere.
- **Don't** put the color lockup on navy, black, or photography — use the negative or white versions there.
- **Don't** abbreviate the name as "DTW" — the abbreviation is **DOTW**, everywhere: copy, filenames, hashtags, alt text.

## Roadmap

Captured from Jaime's brand boards. Outstanding work:

- **Delivery: below Tier 1.** Captured from Jaime's boards and the press page; no brandbook has been delivered. Ask for a Tier 1 book, or at minimum the marks as SVG (icon, acronym lockup, stacked) and one page of colour and type.
- Export the icon-only mark and the stacked lockups (boards 18/20) from Jaime's source file, as SVG. A stopgap is in place since 2026-09-21: `logo.icon` and `logo.favicon` are the "A" cut from the published acronym lockup, so the brand page, the site's tab icon and the OG fallback no longer use the wide lockup. The cut is a 501px raster; the vector is still wanted.
- ~~Add the acronym lockup~~ Done from the press page: the three published colour modes are now `logo.acronym`, `logo.acronym-negative` and `logo.acronym-white`. Still wanted from Jaime's source file: the acronym as SVG, and the isolated "A".
- ~~Repoint the press page~~ Done 2026-09-18 in the site project (ours, built in Lovable): the three acronym tiles on `/prensa` now load `logo-acronym-*.png` from here, were relabelled from "Ícono aislado" to "Acrónimo", and the copy says DOTW, not DTW. The navigation, the home hero and the footer followed (2026-09-19): every DOTW logo on the site now loads the `assets/web/` renditions from here, and the project no longer keeps its own copies of the lockups.
- Confirm the navy / cream / secondary hexes against the source file (pink and black are exact).
- Add and confirm a brand tagline.
- **Add examples.** One real piece is in — the 2026 stage and podium from the press kit. Collect three to six more (badges, signage, social posts, the sponsor wall) into `assets/examples/` and declare them in `examples:`.