Brand & App System

We Keep Comporta

Identity, editorial trust and the product system — the complete guidelines and maintained design assets in one page.

Sign blue #0354A2 v1.4 wip · August 2026 QA 134 / 134 passed Guidelines deck · 39 slides shown

Overview

We Keep Comporta is a locally verified guide to events, places and local life in Comporta. This working revision (v1.4) keeps the client-approved square architectural logo throughout the brand system, production assets and responsive app prototype. Dia do Tito has been removed from the product; Tito remains as the About page — his story and photograph.

What this page contains

The final logo and its usage rules
Colour and design tokens (copyable CSS)
All three typefaces, embedded live
The full icon set and map pins
All application examples
The app prototype — screenshots and a working link
The story page (footer link): #wekeepcomportasafe, Tito, principles
The guidelines deck (39 slides; Tito Day slides removed)

Status

Design-system and prototype handoff: QA passed, 134/134 checks
Guidelines: 41 slides / 41 PDF pages, overflow tests passed
Prototype events are compiled from public sources (Aug 2026); venue pages remain concept content
Portuguese glyph coverage resolved (Atlantic Company / Canal Caveira, 319 glyphs); font licence confirmation remains an open release gate

Logo

The approved mark is the square architectural composition with the stacked words WE KEEP COMPORTA and the plus device in the upper-right corner. All lettering is outlined — the mark has no font dependency. The approved blue is #0354A2.

Primary · on white

Transparent · quiet light grounds

Reverse · on approved blue or dark fields

Black · single-colour production only

Rules

Master artwork: we-keep-comporta-final-original-master.svg
Clear space equal to the height of the plus sign on all sides
Preferred minimum 128 px digital / 28 mm print; the 16–64 px exports are technical fallbacks, not proof of legibility
Keep the square frame, the asymmetrical plus and the full stacked wording together

Never

Redraw, retype, restack, crop or rotate the mark
Remove the plus, add effects, or change the blue
Extract the plus as a standalone endorsement mark (needs separate approval)
Mix the final identity with the archived round wave seal

Superseded identity

The circular wave seal from v1.2 is archived. It appears only in the historical evolution page of the guidelines and must not appear in new app screens, partner lockups, campaigns or communications.

Colour

Tokens are at v1.4 (see the audit): the logo blue drives the mark, links and selected states; terracotta and rice now ship in two forms — the default value is text-safe (≥4.5:1) for badges and labels, and the original v1.3 fill lives on as a *-decorative variant that must never carry text. The focus token passes 3:1 on every light ground.

Brand

#0354A2

Sign Blue--color-brand-sign-blue

#1F75A7

Facade Blue--color-brand-facade-blue

#0E4F7D

Deep Atlantic--color-brand-deep-atlantic

#F4F0E7

Limewash--color-brand-limewash

Support

Controlled accents — never sole carriers of small text.

#A8C9DD

Open Sky--color-support-open-sky

#9C5E24

Terracotta--color-support-terracotta

#BC7F3C

Terracotta Decorative--color-support-terracotta-decorative

#5F6B3A

Rice Field--color-support-rice-field

#78834B

Rice Decorative--color-support-rice-decorative

#6B5D4A

Weathered Wood--color-support-weathered-wood

#DCCFC0

Sand--color-support-sand

#26343A

Deep Water--color-support-deep-water

Semantic

#4D6B3C

Success--color-semantic-success

#98631C

Warning--color-semantic-warning

#A13A32

Error--color-semantic-error

#0354A2

Info--color-semantic-info

#B7791F

Focus--color-semantic-focus

Surface

#F4F0E7

Base--color-surface-base

#FFFFFF

Raised--color-surface-raised

#FFFDFC

Paper--color-surface-paper

#ECE3D8

Subtle--color-surface-subtle

#173746

Dark--color-surface-dark

Text

#26343A

Primary--color-text-primary

#59666B

Secondary--color-text-secondary

#FFFFFF

Inverse--color-text-inverse

#0354A2

Brand--color-text-brand

Typography

The system pairs two client-supplied condensed grotesks — Atlantic Company for display and Canal Caveira for editorial moments — with Carrasqueira Text for body copy and interface text. All three faces are self-hosted and embedded live on this page. Carrasqueira ships two drawn weights, 400 and 700: the bold is a real outline, so counters stay open at 13 px rather than filling in the way a synthesised bold does. Its digits are tabular, which is what lets time ranges and dates align in columns, and its lowercase l carries a tail so it cannot be confused with a capital I in venue and place names.

Display — Atlantic Company · tracking 0.05em · uppercase

Sábado à noite na Comporta

ABCDEFGHIJKLMNOPQRSTUVWXYZ ÀÁÂÃÇÉÊÍÓÔÕÚ 0123456789 €

Editorial — Canal Caveira

Eventos verificados localmente — exposições, música e marés de verão.

abcdefghijklmnopqrstuvwxyz àáâãçéêíóôõú 0123456789

Body — Carrasqueira Text 400

Lead with practical information, then add atmosphere. Always include date, start time, place, price or “Free”, booking status, language and access notes. Expired events remain visible for 24 hours with a clear “Finished” status, then archive.

Carrasqueira Text 700 — a drawn weight, not a synthesised one. Use it for ledes and emphasis inside body copy, never for headings.

abcdefghijklmnopqrstuvwxyz àáâãçéêíóôõú ABCDEFGHIJKLMNOPQRSTUVWXYZ ÀÁÂÃÇÉÊÍÓÔÕÚ 0123456789 º ª « » €

Disambiguation: I l 1 · 0 O o · rn m — tabular digits: 19:30–23:00 · 10:00–14:00 · 21:00–01:45

Desktop scale

Role	Size	Line
displayXL	64 px	0.94
displayL	48 px	0.98
h1	40 px	1.0
h2	32 px	1.05
h3	24 px	1.15
bodyL	18 px	1.5
body	16 px	1.5
label	12 px	1.2

Mobile scale

Role	Size	Line
display	40 px	0.98
h1	32 px	1.0
h2	26 px	1.08
h3	20 px	1.15
body	16 px	1.5
label	12 px	1.2

Tracking: display 0.05em · label 0.08em · body 0. Do not use the display or editorial faces for long body copy.

Glyph coverage — resolved (1 Aug 2026)

Atlantic Company and Canal Caveira each encode 319 characters, covering the full Portuguese set (À Á Â Ã Ç É Ê Í Ó Ô Õ Ú and lowercase), € and working punctuation — the audit's 40-character missing list resolves, with only standalone UI arrows on fallback. They replace the 78-glyph v1.3 faces. Open gate: confirm the commercial licence terms before public production use.

Design tokens — v1.6

These maintained tokens are the single source of truth for the live app.

Spacing

The app deliberately uses Tailwind's spacing scale instead of maintaining a second parallel spacing vocabulary.

Radius

none · 0

sm · 6

md · 12

lg · 20

pill · 999

design-tokens.css

/* We Keep Comporta - design tokens v1.6 (2026-08-01)
   Single source of truth. Supersedes the v1.3 kit tokens per docs/design-audit-2026-08.md:
   adopts the app-tuned accessible values (H1), fixes accent-as-text contrast (H2)
   and the focus ring (B2). v1.5 moves the body family off Inter (named but never
   loaded) onto self-hosted Carrasqueira Text 400/700 - the colour block below is
   unchanged. v1.6 makes elevation a three-step scale from the values that ship
   and drops the spacing scale (docs/audit-decisions-2026-08.md SS2 + SS4).
   This file is hand-maintained alongside design-tokens.json. After every
   version bump, run `pnpm gen:theme` to regenerate the app theme and typed
   token subset. */
:root{
  /* brand */
  --color-brand-sign-blue: #0354A2;
  --color-brand-facade-blue: #1F75A7;
  --color-brand-deep-atlantic: #0E4F7D;
  --color-brand-limewash: #F4F0E7;
  /* support - text-safe values; *-decorative are the v1.3 fills, never for text */
  --color-support-open-sky: #A8C9DD;
  --color-support-terracotta: #9C5E24;
  --color-support-terracotta-decorative: #BC7F3C;
  --color-support-rice-field: #5F6B3A;
  --color-support-rice-decorative: #78834B;
  --color-support-weathered-wood: #6B5D4A;
  --color-support-sand: #DCCFC0;
  --color-support-deep-water: #26343A;
  /* semantic */
  --color-semantic-success: #4D6B3C;
  --color-semantic-warning: #98631C;
  --color-semantic-error: #A13A32;
  --color-semantic-info: #0354A2;
  --color-semantic-focus: #B7791F;
  /* surface */
  --color-surface-base: #F4F0E7;
  --color-surface-raised: #FFFFFF;
  --color-surface-paper: #FFFDFC;
  --color-surface-subtle: #ECE3D8;
  --color-surface-dark: #173746;
  /* text */
  --color-text-primary: #26343A;
  --color-text-secondary: #59666B;
  --color-text-inverse: #FFFFFF;
  --color-text-brand: #0354A2;
  /* radius */
  --radius-none: 0px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  /* motion */
  --motion-fast: 120ms; --motion-standard: 200ms; --motion-slow: 320ms;
  --motion-easing: cubic-bezier(.2,.8,.2,1);
  /* elevation */
  --shadow-row: 0 3px 14px rgba(38,52,58,.06);
  --shadow-card: 0 3px 14px rgba(38,52,58,.08);
  --shadow-floating: 0 18px 50px rgba(38,52,58,.18);
  /* touch */
  --touch-target: 44px;
}

Components

The working components as shipped in the live app. Tap targets are 44 px minimum; every control shows a two-layer focus ring.

Buttons

PRIMARY OUTLINE STRONG

The former btn-danger is renamed btn-strong — it was used for plain navigation, never destruction.

Filter chips

ALL FESTA MUSIC FREE

Badges — text-safe accents

EVENT FESTA · 5.2:1 NATURE · 5.8:1

Date square — three variants

AUG

6–9

AUG

ALL

MONTH

Source provenance block

SOURCEPUBLIC SOURCE

Câmara Municipal de Grândola
Open source page →

Checked: 1 Aug 2026. Listing compiled from a public source — confirm with the organiser.

Motion

Token	Value
fast	120 ms
standard	200 ms
slow	320 ms
easing	`cubic-bezier(.2,.8,.2,1)`

The app respects prefers-reduced-motion; no decorative parallax.

Elevation

card

floating

Iconography

The core interface set uses the approved logo blue on a 24 px grid — square caps, mitred joins, 1.8 px stroke. Category map pins retain their functional accent colours.

Accessibility

Arrow Left

Arrow Right

Beaches

Calendar

Clock

Culture

Eat Drink

Events

Filter

Heart

Language

Map

Nature

Places

Save

Shopping

Stay

Wellness

Map pins

Event

Food

Nature

Place

Applications

Design concepts showing the identity across physical and digital touchpoints. Event schedules, venues, discounts and terms are fictional until approved by the relevant organisers and businesses.

Final logo usage sheet

About — Tito

Tito — portrait (rights approval pending)

Frederico da Cunha. Tito, to everyone.

He was one of the four behind Sal, twelve years on the sand at Praia do Pego. In 2020, when everything shut, he got restaurants, shops, hotels and neighbours holding the same line: #wekeepcomportasafe — not a campaign, but people answering for each other. That standard is the product’s one rule: a place appears when two people who live here put their names to it. Nothing is bought.

Tito died in November 2022, a few weeks after Sal’s last day at Pego. The name is his — we just made it shorter.

Foi um dos quatro do Sal, doze anos sobre a areia da praia do Pego. Em 2020 pôs toda a gente na mesma linha: #wekeepcomportasafe. O nome é dele — nós só o encurtámos.

In the app, the story lives behind one quiet footer link — “The story: #wekeepcomportasafe, Tito and our principles” — leading to a single page with his story, photograph and the platform’s principles. It does not appear in the primary navigation. Dia do Tito (the 8 April celebration) has been removed from the product.

Rights gate

The portrait and story require family / rights-holder approval before public release, and the November 2022 details need confirmation. Documented in QA.

Content & voice

Calm, useful, local and specific. Lead with practical information, then add atmosphere. Tito’s story should feel warm and human, never promotional or sentimental for its own sake.

Event listing

Title 45 characters preferred, 70 maximum
Summary 120–180 characters · description 80–250 words
Always: date, start time, place, price or “Free”, booking status, language, access notes
Expired events stay 24 h marked “Finished”, then archive
Show the two local reviewers and the last review date — no admission-year badge

Venue listing

Name, category, village, opening status, address, directions, contact
3–8 images; landscape hero preferred
Verify seasonal hours; label the last update date
Separate editorial recommendations from paid support

Bilingual rules

The brand name remains “We Keep Comporta” in both languages
European Portuguese; keep place names local; never auto-translate venue names
24-hour time in both interfaces

Governance & release

QA v1.3

PASS for design-system and prototype handoff
App prototype: 134/134 checks across 8 routes and 5 viewports (320–1440 px)
Fixed-layout and editable deck overflow tests: passed
PDF render review: passed — 41 slides / 41 pages
QA does not constitute legal, trademark, editorial-rights or production-security approval

Open release gates

Font licensing and embedding rights (glyph coverage resolved 1 Aug 2026)
Tito biography and portrait rights approvals
Prototype venue pages are concept content; events are public-source compilations
No dedicated micro-mark approved — small icon exports are technical fallbacks

What changed in v1.3

Replaced the round-wave concept with the approved square architectural logo; set #0354A2 as master blue
Added primary, transparent, reverse and black production variants; updated icons, favicons, lockups and applications
Added minimum-size, clear-space, misuse and co-branding guidance; archived the round seal as history
Re-captured all v1.3 responsive prototype screens with the final logo in header, footer and icons

Package map

Folder	Contents
`01_Guidelines/`	Fixed-layout deck, editable-source deck, PDF, preview
`02_Brand_Asset_Kit/`	Logos, icons, pins, tokens, applications, content docs
`03_App_Prototype/`	Responsive HTML/CSS/JS prototype + screenshots
`04_QA/`	QA review, checks and visual boards
`05_Source/`	Deck build source and final slide artwork

Guidelines deck — v1.3 record

The brand and app guidelines as delivered in v1.3 — 39 of 41 slides. Click any slide to enlarge; where the editable deck carries native text, it is reproduced beneath the slide as selectable text.

Revision note

Two Dia do Tito slides (8 and 35) are omitted: the celebration was removed from the product in this revision. Passing references on the remaining artwork (slides 1, 29, 31, 41) predate the removal.