CoinPost Terminal

CoinPost Terminal Design Rules

This page turns `coinpost.ai`'s main rail and section-splitting pattern into an executable ruleset. Outer dividers stay full-bleed, content stays inside a `1660px` rail, the light theme stays pure white, and texture is limited to the empty space.

View rule details

Main rail: 1660px
Buttons: 36px
AI chip: 12px / 48px

Panel Rules

A focus object can stand out. The whole rail should not.

1660px

01 Typeface

Typeface and Size Scale

This set defines the page voice. CoinPost Terminal relies on stable sans, restrained mono, and a fine enough hierarchy, not decorative type.

Notes

Body copy, headings, buttons, and navigation use `Geist Sans` by default. Monospace is reserved for numbers, paths, timestamps, sequence ids, and code so the page does not turn into a fake terminal.

This version expands the scale to `display / h1 / h2 / h3 / h4 / body.l / body.m / body.s / label / overline / caption / mono`, twelve levels in total, enough for docs, feeds, and explanatory blocks.

Examples

CoinPost Terminal

Design rules have to explain structure first

Section headings need to cut the page cleanly

Card titles and module titles

Small module titles and explainer group titles

Long-form and explainer copy use 16px / 28px.

Default body copy uses 14px / 22px.

Compact lists and parameter items use 13px / 20px.

LABEL / TAB / BUTTON

OVERLINE / SECTION / TERMINAL NOTE

caption / helper / timestamp

GET /v1/topics?limit=20

Parameters / Class

Primary font Geist Sans --cpt-font-sans

Monospace font Geist Mono --cpt-font-mono

Display 48 / 52 · 700 .cpt-type-sample--display

H1 32 / 38 · 700 .cpt-type-sample--h1

Body 14 / 22 · 400 .cpt-type-sample--body-m

H4 / Body S 18 / 24 · 600 · 13 / 20 .cpt-type-sample--h4 / .cpt-type-sample--body-s

Label / AI Tag 12 / 16 · 600 .cpt-type-sample--label / .cpt-type-sample--overline / .cpt-ai-chip__text

02 Palette

Palette and Theme Tokens

Colors are managed as semantic tokens. In light theme the brand color is tightened to `#1C809B` so it does not feel washed out or too heavy.

Notes

Background returns to pure white. Texture is only a terminal hint in empty areas and stays out of content containers. Standard modules use flat fills and thin borders instead of gradients.

The AI gradient is reserved for icons and local hover states instead of coloring whole panels.

Examples

brand.primary #1C809B

bg.soft #F5F7FA

border.default rgba(22,31,49,0.12)

ai.gradient #A655F7 → #24D0EB

Light Neutrals

bg.base #FFFFFF

bg.panel #FFFFFF

bg.soft #F5F7FA

text.primary #161F31

text.secondary hsl(240 4% 32%)

text.tertiary hsl(240 4% 46%)

border.default rgba(22,31,49,0.12)

Dark Neutrals

bg.base.dark #18181B

bg.panel.dark #09090B

bg.soft.dark #27272A

text.primary.dark rgba(255,255,255,0.94)

text.secondary.dark rgba(255,255,255,0.70)

text.tertiary.dark #A1A1AA

border.default.dark rgba(255,255,255,0.10)

Success teal-500 / #44B8A7

Warning orange-500 / #F27313

Error rose-500 / #EB3E5B

Info blue-500 / #65A0FD

Orange warning family

600#E35706

500#F27313

400#F38F36

300#F7BB77

Blue info family

600#437DFC

500#65A0FD

400#9AC4FE

Rose error family

600#D91A45

500#EB3E5B

400#F16E81

300#F49FA9

Teal success family

600#359489

500#44B8A7

400#53D2BE

300#ADF4E5

Cyan accent family

600#3EB5D7

500#4AD0EF

400#81E7FA

Red destructive alt

600#D42422

500#E74341

400#EE6E6C

300#F4A6A5

Green positive alt

600#3EA44B

500#4FC660

400#66DC7E

300#C6F6D2

Yellow warn alt

600#C68B0B

500#E7B413

400#F5CA0F

text.* bg.* state.* border.* control.*

Parameters / Class

brand.primary #1C809B --cpt-brand

Light Neutrals bg.base / bg.panel / bg.soft --cpt-bg-base / --cpt-bg-elevated / --cpt-bg-soft

Text / Border text.primary / secondary / tertiary / border.default --cpt-text-primary / --cpt-text-secondary / --cpt-text-tertiary / --cpt-line

Dark Neutrals bg.base.dark / bg.panel.dark / bg.soft.dark See design.md 2.1

AI Accent #A655F7 → #24D0EB .cpt-ai-chip__icon

Semantic Status teal / orange / rose / blue --cpt-success / --cpt-warning / --cpt-error / --cpt-info

Family Ramps orange / blue / rose / teal / cyan / red / green / yellow See design.md 2.3

Semantic Groups text / bg / state / border / control See design.md 2.4

Naming Convention Use the `cpt` prefix everywhere .cpt-* / --cpt-*

03 Components

Common Components

Components use thin borders, flat surfaces, and explicit sizing. The AI chip is tighter, and the button set now includes the common white surface button from the reference site.

Notes

The AI chip is back to a size closer to the reference: `12px` text, `48px` height, `24px` icon. It starts as white with a light border and only shifts into a soft violet-to-cyan gradient on hover.

Buttons are standardized at `36px`. Alongside primary and secondary buttons there is now a dedicated `surface button` for white actions such as `Load More` and `Today`. The internal secondary navigation is broken out into a fixed `cpt-subnav` instead of being forced back into the top bar.

Examples

GET

/v1/topics

Lists the latest topics with `limit`, `cursor`, and `locale` parameters.

200 JSON Auth: none

Card Surface

radius.md + shadow.card

Focus Ring

shadow.focus

Input Focus

radius.md + shadow.focus.input

Parameters / Class

AI chip 48px / 12px / 500 .cpt-ai-chip

AI icon 24px .cpt-ai-chip__icon

Button height 36px / 14px / 400 .cpt-button

Surface Button white + thin border + shadow .cpt-button--surface

Hover mock light gray fill .cpt-button--surface-hover / .cpt-ai-chip--hover

Secondary nav 46px dock item / desktop side / mobile bottom .cpt-subnav / .cpt-subnav__item / .cpt-is-active

API card Method and path stay separate .cpt-endpoint-card

Radius scale 8 / 12 / 16 / full --cpt-radius-md / --cpt-radius-lg / --cpt-radius-xl / --cpt-radius-full

Shadow tokens card / modal / focus / input --cpt-shadow-card / --cpt-shadow-modal-sm / --cpt-shadow-focus / --cpt-shadow-focus-input

04 Decorations

Decorations and Dividers

The diamond is a structural node, not card skin. It belongs at the intersection of the rail and the horizontal divider and is responsible for section cuts and closures.

Notes

Start with a full reading rail, then cut sections inside it. Horizontal dividers handle sentence breaks, and the diamond tells you: this is a module boundary.

Offset shadows are reserved for focus objects. They are not the same layer as the diamond and should never be stacked on the same object.

Examples

Module A

Market Summary

Section Break

Disclaimer / Rail Marker / Module Split

Focus Object

Only focus objects may use offset shadows

Parameters / Class

Diamond size 4px × 4px .cpt-section__inner::before / ::after

Divider 1px full-bleed .cpt-section

Rail guide inner rail only .cpt-section__inner

Offset shadow 4px 4px 0 rgba(74, 208, 239, 0.18) .cpt-panel--offset

Do not Diamond and shadow must not stack .cpt-divider-showcase / .cpt-focus-card

05 Layout

Layout Skeletons

The rail expands to a max width of `1660px`, and several content skeletons are defined instead of relying on one page structure.

Notes

Section dividers stay full-bleed while the content rail sits at `1660px`. Wide screens are common, so this version allows a bolder central width, but reading pressure still has to be controlled with columns and whitespace.

In addition to the main rail skeleton, the rules include reference skeletons for continuous feed, primary-secondary split, and card matrix.

To make the skeletons easier to inspect directly, all four structures are split into standalone HTML pages so you do not have to judge only from thumbnails.

Examples

Rail Flow

Continuous sections stacked vertically. Good for rule docs, feeds, and a docs homepage.

Open preview

Primary / Secondary

main stage side rail

Main stage with side rail. Good for homepage hero blocks, market summaries, and high-priority entry points.

Open preview

Card Matrix

High-density card matrix. Good for topic entry pages, module indexes, and navigation hubs.

Open preview

Viewport / Rail

full-bleed divider 1660px content rail

Full-bleed backgrounds with a centered rail. Good for banded sections, chapter transitions, and large closing blocks.

Open preview

Parameters / Class

Content rail 1660px --cpt-container / .cpt-section__inner

section padding 18px → 32px .cpt-section__inner

Skeleton variants Rail / Split / Matrix / Ruler .cpt-layout-rail / .cpt-split-demo / .cpt-matrix-demo / .cpt-container-ruler

Preview files 4 standalone HTML files layout-rail-flow / layout-primary-secondary / layout-card-matrix / layout-viewport-rail

Primary split 8 / 4 or 1fr + 384px .cpt-hero / .cpt-split-demo

Section structure Notes + Example + Specs .cpt-spec__copy / .cpt-spec__example / .cpt-spec__specs

This page turns the `coinpost.ai` layout system into a `CoinPost Terminal` rules page. Class names use the `cpt-` prefix, variables use `--cpt-*`, the light background is back to pure white, and the AI chip and surface button are both defined as reusable styles.