# JavaScript Cebu brand · v0.1.0

> Rules for anyone, person or AI agent, making something for JavaScript Cebu: event graphics, slides, pages, recaps. Follow the MUST checklist exactly and check your work against it before sharing. The same rules, with pictures, are at https://www.jscebu.org/brand/.

Start here:

- Link the tokens: `<link rel="stylesheet" href="https://www.jscebu.org/brand/tokens.css">`
- Load the fonts: `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;900&family=Space+Grotesk:wght@400;700&family=Inter+Tight:wght@400;800&family=JetBrains+Mono:wght@400;600&display=swap">`
- Pick one personality (Poster, Terminal or Journal) and follow its recipe below. Put its class (`jc-poster`, `jc-terminal` or `jc-journal`) on the root element.
- Use the logo files linked below. Never redraw the logo.

## MUST: check every piece

- [ ] JS Cebu yellow `#FFDF00` appears.
- [ ] The logo is the sticker (tilted 6–10°, white die-cut edge), or the flat lockup in nav, footer, sponsor walls or small sizes.
- [ ] On a yellow background, any flat logo is the one-color version.
- [ ] The primary headline ends with a block cursor in the contrast color, and the cursor never wraps onto its own line.
- [ ] The piece uses one personality's recipe (Poster, Terminal or Journal), not a mix.
- [ ] It uses only the approved fonts.
- [ ] Photos are real and unfiltered.
- [ ] No hexagon shapes besides the logo.
- [ ] Event graphics include the mono event line with jscebu.org.
- [ ] Any Bisaya is in sign-offs, recaps or CTAs, never in place of essential information.

## Logo

- The horizontal "JAVASCRIPT / CEBU" lockup is canonical. The stacked "CEBU.JS" lockup is retired.
- Clear space on all sides equals the height of the "C" in CEBU. For the mark alone, it is 25% of the mark's height.
- Minimum sizes: the mark at 24px tall on screen, the lockup at 120px wide. Below 120px, use the mark alone.
- On yellow, use the ink one-color version (white is too faint on yellow). On ink or paper, use the full-color lockup: dark on ink, light on paper. The white one-color version is for dark photos and one-color printing. For expressive placements, use the sticker.
- The sticker tilts 6–10° in either direction and has a white edge of 5% of the mark's width.
- Never recolor, stretch, outline or add effects to the logo, and never place it inside another hexagon.

| Version | Use | URL |
|---|---|---|
| Flat lockup, light (SVG) | On paper and other light backgrounds: nav, footer, sponsor walls. | https://www.jscebu.org/brand/logo/lockup-light.svg |
| Flat lockup, light (PNG) | On paper and other light backgrounds: nav, footer, sponsor walls. | https://www.jscebu.org/brand/logo/lockup-light.png |
| Flat lockup, dark (SVG) | On ink and other dark backgrounds. | https://www.jscebu.org/brand/logo/lockup-dark.svg |
| Flat lockup, dark (PNG) | On ink and other dark backgrounds. | https://www.jscebu.org/brand/logo/lockup-dark.png |
| One-color lockup, ink (SVG) | On yellow backgrounds, and on light backgrounds when only one color is possible. | https://www.jscebu.org/brand/logo/lockup-ink.svg |
| One-color lockup, ink (PNG) | On yellow backgrounds, and on light backgrounds when only one color is possible. | https://www.jscebu.org/brand/logo/lockup-ink.png |
| One-color lockup, white (SVG) | On dark backgrounds and photos when only one color is possible. | https://www.jscebu.org/brand/logo/lockup-white.svg |
| One-color lockup, white (PNG) | On dark backgrounds and photos when only one color is possible. | https://www.jscebu.org/brand/logo/lockup-white.png |
| Full-color mark (SVG) | Small square spots and avatars on ink or paper. | https://www.jscebu.org/brand/logo/mark-color.svg |
| Full-color mark (PNG) | Small square spots and avatars on ink or paper. | https://www.jscebu.org/brand/logo/mark-color.png |
| One-color mark, ink (SVG) | Small square spots on yellow, and on light backgrounds when only one color is possible. | https://www.jscebu.org/brand/logo/mark-ink.svg |
| One-color mark, ink (PNG) | Small square spots on yellow, and on light backgrounds when only one color is possible. | https://www.jscebu.org/brand/logo/mark-ink.png |
| One-color mark, white (SVG) | Small square spots on dark backgrounds and photos when only one color is possible. | https://www.jscebu.org/brand/logo/mark-white.svg |
| One-color mark, white (PNG) | Small square spots on dark backgrounds and photos when only one color is possible. | https://www.jscebu.org/brand/logo/mark-white.png |
| Sticker (SVG) | Expressive placements: graphics, the hero, merch. Rotate it 6–10°. | https://www.jscebu.org/brand/logo/sticker.svg |
| Sticker (PNG) | Expressive placements: graphics, the hero, merch. Rotate it 6–10°. | https://www.jscebu.org/brand/logo/sticker.png |
| Sticker, tilted -8° (PNG) | Drop straight into graphics. | https://www.jscebu.org/brand/logo/sticker-tilted.png |

## Colors

| Token | Hex | CSS variable | Role |
|---|---|---|---|
| yellow | `#FFDF00` | `--jc-yellow` | JS Cebu yellow. Leads every piece: backgrounds, headlines on ink, buttons, the cursor, the highlighter. Never a text color on paper. |
| ink | `#0E0F11` | `--jc-ink` | Near-black. Text on yellow and paper, the Terminal background, the Poster footer bar. |
| paper | `#F4F1EA` | `--jc-paper` | Warm off-white. The Journal background. |

Every text/background pair below passes WCAG AA. Yellow is never a text color on paper (1.2:1).

| Text | Background | Where | Contrast |
|---|---|---|---|
| `#0E0F11` | `#FFDF00` | Poster headline and body | 14.4:1 |
| `#4A4316` | `#FFDF00` | Poster labels and metadata (muted) | 7.5:1 |
| `#FFDF00` | `#0E0F11` | Poster footer bar event line | 14.4:1 |
| `#FFDF00` | `#0E0F11` | Terminal headline and links | 14.4:1 |
| `#E9E9EC` | `#0E0F11` | Terminal body text | 15.8:1 |
| `#9C9CA3` | `#0E0F11` | Terminal labels and metadata (muted) | 7.0:1 |
| `#0E0F11` | `#FFDF00` | Terminal primary button | 14.4:1 |
| `#0E0F11` | `#F4F1EA` | Journal headline and body | 17.0:1 |
| `#6B675F` | `#F4F1EA` | Journal labels and captions (muted) | 5.0:1 |
| `#0E0F11` | `#FFDF00` | Journal highlighter band | 14.4:1 |

## Fonts

Use only these. All are free (SIL Open Font License or Apache 2.0). One link loads them all: https://fonts.googleapis.com/css2?family=Archivo:wght@600;900&family=Space+Grotesk:wght@400;700&family=Inter+Tight:wght@400;800&family=JetBrains+Mono:wght@400;600&display=swap

| Font | Weights | Role | Google Fonts |
|---|---|---|---|
| Archivo | 600, 900 | Poster headlines (900, uppercase) and body (600). A heavy grotesque that sits well beside the wordmark. | https://fonts.googleapis.com/css2?family=Archivo:wght@600;900&display=swap |
| Space Grotesk | 400, 700 | Terminal headlines (700) and body (400). | https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap |
| Inter Tight | 400, 800 | Journal headlines (800, sentence case) and body (400). | https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;800&display=swap |
| JetBrains Mono | 400, 600 | Labels, metadata, the event line and code, in every personality. | https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap |
| Roboto | 900 | The wordmark only (Roboto Black). It is already outlined in the logo files, so never set other text in it. | https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap |

## Personalities

Pick one per piece. Never mix them. The signatures and yellow tie them together.

### poster

**Poster.** Social media posts and event graphics. Put `class="jc-poster"` on the root element.

- Colors: background `#FFDF00` (yellow), text `#0E0F11` (ink), muted `#4A4316`, accent `#0E0F11` (ink) with `#FFDF00` (yellow) text on it, cursor `#0E0F11` (ink).
- Type: headline Archivo 900, uppercase; body Archivo 600; mono JetBrains Mono 600.

Recipe:

- Background: yellow. Text: ink.
- Margins: about 7% of the canvas width on every side.
- Label above the headline: JetBrains Mono 600, uppercase, letter-spacing 0.08em, muted color.
- Headline: Archivo 900, uppercase, line-height 0.9, letter-spacing -0.02em, about 10% of the canvas width. It ends with the ink cursor.
- Agenda: up to 3 lines in Archivo 600, each starting with a mono time or label.
- Logo: the sticker in a top corner at about 20% of the canvas width, or the ink one-color lockup.
- Footer: a full-width ink bar holding the event line in JetBrains Mono 600, yellow on ink, e.g. SAT NOV 21 · 2PM · CEBU CITY · JSCEBU.ORG.

Don't:

- No full-color flat logo on yellow. Use the sticker or the one-color lockup.
- No sentence-case or light-weight headlines. That is Journal.
- No gradients, extra colors or hexagon shapes.
- No more than one cursor.

Example:

```html
<link rel="stylesheet" href="https://www.jscebu.org/brand/tokens.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;900&family=JetBrains+Mono:wght@400;600&display=swap">
<article class="jc-poster" style="position: relative; box-sizing: border-box; width: 540px; height: 540px; padding: 38px 38px 0; overflow: hidden;">
  <img class="jc-sticker" src="https://www.jscebu.org/brand/logo/sticker.svg" alt="JavaScript Cebu" style="position: absolute; top: 30px; right: 32px; width: 110px;">
  <p class="jc-label" style="margin: 0; font-size: 13px;">Meetup · Nov 2026</p>
  <h1 class="jc-headline" style="margin: 76px 0 0; max-width: 400px; font-size: 56px; line-height: .9; letter-spacing: -.02em;">Ship faster with AI <span class="jc-nw">agents<span class="jc-cursor" aria-hidden="true"></span></span></h1>
  <p style="margin: 28px 0 0; font-size: 17px;"><span class="jc-mono" style="font-size: 12px;">01</span>&nbsp; Building agents with the AI SDK</p>
  <p class="jc-event-line" style="position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 17px 38px; font-size: 14px; background: var(--jc-ink); color: var(--jc-yellow);">Sat Nov 21 · 2PM · Cebu City · jscebu.org</p>
</article>
```

### terminal

**Terminal.** The website and anything read on screen: slides, docs, dashboards. Put `class="jc-terminal"` on the root element.

- Colors: background `#0E0F11` (ink), text `#E9E9EC`, muted `#9C9CA3`, accent `#FFDF00` (yellow) with `#0E0F11` (ink) text on it, cursor `#FFDF00` (yellow).
- Type: headline Space Grotesk 700; body Space Grotesk 400; mono JetBrains Mono 400.

Recipe:

- Background: ink with a 24px grid of 1px lines in rgba(255,255,255,0.045).
- Headline: Space Grotesk 700, yellow, line-height 1, letter-spacing -0.02em. It ends with the yellow cursor, which blinks on the web.
- Body: Space Grotesk 400 in the Terminal text color. Labels, metadata and code: JetBrains Mono 400 in the muted color.
- Section labels: mono, uppercase, letter-spacing 0.1em. A `// ` prefix is welcome.
- Primary button: yellow background, ink text, JetBrains Mono 600, 6px radius. Secondary button: transparent with a 1px light border.
- Logo: the dark flat lockup in the nav, the sticker in the hero.
- Separate sections with 1px hairlines in rgba(255,255,255,0.08).

Don't:

- No yellow body text. Yellow is for the headline, links, the primary button and the cursor.
- No neon glows, gradients or other accent colors.
- No more than one cursor on a screen.

Example:

```html
<link rel="stylesheet" href="https://www.jscebu.org/brand/tokens.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=JetBrains+Mono:wght@400;600&display=swap">
<main class="jc-terminal" style="position: relative; padding: 24px 32px 44px;">
  <nav style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--jc-line);">
    <img src="https://www.jscebu.org/brand/logo/lockup-dark.svg" alt="JavaScript Cebu" style="width: 140px;">
    <span class="jc-label" style="font-size: 12px;">events · projects · join</span>
  </nav>
  <img class="jc-sticker" src="https://www.jscebu.org/brand/logo/sticker.svg" alt="" style="position: absolute; top: 96px; right: 40px; width: 96px;">
  <p class="jc-label" style="margin: 48px 0 0; font-size: 13px; color: var(--jc-accent);">// cebu's javascript community</p>
  <h1 class="jc-headline" style="margin: 12px 0 0; max-width: 560px; font-size: 56px; line-height: 1; letter-spacing: -.02em; color: var(--jc-accent);">Build things. Ship them. <span class="jc-nw">Together<span class="jc-cursor jc-cursor--blink" aria-hidden="true"></span></span></h1>
  <p style="margin: 18px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.6;">Meetups, workshops and Hacktoberfest, run by developers in Cebu.</p>
  <p style="display: flex; gap: 12px; margin: 28px 0 0;">
    <a class="jc-mono" href="https://www.jscebu.org" style="padding: 12px 16px; border-radius: 6px; background: var(--jc-accent); color: var(--jc-accent-text); font-weight: 600; text-decoration: none;">Next meetup →</a>
    <a class="jc-mono" href="https://www.jscebu.org" style="padding: 11px 15px; border-radius: 6px; border: 1px solid var(--jc-muted); color: var(--jc-text); font-weight: 600; text-decoration: none;">Join us</a>
  </p>
</main>
```

### journal

**Journal.** Stories, event recaps and long reads. Put `class="jc-journal"` on the root element.

- Colors: background `#F4F1EA` (paper), text `#0E0F11` (ink), muted `#6B675F`, accent `#FFDF00` (yellow) with `#0E0F11` (ink) text on it, cursor `#FFDF00` (yellow).
- Type: headline Inter Tight 800; body Inter Tight 400; mono JetBrains Mono 400.

Recipe:

- Background: paper. Text: ink.
- Headline: Inter Tight 800, sentence case, line-height 1.05, letter-spacing -0.03em. It ends with the yellow cursor.
- Key phrase: a yellow highlighter band behind one phrase of the headline or a pull quote, ink text on yellow.
- Editorial rules: a 1px ink line above each section label. Labels and captions: JetBrains Mono 400, uppercase, muted color.
- Body: Inter Tight 400, 1.6 line-height, about 65 characters per line.
- Photos: real and unfiltered, full-bleed or in a simple grid with mono captions.
- Logo: the light flat lockup in the header, or the sticker on a photo.

Don't:

- No yellow text on paper. Yellow appears only as the highlighter band, a fill or the cursor.
- No uppercase headlines. That is Poster.
- No Terminal grid on paper.

Example:

```html
<link rel="stylesheet" href="https://www.jscebu.org/brand/tokens.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;800&family=JetBrains+Mono:wght@400;600&display=swap">
<article class="jc-journal" style="max-width: 640px; padding: 32px;">
  <p class="jc-label" style="display: flex; justify-content: space-between; margin: 0; padding-top: 10px; border-top: 1px solid var(--jc-line); font-size: 12px;"><span>Recap</span><span>Nov 21, 2026</span></p>
  <h1 class="jc-headline" style="margin: 20px 0 0; font-size: 48px; line-height: 1.05; letter-spacing: -.03em;">What we learned <span class="jc-highlight">shipping with AI</span> <span class="jc-nw">agents<span class="jc-cursor" aria-hidden="true"></span></span></h1>
  <figure style="margin: 28px 0 0;">
    <img class="jc-photo" src="https://www.jscebu.org/brand/photos/community-meetup.jpg" alt="The JS Cebu community at a meetup" style="width: 100%; aspect-ratio: 4 / 3;">
    <figcaption class="jc-label" style="margin-top: 8px; font-size: 11px;">The November meetup · Photo: JS Cebu</figcaption>
  </figure>
  <p style="margin: 24px 0 0; font-size: 18px; line-height: 1.6;">Notes from the November meetup: what worked, what broke, and what we'd do again.</p>
</article>
```

## Signatures

Ranked. These are what make a piece instantly JS Cebu.

### 1. The cursor (core)

The primary headline ends with a solid block cursor.

- Size: about 0.5em wide by 0.8em tall at the headline's size, sitting on the baseline.
- Color is the contrast color: ink on yellow; yellow on ink or paper.
- It never wraps alone: wrap the last word and the cursor together with white-space: nowrap (the jc-nw class).
- On the web it blinks (1.05s, steps(1)), stays still under prefers-reduced-motion, and is aria-hidden. In images it does not blink.
- One cursor per piece or screen, on the primary headline only.

### 2. The sticker (core)

The logo as a tilted die-cut sticker, from laptop-sticker culture at meetups.

- Rotate the full-color mark 6–10° in either direction. The default is -8°.
- A white die-cut edge 5% of the mark's width. A soft shadow is optional.
- For expressive moments: graphics, the hero, merch. Nav, footer, sponsor walls and small sizes use the flat lockup.
- Use the ready-made sticker files. Do not redraw the edge.

### 3. Bisaya, lightly (experimental)

English first, with a little Bisaya in sign-offs, recaps and calls to action.

- English first. Bisaya only in sign-offs, recaps and calls to action.
- Never use Bisaya in place of essential information: dates, venues, prices or instructions.
- Use phrases from the list. Phrases marked draft are still being tested.

### 4. Real photos (core)

Real photos of the community, never filtered.

- No duotone, yellow tint or filters on photos of people.
- On top of a photo you may add only the sticker, a caption, and a dark gradient for legibility.
- After every event, update the facebook.com/javascriptcebu cover photo with a real photo from it, using the fb-cover template.

## Voice

- English first: clear, friendly and direct, like a fellow developer talking.
- Lead with what, when and where.
- Bisaya lightly, in sign-offs, recaps and calls to action only, never in place of essential information.
- Event graphics carry the mono event line: WHEN · WHERE · JSCEBU.ORG, e.g. SAT NOV 21 · 2PM · CEBU CITY · JSCEBU.ORG.

| Bisaya | English | Use | Status |
|---|---|---|---|
| Salamat | Thanks | Sign-offs and thank-you posts | draft, not yet approved by Dorell |
| Kita-kits | See you | The end of event announcements | draft, not yet approved by Dorell |
| Padayon | Keep going | Recaps and encouragement | draft, not yet approved by Dorell |
| Code ta! | Let's code | Calls to action for workshops and hack nights | draft, not yet approved by Dorell |
| Apil na | Join now | Registration calls to action, next to the link | draft, not yet approved by Dorell |

## Assets

| Asset | Use | URL |
|---|---|---|
| Flat lockup, light (SVG) | On paper and other light backgrounds: nav, footer, sponsor walls. | https://www.jscebu.org/brand/logo/lockup-light.svg |
| Flat lockup, light (PNG) | On paper and other light backgrounds: nav, footer, sponsor walls. | https://www.jscebu.org/brand/logo/lockup-light.png |
| Flat lockup, dark (SVG) | On ink and other dark backgrounds. | https://www.jscebu.org/brand/logo/lockup-dark.svg |
| Flat lockup, dark (PNG) | On ink and other dark backgrounds. | https://www.jscebu.org/brand/logo/lockup-dark.png |
| One-color lockup, ink (SVG) | On yellow backgrounds, and on light backgrounds when only one color is possible. | https://www.jscebu.org/brand/logo/lockup-ink.svg |
| One-color lockup, ink (PNG) | On yellow backgrounds, and on light backgrounds when only one color is possible. | https://www.jscebu.org/brand/logo/lockup-ink.png |
| One-color lockup, white (SVG) | On dark backgrounds and photos when only one color is possible. | https://www.jscebu.org/brand/logo/lockup-white.svg |
| One-color lockup, white (PNG) | On dark backgrounds and photos when only one color is possible. | https://www.jscebu.org/brand/logo/lockup-white.png |
| Full-color mark (SVG) | Small square spots and avatars on ink or paper. | https://www.jscebu.org/brand/logo/mark-color.svg |
| Full-color mark (PNG) | Small square spots and avatars on ink or paper. | https://www.jscebu.org/brand/logo/mark-color.png |
| One-color mark, ink (SVG) | Small square spots on yellow, and on light backgrounds when only one color is possible. | https://www.jscebu.org/brand/logo/mark-ink.svg |
| One-color mark, ink (PNG) | Small square spots on yellow, and on light backgrounds when only one color is possible. | https://www.jscebu.org/brand/logo/mark-ink.png |
| One-color mark, white (SVG) | Small square spots on dark backgrounds and photos when only one color is possible. | https://www.jscebu.org/brand/logo/mark-white.svg |
| One-color mark, white (PNG) | Small square spots on dark backgrounds and photos when only one color is possible. | https://www.jscebu.org/brand/logo/mark-white.png |
| Sticker (SVG) | Expressive placements: graphics, the hero, merch. Rotate it 6–10°. | https://www.jscebu.org/brand/logo/sticker.svg |
| Sticker (PNG) | Expressive placements: graphics, the hero, merch. Rotate it 6–10°. | https://www.jscebu.org/brand/logo/sticker.png |
| Sticker, tilted -8° (PNG) | Drop straight into graphics. | https://www.jscebu.org/brand/logo/sticker-tilted.png |
| tokens.css | CSS custom properties and the cursor, sticker and highlighter classes. Link it from any HTML you make. | https://www.jscebu.org/brand/tokens.css |
| Event post template (Poster, 1080×1080) | Copy it, change the text, render it to PNG. | https://www.jscebu.org/brand/templates/event-post.html |
| Facebook cover template | The post-event cover photo ritual. | https://www.jscebu.org/brand/templates/fb-cover.html |
| Sample community photo | Placeholder in the templates. Replace it with a real photo from your event. | https://www.jscebu.org/brand/photos/community-meetup.jpg |

## Changelog

### 0.1.0 (2026-10-28)

- First release: yellow, ink and paper; three personalities (Poster, Terminal, Journal); four signatures (cursor, sticker, Bisaya, real photos); the MUST checklist; logos rebuilt as SVG from the original PSD; event post and Facebook cover templates.