| version |
alpha |
| name |
noCode Human Visual System |
| description |
Dark, sharp, human-accountable design system for noCode Human GitHub and product surfaces. |
| colors |
| primary |
secondary |
bg |
surface |
surface-2 |
surface-3 |
on-surface |
fg |
fg-2 |
muted |
muted-2 |
border |
border-strong |
accent |
accent-soft |
success |
verified |
grid |
#FF6363 |
#5FC992 |
#07080A |
#101111 |
#16181A |
#1B1C1E |
#F9F9F9 |
#F9F9F9 |
#CECECE |
#9C9C9D |
#6A6B6C |
#242628 |
#303235 |
#FF6363 |
#2B1313 |
#5FC992 |
#9CFF3F |
#151719 |
|
| typography |
| headline-xl |
headline-md |
body-md |
label-mono |
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
-apple-system, BlinkMacSystemFont, Inter, SF Pro Text, Segoe UI, system-ui, sans-serif |
64px |
600 |
1.02 |
-0.025em |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
-apple-system, BlinkMacSystemFont, Inter, SF Pro Text, Segoe UI, system-ui, sans-serif |
34px |
600 |
1.08 |
-0.018em |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
-apple-system, BlinkMacSystemFont, Inter, SF Pro Text, Segoe UI, system-ui, sans-serif |
16px |
400 |
1.62 |
0em |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
JetBrains Mono, IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace |
11px |
500 |
1.4 |
0.04em |
|
|
| spacing |
| xs |
sm |
md |
lg |
xl |
xxl |
4px |
8px |
16px |
24px |
40px |
64px |
|
| rounded |
| sm |
md |
lg |
xl |
full |
4px |
8px |
16px |
20px |
9999px |
|
| components |
| canvas |
grid-line |
badge |
badge-subtle |
subtle-rule |
badge-accent |
badge-live |
verified-mark |
card |
card-border |
strong-divider |
button-primary |
button-accent |
secondary-signal |
| backgroundColor |
textColor |
typography |
{colors.bg} |
{colors.on-surface} |
{typography.body-md} |
|
| backgroundColor |
size |
{colors.grid} |
{spacing.xs} |
|
| backgroundColor |
textColor |
rounded |
typography |
padding |
{colors.surface} |
{colors.muted} |
{rounded.full} |
{typography.label-mono} |
{spacing.sm} |
|
| backgroundColor |
textColor |
rounded |
typography |
{colors.surface-2} |
{colors.fg-2} |
{rounded.full} |
{typography.label-mono} |
|
| backgroundColor |
height |
{colors.muted-2} |
{spacing.xs} |
|
| backgroundColor |
textColor |
rounded |
typography |
{colors.accent-soft} |
{colors.accent} |
{rounded.full} |
{typography.label-mono} |
|
| backgroundColor |
textColor |
rounded |
typography |
{colors.surface-3} |
{colors.success} |
{rounded.full} |
{typography.label-mono} |
|
| backgroundColor |
textColor |
rounded |
{colors.verified} |
{colors.bg} |
{rounded.full} |
|
| backgroundColor |
textColor |
rounded |
padding |
{colors.surface} |
{colors.fg} |
{rounded.lg} |
{spacing.lg} |
|
| backgroundColor |
size |
{colors.border} |
{spacing.xs} |
|
| backgroundColor |
height |
{colors.border-strong} |
{spacing.xs} |
|
| backgroundColor |
textColor |
rounded |
typography |
height |
{colors.fg} |
{colors.bg} |
{rounded.md} |
{typography.body-md} |
{spacing.xl} |
|
| backgroundColor |
textColor |
rounded |
typography |
{colors.primary} |
{colors.bg} |
{rounded.md} |
{typography.body-md} |
|
| backgroundColor |
textColor |
rounded |
{colors.secondary} |
{colors.bg} |
{rounded.full} |
|
|
noCode Human should feel like a serious builder workspace with a clear human pulse: dark canvas, quiet grid, crisp surfaces, red-orange signal color, and small verified-human moments.
The voice is plain and accountable. Lead with useful work, not hype. AI may draft, connect, research, code, and automate; a human reviews, owns, and ships.
Use bg as the full-page base, surface for cards, and surface-2 for nested rows only when needed. Keep accent for emphasis, section numbering, and status dots. Use success or verified only for live/approved/human-reviewed signals.
Do not turn the brand into a neon palette. The red-orange accent should feel precise, not loud.
Headlines are large, compressed, and direct. Body copy stays short. Labels use a mono face for section numbers, status pills, and small system language.
Keep letter spacing at zero for body text. Use slight negative tracking only for large headlines.
Use a dark grid-backed canvas, centered content, and wide breathing room. Cards should appear as tools or marketplace listings, not decorative blocks.
GitHub surfaces cannot use custom CSS, so use SVG assets for branded hero moments and keep Markdown content clean, scan-friendly, and table-based where useful.
Depth is subtle: one-pixel borders, dark inner contrast, and soft red glow only around major brand visuals. Avoid heavy drop shadows in README assets because GitHub's white/dark theme wrappers vary by viewer.
Use 8px for buttons, 16px for cards, 20px for feature containers, and full radius for pills. The icon mark uses a 4px rounded square with a framed dark inset.
Badges: mono, uppercase, pill-shaped, muted text on dark surface.
Cards: compact, dark, one-pixel borders, short headings, practical descriptions.
Hero: brand mark, large promise, three build lanes, and visible marketplace/community direction.
Do say: "Build with AI. Stay human."
Do say: "AI-first. Human-accountable."
Do frame tools as small, useful, shippable experiments.
Don't use generic AI gradients, fake enterprise tone, huge icon grids, or jargon-heavy platform language. Don't imply AI replaces the builder.