Skip to content

VisualDesignSystem.md

Latest commit

 

History

History
383 lines (246 loc) · 3.95 KB

VisualDesignSystem.md

File metadata and controls

383 lines (246 loc) · 3.95 KB
Raw

Complete Cognatix Typography + Spacing System

Pure Tailwind defaults

Large type, organic intelligence, exuding confidence without being pedantic.

COGNATIX TYPE SYSTEM

Font Size Scale

text-xs → 12px

text-sm → 14px (UI controls optional for sage-tech.ai) text-base → 16px text-xl → 20px

text-2xl → 24px text-3xl → 30px text-4xl → 36px

text-5xl → 48px text-6xl → 60px text-7xl → 72px

Limit sizes per screen if possible (3 max).

Line Height Pairing

Use these consistently:

text-xs   leading-5

text-base leading-7
text-xl   leading-8

text-2xl  leading-tight
text-3xl  leading-tight
text-4xl  leading-tight

text-5xl+ leading-tight

Hero headings may go tighter:

leading-[1.05]

Tracking Rules

Headings → tracking-tight
Body → tracking-normal
Labels / small caps → tracking-wide

Hero headings may use sub-pixel refinement:

tracking-[-0.01em] or tracking-[-0.02em]
leading-[1.05]

Avoid overusing tracking-wide — only for metadata or UI labels.

TYPOGRAPHY ROLES

Hero

text-6xl or text-7xl
tracking-tight
leading-tight or leading-[1.05]

Subhead:

text-xl
leading-8
opacity-80
max-w-xl

CTA:

text-base

Section Headers

Primary:

text-4xl
tracking-tight
leading-tight

Secondary:

text-3xl
tracking-tight
leading-tight

Card titles:

text-2xl
tracking-tight

Body Text

Standard:

text-base
leading-7

Lead paragraph:

text-xl
leading-8
opacity-80

Small metadata:

text-xs
tracking-wide
opacity-60

SPACING SYSTEM (IMPORTANT)

Use an 8-point rhythm with larger jumps for sections.

Micro Spacing

gap-2  → 8px
gap-4  → 16px
gap-6  → 24px
gap-8  → 32px

Element Spacing

Typical vertical stacks:

space-y-4
space-y-6
space-y-8

Headline blocks often:

space-y-6

Section Padding

Sections should rarely use less than:

py-16

Small sections:

py-12

Standard sections:

py-16

Hero / major sections:

py-24

Large statement sections:

py-32

Whitespace communicates confidence.

Do not be afraid of large padding.

CONTAINER WIDTHS

Containers control readability — typography should not stretch full width.

Readable content:

max-w-2xl
max-w-3xl

Marketing sections:

max-w-5xl
max-w-6xl

Full layout:

max-w-7xl mx-auto px-6

Hero text usually looks best around:

max-w-2xl or max-w-3xl

BUTTON SIZING

Primary CTA:

px-6 py-3
text-base
font-medium
rounded-lg

Secondary:

px-4 py-2
text-sm

Avoid oversized pill buttons unless stylistically required.

VERTICAL RHYTHM EXAMPLES

Hero Block

space-y-6

Section Header + Content

space-y-10

Cards Grid

gap-6

VISUAL HIERARCHY PRINCIPLES

The system should feel:

  • Calm
  • Architectural
  • Intentional
  • Spacious
  • Confident

If something feels off, usually:

add more spacing, not more styling

GOLDEN RULES

  1. Limit font sizes per screen (3 max).
  2. Prefer whitespace over borders.
  3. Use opacity instead of extra colors for hierarchy.
  4. Keep headings tight, body relaxed.
  5. Consistency beats precision.
  6. Containers define readability.
  7. Spacing communicates confidence.

DESIGN NORTH STAR

Cognatix should feel like:

  • A precision instrument
  • A calm expert in the room
  • Deep intelligence made visible
  • Complexity rendered understandable

Never:

  • Busy
  • Decorative
  • Trend-driven
  • Loud
  • Playful

Clarity over ornament.

RESULTING AESTHETIC

This system naturally produces:

Apple hardware page × Stripe × Enterprise SaaS

With an underlying tone of:

Computational calm.

TODO

Alliance font https://www.youworkforthem.com/font/T9667/alliance/buying/

Similar style directions

Apple product pages, Stripe, Linear, Vercel

——

A beautifully organized engineering notebook

————