Yujin Design System

Un sistema de diseno, cuatro almas.

Todo producto que Forge construye nace con el Yujin Design System: tokens DTCG, 30 componentes con atributos NAC3 (control por voz + accesibilidad de fabrica) y un catalogo de iconos coherente. Elegis la variante -- sumi-e, art deco, moderna o marina -- y cada una trae su propia paleta y su juego de iconos; los componentes son los mismos.

友人
Default

Sumi-e

Tinta sobre papel. Indigo de marca, acentos ambar, marcas kanji. La estetica por defecto de todo producto Forge.

Paleta
Indigo#2D3A8C
Indigo claro#5A66E8
Teal#0F6E66
Ambar#9B6A05
Coral#943020
Tinta#1A1815
Warm 100#F2F0EC
Pagina#F8F7F4
Tipografia
友人 Noto Serif JPDM Sans -- texto e interfaz
Wordmarks kanji
友人yujin
川kawa
さざなみsazanami
始まりhajimari
目次mokuji
Iconografia -- 170 iconos sumi-e (muestra)
branch-sakura
rain-falling
moon-half
crane-flying
temple-gate
paper-lantern
torii-double
kimono-robe
scroll-rolled
brush-ink
coin-mon
handshake-knot
helmet-care
box-crate
conveyor-belt
magnify-glass
person-bow
flag-banner
envelope-letter
circuit-node
Variante

Art Deco

Pasteles geometricos. Azul polvo + grises pizarra + cremas + un filete de laton. Sin kanjis, sin sumi-e. Tipografia geometrica.

Paleta
Acento (azul polvo)#6E8FB5
Pizarra#41607F
Slate 600#5A646F
Laton (filete)#BFA871
Salvia#4F6E4D
Rosa polvo#8C5252
Crema#F6F1E7
Pagina#FCFAF5
Tipografia
Poiret OneJosefin Sans -- texto e interfaz
Iconografia -- 48 iconos art deco
home
search
add
edit
delete
settings
check
close
arrow-right
menu
filter
download
expand
chevron-right
send
share
dashboard
list
calendar
folder
table
database
document
clipboard
tag
user
users
building
briefcase
handshake
target
coin
invoice
chart-bar
chart-line
mail
chat
phone
bell
star
heart
clock
lock
shield
info
warning
sun
globe
Variante

Moderna

Geometrica y vibrante. Indigo electrico + violeta + cyan sobre neutros casi negros. Tipografia grotesca, esquinas limpias. Para productos que quieren verse de hoy.

Paleta
Indigo electrico (acento)#4F46E5
Violeta#7C3AED
Cyan#06B6D4
Rosa vivo#F43F5E
Negro#18181B
Gris 500#71717A
Gris 100#F4F4F5
Pagina#FFFFFF
Tipografia
Space GroteskDM Sans -- texto e interfaz
Iconografia -- set geometrico (muestra)
bolt
grid
arrow-up-right
hexagon
layers
spark
play
target-dot
chevrons
plus-square
pulse
diamond
Variante

Marina

Paleta de mar. Azul profundo + cerceta + aqua + espuma, con arena y coral de acento. Tipografia serif elegante. Iconos nauticos. Calma de costa.

Paleta
Cerceta (acento)#1B98A2
Azul profundo#0B3C5D
Aqua#2BB3C0
Espuma de mar#A8DADC
Arena#E9C46A
Coral#E76F51
Abismo#0D2435
Pagina#F2F7F9
Tipografia
MarcellusDM Sans -- texto e interfaz
Iconografia -- set nautico (muestra)
anchor
waves
compass
lighthouse
sailboat
helm
life-ring
fish
drop
shell
compass-rose
knot

Fundacion compartida

Las cuatro variantes exponen el mismo contrato de tokens semanticos (--color-accent, --color-bg-*, --color-text-*, estados) y comparten los 30 componentes, que son theme-agnostic: consumen var(--color-*). Cambiar de variante es un swap de tokens + iconos, nunca reescribir un componente.

  • Tokens DTCG W3C (color, tipografia, espaciado, radio, sombra)
  • 30 componentes con atributos NAC3 -- control por voz + a11y de fabrica
  • Juego de iconos propio por variante (sumi-e 170 / art deco 48 / moderna geometrico / marina nautico)
  • Paleta y tipografia propias por variante -- inspiradas en su nombre
  • Fuentes por CDN (Google Fonts), sin binarios embebidos