Brand manual · v1.0 · August 2026
How this brand is built.
The rules that hold the Nice & Visual identity together: the mark, the colour, the typography, the rhythm and the social media assets. Everything here is implemented on this very website, so it also serves as proof that the system works outside a PDF.
01
The mark
A four-pointed sparkle with concave sides. It is not a new symbol: the previous website already used it as a divider between sections, and here it is promoted to being the mark. What used to be decoration becomes the one thing to remember.
Construction
Drawn inside a 100 × 100 square. The four points touch the midpoint of each side and the curves are pulled towards the centre with controls at 27 units, which gives the concave profile. It is symmetrical on both axes: it rotates without distorting, which is exactly what it does on the site.
Correct Original proportions, in brand red on a dark background.
Incorrect Never distort it. Always scale proportionally.
Incorrect Static uses are always at 0°. It only rotates when animated, at constant speed.
Incorrect Never on a background that does not separate it. Red on red does not exist.
Clear space and minimum size
- Clear space: half the width of the mark on every side. With a 40 px mark, 20 px clear all around.
- Minimum on screen: 16 px. Below that, the points disappear.
- Minimum in print: 6 mm.
The lockup
Mark plus «Nice & Visual» in Clash Display Semibold, separated by 60 % of the width of the mark. Where the person matters, «Francisco Sánchez» is added in Satoshi Medium after a thin vertical rule, at a third of the size.
Uses and prohibitions
- Do not recolour: brand red, bone or ink black only.
- No shadows, outlines, gradients or embossing.
- No boxes or frames that are not in this manual.
- Never rebuild the lockup by hand: always use the file.
02
Colour
One accent and two neutrals. The brand needs no more: when everything can be coloured, nothing stands out. The blue only appears blurred in backgrounds, never in text or interface elements.
Nice Red
- HEX
- #FF4B26
- RGB
- 255 · 75 · 38
- CMYK
- 0 · 71 · 85 · 0
- Token
- --rojo
Ink Black
- HEX
- #0C0C0E
- RGB
- 12 · 12 · 14
- CMYK
- 60 · 50 · 40 · 100
- Token
- --ink
Bone
- HEX
- #F4F1EA
- RGB
- 244 · 241 · 234
- CMYK
- 0 · 1 · 4 · 4
- Token
- --bone
Background Blue
- HEX
- #4A3CE8
- RGB
- 74 · 60 · 232
- CMYK
- 68 · 74 · 0 · 9
- Use
- Blurred only
-
Ink black prints as rich black
C60 M50 Y40 K100, not as plainK100: across large areas, flat black looks grey and uneven. - Bone is not printed: it comes from choosing a warm paper stock. On pure white stock, that 4 % of ink is laid down flat.
- Pantone. The starting point for the red is Pantone 172 C, the closest in the range. It must be confirmed against a physical guide before anything goes to press: no equivalence calculated from a HEX value is reliable on paper.
Proportion and contrast
- Rough split: 70 % neutral, 25 % contrast, 5 % red. Red marks things; it does not decorate them.
- Body text is always bone on ink or ink on bone. Both combinations exceed WCAG AAA contrast.
- Red is never used for long text. Headlines, the mark and small details only.
03
Typography
Two variable families, both from Indian Type Foundry and free for commercial use. They are served from this domain, not from a CDN: 70 KB in total, no third-party dependency and no data processing.
Clash Display
Satoshi. Body copy, labels, forms and everything that actually has to be read.
Rules
- Clash Display is never used below 20 px. At small sizes it loses definition.
-
Section labels are Satoshi 700, 12 px, uppercase, with
letter-spacing: 0.18em. Without that spacing the capitals clog up. - No italics: neither family ships them, and faking them shows.
- Where these fonts cannot be licensed, the substitutes are Archivo for headlines and Inter for body copy.
04
Scale and rhythm
Sizes are fluid: calculated with clamp() between a mobile minimum and a
desktop maximum, with no abrupt jumps at intermediate sizes.
| Token | Mobile | Desktop | Used for |
|---|---|---|---|
--t-3xl | 48 px | 152 px | Hero and contact headlines |
--t-2xl | 40 px | 80 px | Section headlines |
--t-xl | 28 px | 44 px | Service names, figures |
--t-l | 20 px | 26 px | Standfirsts and quotes |
--t-m | 16 px | 18 px | Body copy |
--t-s | 14 px | Metadata and forms | |
--t-xs | 12 px | Small-caps labels | |
Grid and margins
- Maximum content width: 1360 px, centred.
-
Side margin: from 20 px on mobile to 72 px on desktop
(
clamp(1.25rem, 4vw, 4.5rem)). -
Space between sections: from 80 px to 176 px
(
clamp(5rem, 10vw, 11rem)). This is what sets the pace of the page. - Radii: 999 px on buttons and pills, 14–18 px on cards and panels, 10 px on images.
05
Components
The pieces that repeat. Each has one correct form; if a new variant is needed, it gets added here before it gets used.
Primary button
Bone background, ink text, full radius. On hover the red rises from below and the text turns white.
ExampleSecondary button
Outline only. Two primary buttons never sit together: the correct pair is one of each.
ExampleSection label
Red mark plus small-caps text. It opens every section and is what ties the symbol to the system.
Example
Text link
No underline at rest. On hover it draws left to right, and on exit it retracts from the other side.
Example06
Motion
Motion is part of the identity, not decoration added at the end. Everything comes from two curves and three durations.
| Parameter | Value | When |
|---|---|---|
| Ease out | cubic-bezier(.22, 1, .36, 1) | Almost everything: reveals, buttons, menus |
| Symmetrical ease | cubic-bezier(.65, 0, .35, 1) | Long loops, such as the hero aurora |
| Fast | 300–400 ms | Colour and state changes |
| Medium | 500–600 ms | Fills, sweeps, mobile menu |
| Slow | 900–1000 ms | Scroll reveals and split headlines |
| Stagger | 55–80 ms per item | Words in a headline, cards in a grid |
Rules
- Only
transformandopacityare animated. Anything else costs frames. - Nothing bounces. The brand is not friendly, it is precise.
-
Everything switches off under
prefers-reduced-motion. Anyone with «reduce motion» enabled sees the site still and complete, not broken.
07
Social media
Assets produced and reference sizes. All of them are generated from HTML templates and exported at double resolution, so remaking them when a platform changes its dimensions takes minutes, not an afternoon.
| Asset | Size | Status | Notes |
|---|---|---|---|
| Personal profile cover | 1584 × 396 | Produced | No text. The profile photo covers the first 340 px on desktop and mobile crops the sides: everything that matters sits in the centre-right band. |
| Profile photo | 400 × 400 | Produced | Cut-out portrait on a brand background, in ink, bone or red. It is cropped to a circle: the shoulders bleed off the sides and bottom to fill it. |
| Company page cover | 1128 × 191 | Produced | With lockup and descriptor. The first 262 px are left clear for the logo LinkedIn overlays. |
| Company page logo | 1000 × 1000 | Produced | Mark at 56 % of the canvas. Any larger and the points get lost when cropped. |
| Link preview | 1200 × 630 | Produced | In Spanish and English. Exported as JPEG: as PNG it weighed 700 KB, and some platforms discard oversized previews. |
The @nice_and_visual account has been dormant since 2023. These sizes are defined for the day it is picked up again as a project showcase, but no asset has been produced yet: defining a format is not the same as having content.
| Asset | Size | Status | Notes |
|---|---|---|---|
| Profile photo | 320 × 320 | Pending | The company logo rescaled. Cropped to a circle. |
| Square post | 1080 × 1080 | Pending | Project cover. Title in Clash Display, client and discipline in small caps below. |
| Portrait post | 1080 × 1350 | Pending | Preferred format: it takes up more of the phone screen. This is the one for project mockups. |
| Story and Reel | 1080 × 1920 | Pending | Safe area: 250 px clear at the top and 320 px at the bottom, which is what the interface covers. |
| Highlight cover | 1080 × 1920 | Pending | Just the mark centred on ink. It is seen inside a 100 px circle. |
Common rules
- Ink background, always. The brand does not live on white in social media.
- One message per asset. If two are needed, that is two assets.
- No text in the area each platform crops, which is different on every one.
- Grain and aurora stay: they are what makes an asset recognisable without a logo.
08
Files
The mark in the formats that are actually needed. The SVG is the master: every other format comes from it, never the other way round.
| File | Format | Used for |
|---|---|---|
marca.svg | SVG | The sparkle alone, in currentColor: it inherits the colour of wherever it is placed |
logo.svg | SVG | Full horizontal lockup |
favicon.svg | SVG | Browser tab icon |
icono-512.png | PNG | App and desktop icon |
apple-touch-icon.png | PNG | iOS icon when added to the home screen |
Before sending the logo to a third party
The text in logo.svg is live text, not outlines. If it goes to a printer
or another studio, open it in Illustrator or Figma and export it with the text
converted to paths. Otherwise it will be set in a different typeface and stop being
the logo.