Foundation

Color Palette

The Outshift Design color system is built on a neutral, professional base with strategic accent colors for emphasis and interaction.

Light Mode — Primary Colors

Ink

#293247

Primary text, headings, logo

Slate

#67707F

Body text, descriptions

Stone

#59616B

Captions, metadata, labels

White

#FFFFFF

Page background, cards

Dark Mode — Primary Colors

Void

#0f1117

Page background

Snow

#e0e4ec

Primary text, headings

Fog

#9ca3b0

Body text, descriptions

Ash

#8a919c

Captions, metadata, labels

Accent Colors

Cyan

#00BCEB

Links, CTAs, interactive

Blue

#187ADC

Hover states, active links

Violet

#9345E1

Gradient accent

Lavender

#D2C2FF

Section backgrounds (15% alpha)

Brand Gradient

Green

#74BF4B

Amber

#F5B35C

Orange

#F09256

Coral

#EB7251

Gradients

Brand Gradient (button borders)

Card Stroke Gradient (research cards)

Section Background

Borders & Overlays

Border Light

rgba(41, 50, 71, 0.08)

Dividers, card borders

Border Medium

rgba(41, 50, 71, 0.15)

Buttons, tags, arrow links

Overlay Dark

rgba(41, 50, 71, 0.7)

Badges, overlays

Foundation

Typography

Inter Variable is used across all weights. The type scale pairs light display headings with semibold emphasis for visual hierarchy.

Typeface

Inter Variable

font-family: InterVariable, sans-serif

Font Weights

Aa

Extra Light

200

Aa

Regular

400

Aa

Medium

500

Aa

Semibold

600

Type Scale

<h1>

4em / 64px
Weight 200

Display Light

<h2>

4em / 64px
Weight 600

Display Bold

<h3>

3em / 48px
Weight 200

Section Heading

<h4>

1.2em / 19px
Weight 600

Subtitle — used for section descriptions and supporting text beneath headings

<h5>

1.5em / 24px
Weight 200
Line-height: 1.6

Lead paragraph — used for hero introductions and prominent body copy that requires extra emphasis.

<h6>

0.8em / 13px
Weight 600
Uppercase
Tracking: 1.8px

Overline Label

<p> body

1.05em / 17px
Weight 400
Line-height: 1.6

Body text is used for descriptions, card content, and general reading. It provides comfortable readability with generous line-height.

<small> caption

0.85em / 14px
Weight 400

Caption and metadata text — timestamps, reading time, copyright notices.

Components

UI Elements

Reusable components used across the Outshift Design site, from buttons and badges to interactive link elements.

Buttons

Gradient border via mask composite. Padding: 18px 24px. Radius: 40px.

Badges

SDK AI/ML Research

Overlay dark bg, white text, uppercase. Radius: 6px. Backdrop blur: 8px.

Research Card

Cards used on the Research page. 7/12 width, gradient stroke border, alternating left/right alignment, with hover lift and image zoom.

Foundational Principles

We build foundational design principles and frameworks for AI-human interaction.

Custom Cursor

A mix-blend-mode: difference cursor that inverts against the background. Scales 2x on interactive elements with a gray border ring.

Default (20px)

Hover (scale 2x + border)

Size: 20px. Blend: difference. Transition: 0.25s cubic-bezier(0.78, 0, 0.22, 1). Border on hover: solid #b4b4b4. Hides on mouseout (scale 0). Pointer: fine only.

Foundation

Spacing & Radius

Consistent spacing and border radius values create rhythm and cohesion across the interface.

Spacing Scale

xs

8px

sm

16px

md

24px

lg

32px

xl

40px

2xl

60px

3xl

80px

4xl

110px

Container

padding

0 10%

Content container uses percentage-based horizontal padding for responsive scaling.

Border Radius

6px

8px

10px

12px

16px

20px

40px

Patterns

Usage Examples

How typography and color combine in context across the site.

Hero Pairing

Design evolves fast

We evolve faster

Section Header Pattern

Initiatives

Featured Initiatives

Explore our recent projects and see how we're shaping the future of enterprise software.

Card on Gradient Background

The Future of Design Systems

How we built a scalable design system that powers hundreds of products.

5 min read Read more