Visual system

One family, two colors, a four-pixel ladder. Prose carries the message, compact headings organize it, and every specimen on this page is the production component itself.

Family
Archivo
Surfaces
Paper and ink
Weight ceiling
600

Type

Seven roles, one family. Hierarchy comes from size, position and contrast; weight never exceeds 600.

  1. hello@gaelcado.com

    text-contact

    Size
    clamp(2.25rem, 1.9rem + 1.6vw, 3.625rem)
    Leading
    0.96
    Tracking
    -0.022em
    Weight
    500

    Reserved for the contact address. The only scale break.

  2. Tech-obsessed, AI-augmented web developer

    text-headline

    Size
    clamp(1.75rem, 1.58rem + 0.72vw, 2.25rem)
    Leading
    1.05
    Tracking
    -0.018em
    Weight
    500

    Hero H1, project titles, the opening of this guide.

  3. I design and ship products end to end, connecting interfaces, infrastructure, automation and creative code.

    text-body-large

    Size
    clamp(1.25rem, 1.13rem + 0.52vw, 1.5rem)
    Leading
    1.32
    Tracking
    -0.006em
    Weight
    440

    Narrative introductions, the selected project in the ring, sheet titles.

  4. A desktop workspace that connects AI-assisted editing, local files and focused review in one coherent product flow.

    text-body

    Size
    clamp(1.0625rem, 1.045rem + 0.075vw, 1.125rem)
    Leading
    1.55
    Tracking
    0
    Weight
    420

    Reading copy and project names in indexes.

  5. 100+

    text-metric

    Size
    clamp(2rem, 1.75rem + 1vw, 2.75rem)
    Leading
    1
    Tracking
    -0.022em
    Weight
    520

    Homepage statistics. Numeric, tabular.

  6. Product engineering

    text-heading

    Size
    clamp(0.875rem, 0.84rem + 0.15vw, 1rem)
    Leading
    1.25
    Tracking
    -0.004em
    Weight
    600

    Structural captions and group titles. Deliberately compact.

  7. Full-stack application

    text-label

    Size
    clamp(0.75rem, 0.732rem + 0.075vw, 0.8125rem)
    Leading
    1.35
    Tracking
    0.018em
    Weight
    580

    Controls and metadata.

Color

Two structural colors. Every other role is a transparency or a mix of the two, so the system reads the same on paper and on ink.

Paper

#f2f2edBackground and open field.

Ink

#11120fText and committed surfaces.

  • Ink muted

    rgb(17, 18, 15, 0.62)Secondary copy.

  • Line

    rgb(17, 18, 15, 0.2)Interactive borders.

  • Separator

    rgb(17, 18, 15, 0.14)Structural dividers.

  • Muted

    color-mix(in srgb, var(--ink) 5%, var(--paper))Secondary state.

  • Ink muted, inverse

    rgb(242, 242, 237, 0.62)Secondary copy on ink.

  • Line, inverse

    rgb(242, 242, 237, 0.22)Borders on ink.

  • Separator, inverse

    rgb(242, 242, 237, 0.16)Dividers on ink.

Space

A ten-step ladder on a four-pixel base. Gutters, measures and section intervals are shared tokens; components never invent page-level padding.

  1. space-10.25rem
  2. space-20.5rem
  3. space-30.75rem
  4. space-41rem
  5. space-51.5rem
  6. space-62rem
  7. space-73rem
  8. space-84rem
  9. space-96rem
  10. space-108rem

  • Page gutter

    clamp(1.125rem, 2.2vw, 2rem)

    Outer inset of every surface. Tightens below 44rem.

  • Leading offset

    calc(2.75rem + var(--space-7))

    Where desktop copy starts: aligned with the primary navigation.

  • Reading measure

    36rem

    Maximum width of long-form copy.

  • Wide composition

    96rem

    Immersive stages and balanced compositions.

  • Footer measure

    100rem

    The contact footer alone.

  • Section interval

    clamp(var(--space-9), 8vw, var(--space-10))

    Vertical rhythm between instruments and compositions.

  • Primary interval

    clamp(var(--space-8), 7vw, var(--space-9))

    Tighter cadence for the opening narrative.

Shape

Large fields and hard edges. Radius is reserved for physical keycaps and rendered material; filters and information modules stay rectilinear.

  • Rectilinear

    0Modules, filters, media frames.

  • Key

    0.3remPhysical keycaps in the technology console.

  • Module

    0.875remRendered material modules only.

Controls

One button primitive with named variants, one tag, one link. Every control meets a 44 pixel target and presses to 0.96.

Actions

Selection

Tags and links

Next.jsElectronTypeScript
Explore projectshello@gaelcado.com

Interactive underlines draw from the left on hover and focus. Persistent underlines sweep once. Arrows rotate 45 degrees to confirm the target. Focus rings use the current color at a 0.3rem offset.

Icons

Untitled UI narrow arrows and a handful of states, sized in em so they scale with the text they sit beside.

  • Arrow up right
  • Arrow down right
  • Arrow left
  • Arrow right
  • Arrow up
  • Check
  • Close
  • Menu
  • Plus
  • Refresh

Motion

Inertia and continuity communicate browsing. Exits are shorter than entrances, frequent interaction stays on transforms and opacity, and reduced motion gets instant state changes.

Exit

150msLeaving states. Always shorter than entering.

Enter

230msArriving states, hover and focus feedback.

Move

520msPosition changes and continuity between views.

Ease out

cubic-bezier(0.16, 1, 0.3, 1)The single curve for exits, entrances and moves. No bounce, no elastic.

Identity

A dot matrix GC mark on square cells. It is drawn in the current color, so it sits on paper or ink without a variant.