• Date

    2019
  • Category

    • Identity
    • Computational
    • Web
  • Industry

    • Finance
    • Technology
  • Client

    Capital Technologies
  • Design

    Nio Ono
  • Development

    David Lu

Introduction

Capital is a new non-dilutive funding platform for startups that aims to bring together the cultures of Silicon Valley and high finance. We were brought in to develop an initial graphic identity system for the company's platform launch. This work was limited by an aggressive timeline of eight weeks, so our priorities were clarity, simplicity, uniformity, and ease of use by Capital’s product design team.

Concept

The model at the heart of Capital’s identity is a hierarchy of abstractions. This concept is inspired by both their product—which builds a definitive rating on successive layers of understanding starting with raw data—and corresponds to the structure of their visual system—which is built from layers of subsystems like color and typography and builds up to a singular symbol.

Capital’s Objectivity is a product of Capital’s distinctly technologic approach to analysis. That approach speaks to their sophistication, which in turn has a calming effect on operators. An expression of institutional credibility builds on that effect. Trust is built as a result of that credibility. Trust derives from objectivity.

Capital concept diagrams

Symbol

Capital’s symbol is a rectilinear fractal that is easy to construct and scales to any size or context. Four key messages inspire its form:

  • A rhombus stands out in a field of rectangles, while remaining consistent with their 90° angles.
  • By infinitely repeating its form, the symbol suggests how simple high-level conclusions can be built from complex data.
  • The objectivity of this shape gives it a timeless form that can be embellished to suit more transient communicative needs.
  • Our symbol is inspired by the grids of ledgers and spread-sheets that form the graphic language of finance.

The symbol can scale automatically to any size, adjusting its internal complexity to balance visual interest and legibility. To ensure the right level of detail, we developed a web application to generator pixel-perfect symbols at any specified size.

Capital logo

The symbol may be rendered with strokes, fills, or a combination. For combination variants, different colors may be used for filled and outlined shapes.

Capital logo

Logotype

When used in isolation, the logotype and symbol can be combined in vertical or horizontal configurations that create a focal point where the corner of the symbol meets the logotype and uses precise alignment to call attention to the geometry of the symbol. Where the symbol appears near the name of the company prominently spelled out in text, we avoid using this logotype integration.

Grid

The grid system unifies Capital’s visuals across media, scales, and audience. It is inspired by both the utility and aesthetics of spreadsheets. This provides a comforting and familiar aesthetic for people who work in finance and supports the kind of density that empowers them in using the product.

The grid is actually a composite of three distinct grids: A column grid, which is proportionate to the width of the page; a baseline grid, which is used to align type and establish vertical rhythm; and rows, which are multiples of baselines and used to organize larger elements. The grid tool allows you to construct a grid for ytheir specific composition size.

The rigidity of the grid allows for play and variety in its usage. When composing a page, we want designers to honor the innate structure of the information while aiming for visual tension and asymmetry, and to consider the gesture made by the arrangement of elements. This creates more energetic compositions and directs the eye.

Capital type

Type

GT Zirkon preserves the precision and sharpness of the rest of the system, but introduces humanistic geometry that softens things. Its deep ink traps and contrasting strokes create visual interest at larger scales. These details, however, disappear at smaller sizes, where it can perform well in the product or for running text.

Capital’s type scale is simple while serving a variety of needs and providing a consistent feel from larger styles down to smaller ones. Using lighter weights at larger sizes expresses sophistication and precision and maintain a similar grain to the heavier smaller sizes.

Capital type

Color

Capital’s color system is driven primarily by the information design considerations of the product. The palette includes a diverse range of hues intended to reflect the tone of the core brand color gold. The functional use of color in the Bloomberg Terminal and the IBM ThinkPad were significant influences.

Capital color palette

Stationery

Capital letterhead
Capital business card

Website

Capital logo

Web App

Capital logo

Guidelines

Capital logo