Company

Design System

Our design system is built on Geist typography, Swiss poster aesthetics, and geometric precision.

Typography

Headings

text-heading-72

Heading 72

text-heading-64

Heading 64

text-heading-48

Heading 48

text-heading-40

Heading 40

text-heading-32

Heading 32

text-heading-24

Heading 24

Body Text

text-copy-24

Copy 24 - For large body text with high line-height

text-copy-20

Copy 20 - For prominent body text with high line-height

text-copy-18

Copy 18 - For standard body text with high line-height

text-copy-16

Copy 16 - For default body text with high line-height

text-label-14

Label 14 - For single-line text with ample line-height

text-label-13

Label 13 - For compact single-line text

Colors

Brand Colors

ALEPHIC LIGHT
R226 G220 B215
#e2dcd7
ALEPHIC DARK
R35 G31 B32
#231f20
ALEPHIC ORANGE
R255 G128 B87
#ff8057
ALEPHIC BLUE
R28 G63 B253
#1c3ffd
ALEPHIC LIGHT BLUE
R164 G178 B254
#a4b2fe
ALEPHIC DARK BLUE
R14 G32 B127
#0e207f
ALEPHIC GREEN
R69 G191 B85
#45bf55
ALEPHIC LIGHT GREEN
R143 G217 B153
#8fd999
ALEPHIC DARK GREEN
R35 G96 B43
#23602b

Semantic Tokens

Semantic tokens are design system variables that represent meaning rather than specific values. Instead of using direct colors like 'black' or 'white', we use tokens like 'foreground' and 'background'. This abstraction makes theming easier and ensures consistency across the application.

Foreground

Near black

Background

Pure white

Muted

Light gray

Muted Foreground

Mid gray

Spacing Scale

Based on 4px base unit

4px
8px
16px
24px
32px
48px
64px
96px

Borders

We use borders as lines and dividers, not boxes. Focus on directional borders (top, bottom, left) for emphasis.

2px borders (standard)

Bottom border as divider (border-b-2)

Left border for emphasis (border-l-2)

Top border as separator (border-t-2)

4px borders (strong emphasis)

Bottom border for strong division (border-b-4)

Left border for strong emphasis (border-l-4)

Top border for strong separation (border-t-4)

Grid System

12-column grid with responsive gaps

1
2
3
4
5
6
7
8
9
10
11
12

Common layouts:

8 columns
4 columns
10 columns (content)

Components

Buttons

Primary

Secondary

CTA on Dark Background

Call to Action →

Back Navigation

← Back to Section

Icon Button

Glossary

Links

Subtle Link

Subtle link

Principle Cards

Used throughout company pages to display principles, values, and guidelines in a consistent, scannable format.

Standard Principle Card

Compact card with info dialog for additional context. Best for 4+ items in a grid. Used on: Engineering principles.

Example Principle

Short description that appears on the card itself. Keep it concise and scannable.

No Info Icon

This card has no info icon when showInfo is set to false.

With Icon

Cards can include an optional icon image above the title.

Expanded Principle Card

Larger card that displays all content upfront without hiding anything. Best for 2-5 items where full context is important. Used on: Values (Tenets, Voice).

Example Expanded Card

Description text that provides context for the principle or value being explained.

  • All content is visible immediately
  • No hidden information behind dialogs
  • Better for detailed explanations

Rich Content Example

Expanded cards work great in a 2-column grid on desktop, single column on mobile.

You can use rich content: Include bold text, paragraphs, and structured information.

More breathing room: The 2-column layout gives each card substantial space.

Usage Guidelines

Standard Principle Card

  • Use for 4+ items where space is limited
  • Set showInfo=false to hide the info icon
  • Optional icon prop for visual identity (48x48px)
  • Best in 4-column grid (lg:grid-cols-4)
  • Keep descriptions brief and scannable

Expanded Principle Card

  • Use for 2-5 items where full context matters
  • All information visible upfront
  • Best in 2-column grid (md:grid-cols-2)
  • Supports rich content like lists and formatted text

Full-Width Grid Layout

  • Wrap in relative left-1/2 w-screen -translate-x-1/2 div
  • Use border border-r-0 border-gray-200 on grid
  • Creates seamless edge-to-edge connected borders
  • Maintains consistent spacing with other content

Company Page Patterns

Reusable building blocks we use across company pages like Values, Engineering, Talent, Remote, and Slack.

Metric Tiles

0
Points

Less than ½ day

1
Point

1 day

2
Points

2 days

3
Points

3 days

5
Points

5 days

8
Points

Split bigger work

Stat Grid

Founded
2024
Model
Services
Headquarters
NYC

Process Stepper

  1. 1

    Kickoff

    Align on goals and scope.

  2. 2

    Explore

    Rapid discovery and options.

  3. 3

    Build

    Ship incremental value weekly.

  4. 4

    Evolve

    Iterate with real feedback.

Timeline

2024

Company founded

2025

First public launch

Data Table

PointsEffort
0< ½ day
11 day
22 days

Quote Block

“Write clearly. Ship often. Prefer proof over theory.”
Alephic

Logo Wall

CTA Band

Work with us

If our work resonates with you, let's talk.

View Open Roles

Prev/Next Navigation

Generic previous/next navigation for sequential content. Used on company pages (via CompanyPageNav) and blog posts (via PostNavigation).

Example (automatically generated based on current page):

←Previous: AboutNext: Engineering→

Usage: Use CompanyPageNav for company pages (auto-derives order), or PrevNextNav directly with custom prev/next items.

←Previous: AboutNext: Engineering→