Style guide · Components
Components
Every UI component in its variants, then in context. Placeholder content only (TODO).
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
ratio="16:9" + caption
ratio="2.39:1" letterbox
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
Ghost · link and button
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
Button · filter (aria-pressed)
Link · default and active
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
Hero block · Home
Project cards · Home / Work grid (2.39:1 work is letterboxed so the row aligns)