Pipa Filmes · Style guide v1.0 · approved 2026-10-28

Visual identity

The reference for every page of the site. Every still, name and credit here is a placeholder marked TODO.

Image first: near-black ink and off-white paper recede, so the frames carry all the colour.
Amber is a single light source: links, focus, small labels and the primary button only.
Cormorant Garamond reads like a film title card; Inter stays neutral and legible in tiny tracked credits.
Letterboxed 2.39:1 and 16:9 frames on a 12-column grid, with section spacing that lets images breathe.
Restraint over effects: hairlines, square corners, one subtle fade, no shadows; AA contrast and visible focus.

Colour

Six working colours plus a true-black matte. The default Tailwind palette is removed, so nothing off-palette can ship. Ratios are WCAG 2 contrast.

Ink
--color-ink · #0B0B0B
Page background. Not pure black, so true black stays reserved for letterbox mattes.
Background
— · Reference
Surface
--color-surface · #141414
Raised panels and placeholder stills. Separate it from ink with a hairline, never a shadow.
vs ink
1.07:1 · Non-text · pair with a hairline
Aa
Paper
--color-paper · #ECE8E1
Primary text and titles. Warm off-white: softer than pure white on black.
on ink
16.12:1 · AAA
on surface
15.09:1 · AAA
Aa
Muted
--color-muted · #8A857D
Secondary text, credit roles, captions, metadata.
on ink
5.37:1 · AA · AAA large
on surface
5.03:1 · AA · AAA large
Ink on amber
Accent · amber
--color-accent · #D9A441
Sparingly: links, focus ring, small labels, primary button. One amber moment per view.
on ink
8.75:1 · AAA
on surface
8.19:1 · AAA
ink text on amber
8.75:1 · AAA
Line
--color-line · rgb(255 255 255 / 0.1) ≈ #232323 on ink
Hairline borders and dividers. Decorative: never the only cue for meaning or state.
vs ink
1.26:1 · Decorative
Matte
--color-matte · #000000
Letterbox bars only (true black around a 2.39:1 picture in a 16:9 frame).
vs ink
1.07:1 · Decorative

Typography

Cormorant Garamond for titles, Inter for everything else. Large steps are fluid between 375px and 1440px, tuned for Cormorant’s small x-height.

Scale

--text-display
clamp 3.25 → 8.75rem · 52–140px
line-height 0.95 · tracking −0.015em
Pipa Filmes
--text-h1
clamp 2.75 → 5.5rem · 44–88px
line-height 1.02 · tracking −0.01em
Direção de fotografia
--text-h2
clamp 2.125 → 3.5rem · 34–56px
line-height 1.08
Luz, cor e tempo
--text-h3
clamp 1.625 → 2.25rem · 26–36px
line-height 1.15
Color grading em DaVinci Resolve
--text-h4
clamp 1.25 → 1.625rem · 20–26px
line-height 1.25 · medium
Curta-metragem · TODO Título
--text-lead
clamp 1.125 → 1.375rem · 18–22px
line-height 1.5 · Inter
Fotografia e cor para cinema, publicidade e música, a partir de Brasília. TODO texto final.
--text-body
1.0625rem · 17px
line-height 1.65 · Inter
Texto de apoio TODO. Parágrafos curtos, com até cerca de 65 caracteres por linha, para descrever o projeto, o processo e as escolhas de luz e de cor.
--text-small
0.875rem · 14px
line-height 1.55 · Inter
Brasília, Brasil · contato TODO
--text-caption
0.75rem · 12px
line-height 1.5 · tracking +0.18em · uppercase
Direção de fotografia — Nome TODO

Typefaces

Cormorant Garamond · --font-display

Pipa Filmes

Direção de fotografia

Luz, sombra e cor — ÁÉÇÃÕ 0123456789

High-contrast Garalde with calm, long lines. Reads like a film title card. Small x-height: use it large.

Inter · --font-sans

Direção de fotografia · Color grading

Texto de apoio TODO. Parágrafos curtos para descrever o projeto, o processo e as escolhas de luz e de cor.

Câmera TODO · Lentes TODO · 0123456789

Neutral, excellent at 12–14px, clean figures for years and credits. Recedes behind the images.

Space & grid

A 4px base unit for components, and five fluid tokens for page rhythm. Space is the main design element: when unsure, add more.

Base steps

1 · 4px
2 · 8px
3 · 12px
4 · 16px
6 · 24px
8 · 32px
12 · 48px
16 · 64px
24 · 96px
32 · 128px

Rhythm tokens

--spacing-page
px-page · clamp 1.25 → 4rem · 20–64px
Page gutter (left/right).
--spacing-gutter
gap-gutter · clamp 1 → 2.5rem · 16–40px
Grid column gap.
--spacing-section-sm
py-section-sm · clamp 3 → 5.5rem · 48–88px
Between blocks inside a section.
--spacing-section
py-section · clamp 4.5 → 9rem · 72–144px
Between sections.
--spacing-section-lg
py-section-lg · clamp 6 → 13rem · 96–208px
Before and after a hero or a key frame.

Max widths

--container-measure
max-w-measure · 38rem · 608px · Reading width for ledes and body text.
--container-content
max-w-content · 75rem · 1200px · Text-and-image layouts, credits.
--container-wide
max-w-wide · 100rem · 1600px · Page frame (the page utility), full-width stills.

12-column grid

grid-12: twelve equal columns, fluid gutter (--spacing-gutter). Inside page, which adds the page gutter and the 1600px cap. Columns shaded, gutters are the dark gaps.

8 / 4 · col-span-12 md:col-span-8 + md:col-span-4

Longa-metragem · TODO ano

TODO Título do projeto

Texto de apoio TODO. Uma frase sobre a luz e a cor do projeto, sem inventar créditos.

6 / 6 · col-span-12 sm:col-span-6

Components

Every component in its variants. The same demos render in the phone frame below.

Frame

2.39:1 and 16:9. Without a src it renders a neutral gray placeholder still (no hue, so it never biases colour judgement). With an image it uses Astro<Image /> with responsive widths.

ratio="2.39:1"

ratio="2.39:1" + caption

Still TODO — Título do projeto TODO

ratio="16:9" + caption

Still TODO — 16:9

ratio="2.39:1" letterbox

2.39:1 dentro de 16:9 · barras pretas reais

Button

Primary = amber fill, dark text (the only filled element on a page). Ghost = hairline border, amber on hover. With href it renders a link, otherwise a<button type="button">. Press Tab: every control gets a 2px amber focus ring with a 3px offset.

Primary · link and button

Ver trabalhos

Ghost · link and button

Assistir ao reel

Sizes sm · md · lg, and disabled

Tag

Chips for categories and filters. Active = amber. As a button it usesaria-pressed (try the filter row); as a link,aria-current.

Span · default and active

CinematografiaColor gradingDireção

Button · filter (aria-pressed)

Link · default and active

Pipa Filmes Em pós-produção

SectionTitle

Optional amber eyebrow, display-serif title, optional muted lede. level sets the tag (h1–h3), size the visual step; alignment start or center. Demos below are h3.

Trabalhos

Cinematografia

Longas, curtas, documentários, publicidade e videoclipes. TODO texto final.

Color grading

Pipa Filmes

Em produção

Filmes da Pipa Filmes por status. TODO texto final.

CreditLine

A <dt> role + <dd> name pair, used inside a <dl>. Full block: one column on phone, two on desktop.

Single line

Direção: TODO Diretor

Credits block

Direção: TODO Diretor
Direção de fotografia: Nome TODO
Colorista: Nome TODO
Cliente: Cliente TODO
Câmera: Câmera TODO
Lentes: Lentes TODO
Ano: TODO

Fade-in reveal

The only motion: opacity plus 12px of rise, 700ms ease-out, once per element (adddata-reveal; optional --reveal-delay stagger). Nothing is hidden without JavaScript, and under reduced motion everything is simply visible.

In context

A Home-style hero and a row of project cards, to judge the look as a page rather than as parts.

Hero block · Home

Brasília, Brasil

Pipa Filmes

Direção de fotografia · Color grading

Ver trabalhos Assistir ao reel

Project cards · Home / Work grid (2.39:1 work is letterboxed so the row aligns)

Longa-metragem
TODO ano
TODO Título do longa
Direção de fotografia
Publicidade
TODO ano
TODO Título do filme
Color grading
Curta · Pipa Filmes
TODO ano
TODO Título do curta
Direção · Fotografia

Site chrome

Header, mobile menu and footer, shared by every page. Static specimens here; the live versions frame this page.

Header

Solid · every page except Home · Portuguese

Pipa Filmes

Overlay · Home, over the hero · English

Pipa Filmes

Fixed. Hides on scroll down, reappears on scroll up (8px threshold, rAF-throttled passive listener). Solid: the hairline appears only once the page scrolls.
Never hides near the top, while the mobile menu is open, or while focus is inside it.
Overlay (Home): transparent for the whole hero ([data-hero]) with a faint functional scrim; solid ink + hairline once the hero has scrolled away.
Current page: paper text with a 1px amber underline and aria-current="page".
Reduced motion: no slide, no fade, state changes are instant. No JS: the header stays put (overlay scrolls away with the hero).

Pipa Filmes

E-mail ·TODO

Open state · 375px

Below lg (1024px) the nav collapses into a hamburger. The PT | EN switch stays in the bar at every width and is repeated in the menu and the footer.
Native <dialog> with showModal(): focus stays inside, Esc closes, the page behind is inert and does not scroll.
Closes on Esc, the close button or any link; focus returns to the hamburger. Subtle 240ms fade, none under reduced motion.
No JS: the hamburger is not rendered; a plain “Menu” link jumps to the footer navigation, which lists every page.

To try the real menu, narrow this window below 1024px or use the phone frame in the next section.

Footer

Contact values come from src/content/people/gui.md. Anything not filled in yet shows as a muted TODO placeholder, never a broken link.

Phone · 375px

The components page in a real 375 × 760 viewport, so the phone breakpoints trigger. Scroll inside the frame.

You are already at phone width: this page is the phone view. You can also open thecomponents page on its own.

375 × 760 · Open in a tab

Colour

Typography

Scale

Typefaces

Space & grid

Base steps

Rhythm tokens

Max widths

12-column grid

Components

Frame

Button

Tag

SectionTitle

Cinematografia

Color grading

Em produção

CreditLine

Fade-in reveal

In context

Pipa Filmes

TODO Título do longa

TODO Título do filme

TODO Título do curta

Site chrome

Header

Mobile menu

Footer

Phone · 375px