Style guide
Colour, type and motion
Every value here is a global design token: change it once and it changes everywhere. Sizes are Desktop / Tablet / Phone (breakpoints 1200 / 810 / 390).
Colour
- Lime#F2EFE8Background
- Plaster#E6E0D3Alternate sections
- Paper#FBF9F4Cards, drawings
- Ink#1D1E22Text, lines, the block
- Muted#5F5C56Secondary text
- Albero#E3A33BThe sun, and only the sun
- Albero deep#835410Sun colour for text
- Slate#7D82A3Every shadow
- Night#171A2ADark sections, night
Type: Host Grotesk, one family
Carvajal Brandt
Casas
Selected work
Casa del Naranjo
Every project starts with a sun study of its plot.
Walls are 45 cm solid brick with lime render.
Houses and renovations since 2009
LIVE FROM CÓRDOBA
Components
Motion
One curve for everything: cubic-bezier(.2, .7, .1, 1), a spring with stiffness 180 and damping 30. Always from below, never from the sides. With reduced motion, nothing moves.
| Effect | What moves | Duration | Technique | Demo |
|---|---|---|---|---|
| Appear | opacity 0 → 1, y 24 → 0, blur 6 → 0 | 0.7 s | Effects → Appear | |
| Lines | each line rises out of a mask, 60 ms apart | 0.9 s | Text Effect · Appear by line | |
| Image reveal | clip-path inset from the bottom, scale 1.08 → 1 | 0.9 s | Appear · Clip + Scale | |
| Hover | image scale 1.03, arrow moves 4 px, underline grows | 0.4 s | Hover effect / variants | |
| Sticky | process cards stack under the header | — | Position: Sticky | |
| Page | a night panel wipes up, then away | 0.42 s | Page Effects → Wipe | |
| Cursor | photo preview follows the pointer on lists | lerp 0.18 | Cursor + hover variant |
Photography
One grade for every photo: 80% saturation (55% in skies), a matte curve with blacks at 5%, slate in the shadows, warm lime in the highlights and a fine grain. The script is in tools/grade.py; run your own photos through it and they will match. Set a focal point on each image so the crop holds on phones.