// brand · v0.1.0

How JS Cebu looks

Everything you need to make something for JavaScript Cebu: logos, colors, type, rules and templates. Using an AI agent? Give it the brand.md link. It has the same rules in a form agents can follow.

Download logos ↓ For agents: /brand.md

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.

02 · Color

yellow leads
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.

Text pairs, checked against WCAG AA

  • Aa 14.4:1 Poster headline and body
  • Aa 7.5:1 Poster labels and metadata (muted)
  • Aa 14.4:1 Poster footer bar event line
  • Aa 14.4:1 Terminal headline and links
  • Aa 15.8:1 Terminal body text
  • Aa 7.0:1 Terminal labels and metadata (muted)
  • Aa 14.4:1 Terminal primary button
  • Aa 17.0:1 Journal headline and body
  • Aa 5.0:1 Journal labels and captions (muted)
  • Aa 14.4:1 Journal highlighter band

03 · Type

free, open-licensed
  • Archivo 600 · 900

    Archivo · Aa Bb Cc 0123456789

    Archivo · Aa Bb Cc 0123456789

    Poster headlines (900, uppercase) and body (600). A heavy grotesque that sits well beside the wordmark.

    Google Fonts ↗
  • Space Grotesk 400 · 700

    Space Grotesk · Aa Bb Cc 0123456789

    Space Grotesk · Aa Bb Cc 0123456789

    Terminal headlines (700) and body (400).

    Google Fonts ↗
  • Inter Tight 400 · 800

    Inter Tight · Aa Bb Cc 0123456789

    Inter Tight · Aa Bb Cc 0123456789

    Journal headlines (800, sentence case) and body (400).

    Google Fonts ↗
  • JetBrains Mono 400 · 600

    JetBrains Mono · Aa Bb Cc 0123456789

    JetBrains Mono · Aa Bb Cc 0123456789

    Labels, metadata, the event line and code, in every personality.

    Google Fonts ↗
  • Roboto 900
    The JAVASCRIPT / CEBU wordmark in Roboto Black

    The wordmark only (Roboto Black). It is already outlined in the logo files, so never set other text in it.

    Google Fonts ↗

04 · Signatures

in this order
  1. 01

    The cursor

    core

    The primary headline ends with a solid block cursor.

    <span class="jc-nw">word<span class="jc-cursor" aria-hidden="true"></span></span>
    • 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. 02

    The sticker

    core

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

    The JS Cebu sticker, tilted
    • 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. 03

    Bisaya, lightly

    experimental

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

    Salamat · Kita-kits · Padayon · Code ta! · Apil nadrafts, not yet approved

    • 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. 04

    Real photos

    core

    Real photos of the community, never filtered.

    The JS Cebu community at a meetup
    • 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.

05 · Personalities

pick one per piece

Three looks, kept distinct: different typefaces, layouts and moods. Yellow and the signatures tie them together. Each example below is the same HTML that brand.md gives agents.

Poster

Social media posts and event graphics.

  • bg #FFDF00
  • text #0E0F11
  • muted #4A4316
  • accent #0E0F11
  • cursor #0E0F11

Archivo 900 uppercase · Archivo 600 · 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

Terminal

The website and anything read on screen: slides, docs, dashboards.

  • bg #0E0F11
  • text #E9E9EC
  • muted #9C9CA3
  • accent #FFDF00
  • cursor #FFDF00

Space Grotesk 700 · Space Grotesk 400 · 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

Journal

Stories, event recaps and long reads.

  • bg #F4F1EA
  • text #0E0F11
  • muted #6B675F
  • accent #FFDF00
  • cursor #FFDF00

Inter Tight 800 · Inter Tight 400 · 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

06 · Photos

real, never filtered

After every event, the facebook.com/javascriptcebu cover becomes a real photo from it. Only the sticker, a caption and a dark gradient go on top.

Facebook cover template · The post-event cover photo ritual.

07 · Voice

English first
  • 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.
BisayaEnglishUseStatus
Salamat Thanks Sign-offs and thank-you posts draft, not yet approved
Kita-kits See you The end of event announcements draft, not yet approved
Padayon Keep going Recaps and encouragement draft, not yet approved
Code ta! Let's code Calls to action for workshops and hack nights draft, not yet approved
Apil na Join now Registration calls to action, next to the link draft, not yet approved

08 · Templates & downloads

svg · png · html · css

09 · Changelog

v0.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.