GO Analog
Icons →Controls →Tactile layer →
GOIAN Design System

A precision instrument you can feel.

The shared foundation for every GOIAN product — warm ink & paper, one sunset accent per app, tactile controls, and an instrument’s calm. This page is the foundation you review and comment on; the hyper-creative art direction gets built on top of it in /design-build.

Tailwind v4shadcn/uiNext.js 16Sunset accents
Switch the theme
Use the top-right switcher — watch the accent, rings, and charts retheme. The bones stay identical.
Toggle light / dark
Both modes are WCAG-AA verified. Sunset accents take ink text by rule.
Comment anywhere
Point me at any section → component (e.g. “Forms → Select”) and we’ll shore it up.
Foundations

Color

Foundation neutrals — shared across every app
Background
--background
Foreground
--foreground
Card
--card
Muted
--muted
Muted FG
--muted-foreground
Border
--border
Primary
--primary
Secondary
--secondary
Accent
--accent
Destructive
--destructive
Ring
--ring
Brand
--brand
Active theme quartet — chart-1…5 (retheme per app)
Chart 1
--chart-1
Chart 2
--chart-2
Chart 3
--chart-3
Chart 4
--chart-4
Chart 5
--chart-5
Foundations

Typography — three voices

Instrument Serif · the statement

Build like you mean it.

Serif, ≤ ~10 words. One weight — stress rides on the italic.

DM Sans · the read

When there’s something to actually read — a couple of sentences, a paragraph, an idea worth sitting with — the sans carries it. Soft, even, quiet, so the words do the work.

JetBrains Mono · the machine reports
RISE 6:28A · SET 8:50P
TEMP 86° · UV 2 · HUM 55%
WIND 17 NE · 30.1 INHG

GO•ANALOG ▘▝▖▗

Emphasis — one weight, so stress is the italic (+ optional accent)

How it’s built

Built for clarity, systems & scale.

Accent italic — hero lines

The rhythm should feel inevitable.

Plain italic — everywhere else

Say the hard thing, in love.

No bold cut exists — emphasis rides entirely on the italic. Lift a word or two; reserve the accent color for hero lines. It’s a scalpel, not a highlighter.

Subtitle — JetBrains Mono, uppercase, tracked

How I think

Chapter one

Sunset scene

Larger · text-sm

Type scale

Subtitle 12 · mono caps

Display 48

Heading 30

Subheading 20

Body 16 — the default reading size for DM Sans.

Caption 14 — secondary & supporting text.

MONO 12 — DATA / LABELS / METADATA

Header ladder — Instrument Serif at every step (give sizing feedback per row)
Display · text-6xl · 60px

A precision instrument you can feel

H1 · text-5xl · 48px

The instrument you can feel

H2 · text-4xl · 36px

Warm ink, paper, and one quiet accent

H3 · text-3xl · 30px

One accent per app

H4 · text-2xl · 24px

Tactile controls, an instrument’s calm

H5 · text-xl · 20px

Headings that hold the page

H6 · text-lg · 18px

Small titles, same voice

In context — the hierarchy in a real read

Field notes · 03

A precision instrument you can feel

Warm ink, quiet calm, and controls that push back — the case for a design language you operate rather than merely look at.

Every GOIAN product shares one foundation: warm ink on paper, a single accent chosen per app, and tactile controls that respond under the thumb. The serif carries the statements; the sans carries the read; the mono carries the machine.

Why one accent per app

Foundation stays fixed so the system feels like one family. The accent — and the chart quartet with it — is the single dial each app turns to claim its own hour of day, from sunrise to after-sunset.

“A powerful engine under quiet, tactile controls.”

Small headings, same voice

Down at subsection scale the serif keeps its character without shouting. Sizing is the lever — the voice is constant. Tune the steps until the rhythm from headline to caption feels inevitable.

Foundations

Shape & Elevation

Radius (sharp-leaning)
sm
md
lg
xl
Tactile cap
Glow — follows your cursor (hover)
Hover across me
Grain surface
Matte, paper-like
Foundations

Pixel iconography

The 80s-pixel icon track the brand system reserved — recolored to currentColor so every glyph inherits the ink and themes with the scene. Browse the full set + dot-matrix form controls →

A sampling — inherits ink, themes with the scene
Inherited color
Crisp at any size
Components

Actions

Button — variants
Sizes · with icon · states
Toggle · ToggleGroup
Components

Forms

Components

Data Display

Net volume from sales
This month
+12%
$32,234.22
UPDATED 18:42 · OTTAWA
IS
Ian Schneider
ian@goian.co
ActiveOwner
BUILD62%
x
AppPaletteStatus
ChronicleSunriseThemed
GoBasecampAug. SunsetThemed
go-brain—TBD
Skeleton (loading)
Components

Feedback

Components

Overlays

Base

More primitives — the complete set

The full shadcn base, themed by GO Analog tokens. The bespoke tactile signature components (dials, embossed readouts) get built on top in /design-build.

Chart — uses the active scene quartet
Calendar
July 2026
Input OTP
Resizable panels
Drag the handle
Panel B
Collapsible · Context menu · Drawer
Right-click me
Aspect ratio
16 / 9
Also in the base (installed · demoed in /design-build)
carouselcommandmenubarnavigation-menusidebar