Sociotype
light theme
Independent Style Review

Sociotype-Style Design System

The Sociotype design system uses a light-themed visual language. The primary brand color is Ink Black (#000000); text is Ink Black (#000000) on a Canvas White (#ffffff) background. Typography is set in Main Onsite, Onsite and Avec Sharp. This DESIGN.md contains 5 color tokens and a 5-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of Sociotype.

Color Palette

FONTS

Typography

Component Previews

Independent Style Review

Sociotype-style design system: color codes and fonts

Theme
light
Primary color
Ink Black (#000000)
Fonts
Main Onsite, Onsite, Avec Sharp, Ceno, Meso, Gestura, Rework
Source
socio-type.com

Editorial White Canvas

Sociotype presents as a serious, editorial platform for typography, characterized by an expansive white canvas, precise black typography, and highly controlled spacing. Interaction elements are almost entirely ghosted or underlined, relying on a subtle shift to black for active states. The visual weight is carried by the large, expressive font specimens and carefully structured content blocks, rather than decorative colors or heavy UI components.

Original style summary

Sociotype color codes

ColorHEXCSS tokenUsage
Canvas White#ffffff--color-canvas-whitePage backgrounds, card surfaces, primary text on dark hero sections
Ink Black#000000--color-ink-blackPrimary text, borders, active states for ghost buttons and navigation, accent markings
Medium Gray#818181--color-medium-grayMuted text, secondary information, placeholder text, inactive link borders
Light Gray#d6d6d6--color-light-graySubtle dividers, borders between content sections
Faded Gray#9d9d9d--color-faded-grayTertiary text, list item borders

Which fonts does Sociotype use?

FontWeightsFallback
Main Onsite400
Onsite400system-ui, sans-serif
Avec Sharp400serif
Ceno400serif
Meso400serif
Gestura400serif
Rework400serif
RoleSizeLine heightToken
caption11px1.38--text-caption
body14px1.29--text-body
heading26px1.13--text-heading
display-sm40px1--text-display-sm
display251px1.25--text-display

How do I use this DESIGN.md?

  1. Download the DESIGN.md file and place it in your project root.
  2. Tell Claude Code, Cursor, v0 or Google Stitch: “Design the UI following the rules in DESIGN.md.”
  3. Use Fork & Customize to adapt the colors, fonts or components to your own brand.

Raw DESIGN.md file →

This page is MakeMyMD's independent review of the colors, typography and spacing visible on Sociotype's public website (socio-type.com). It is not an official brand guideline; MakeMyMD is not affiliated with or endorsed by Sociotype. The Sociotype name and trademarks belong to their owner; no brand imagery, logos or copy are used. Rights holders can request removal at [email protected].

Design Systems

Similar design systems