Clear space
1× VKeep at least one capital-V height clear around the wordmark and the globe.
Identity · taken from the live site
VoarCom Vlar
Atmosphere · Movement · Perspective
01 · Marks
The same lockup as the site.
Helvetica Neue, two lines, second line indented. Header, hero and footer share that drawing. The globe is the VCV seal.
VoarCom Vlar
VoarCom Vlar
Minimum size
96 / 32 pxWordmark: 96px wide. Globe: 32px in UI and 96px in exported artwork.
Watermark
6–9%Use the black or white PNG at 70–85% opacity, 24–40px from an output edge.
02 · Palette
The five CSS tokens.
These are :root on the live site. Type on the hero is #FFFFFF. Body paragraphs on paper use #6F6C66.
- Ink
- Paper
- Paper Bright
- Smoke
- Accent
| Name | Hex | RGB | Token | On the site |
|---|---|---|---|---|
| Ink | 17, 17, 15 | --ink | Text. html background. Wordmark on paper. | |
| Paper | 232, 229, 222 | --paper | body background. | |
| Paper Bright | 243, 240, 233 | --paper-bright | Work, about, show. Type on contact and footer. | |
| Smoke | 139, 137, 130 | --smoke | Labels. Body copy on paper is #6F6C66. | |
| Accent | 198, 80, 50 | --accent | Selection, arrows and micro-interactions. Never a large fill. |
03 · Type
Helvetica Neue.
The name, the nav, the titles and the body are one family. Iowan italic is only for emphasis inside a sentence — never “Com Vlar”.
Independent visual studio · Portugal
VoarCom Vlar
Atmosphere · Movement · Perspective
About
A visual studio shaped by atmosphere, movement and perspective.
Based in Portugal, working worldwide. We create cinematic films for places, people and experiences.
| Role | Face | Setting | Use |
|---|---|---|---|
| Wordmark | Helvetica Neue | 700 / 0.72rem / 0.025em / uppercase | Header. Two lines, second line indented 1.35em. |
| Display | Helvetica Neue | 500 / −0.075em / uppercase / line-height 0.76 | Hero name, contact title, featured titles. |
| Title | Helvetica Neue | 500 / −0.07em / sentence case | About heading. |
| Label | Helvetica Neue | 650 / 0.64–0.66rem / 0.12–0.17em / uppercase | Nav, kicker, signature, eyebrows. |
| Body | Helvetica Neue | 400 / ~1.05rem / 1.6 leading / #6F6C66 | About and card copy. |
| Emphasis | Iowan Old Style italic | 400 italic via em | Inline emphasis only. Never the name. |
04 · Motion
Movement has a reason.
Motion reveals scale, direction or a new frame. It never delays navigation and never competes with the film.
| Behaviour | Desktop | Touch | Reduced motion | Use |
|---|---|---|---|---|
| Interface response | 220–280ms · ease | Immediate feedback | No interpolation | Navigation, pills, links and small colour changes. |
| Image movement | 420–900ms · cubic-bezier(0.2, 0.7, 0.2, 1) | Visibility-led only | Static poster | Scale, grade and media reveals. Never decorative looping UI. |
| Cinematic hero | 250svh scroll sequence | Same beats, lighter effects | One fixed 100svh frame | The homepage opening only. Do not repeat it inside projects. |
220ms · Interface500ms · Reveal900ms · Image
05 · Media
Let the frame lead.
Photography and film carry the atmosphere. The interface identifies the medium, preserves the crop and gets out of the way.
PhotoVideo| Kind | Desktop | Mobile | Behaviour |
|---|---|---|---|
| Project cover | 16:9 | 4:5 | One decisive frame with category and context. |
| Vertical film | 9:16 in a compact grid | 9:16, one or two columns | Hover to play with a mouse; play when visible on touch. |
| Photo / video label | Top-right glass badge | Same badge, reduced scale | Always identify the medium without covering the subject. |
| Performance | Load video on intent | Load after 55% visibility | Pause and unload off-screen; keep a local WebP poster. |
06 · Rules
Don’t redraw it.
Reuse the shared shell, fine rules and live components. Atmosphere changes by project; the identity system does not.
| Token | Value | Use |
|---|---|---|
| Shell | max 92rem | Primary alignment for text, media, navigation and footer. |
| Gutter | clamp(2rem, 5vw, 6rem) | Shared horizontal breathing room across desktop widths. |
| Mobile breakpoint | 48rem | Collapse grids and remove expensive glass effects. |
| Rule | 1px | Structure with fine lines instead of boxes or heavy shadows. |
Do
- Set the name in Helvetica Neue, two lines, second line indented.
- Use the globe PNG already in the header.
- Stay inside the five tokens in :root.
- Use accent for selection, arrows and small interaction cues.
- Reuse the live glass bar, pill, caption and media badges.
Don’t
- Do not set “Com Vlar” in italic serif. That is not on the site.
- Do not stretch the lockup or change the indent.
- Do not introduce a third typeface.
- Do not paint large surfaces in accent.
- Do not autoplay project videos on desktop without hover intent.