The Living Bento System

Bento (弁当): organising many disciplines into one accountable system. Our law: custom, premium and ownable. Never a component gallery.

Xikota mark

Core Colors

The palette holds the discipline: vermilion signals once per view (fill only); gold is metal accent (hairlines, metrics) never fill; the AI gradient is the only multi-hue surface.

Paper

#E8E4DC

Off-white surfaces

Sumi

#161722

Deep ink black

Stone

#8B847B

Warm stone gray

Graphite

#1C1D24

Card surfaces

Void

#0B0C11

Page background

Vermilion

#DC000C

THE signal, once/view

Vermilion Hot

#FF2A1C

Hover glow / accent

Gold

#CFA861

Metal accent only

Gold Soft

#E3C98A

Lifted gold

AI Violet

#CDD6E0

AI sub-hue (cool, de-violeted)

AI Amber

#F3B667

AI sub-hue

AI Pearl

#F6F1E7

AI sub-hue

Gradient Surfaces

grad-ai

grad-vermilion

grad-graphite

grad-gold

Color Rules

  • 1Vermilion appears once per view and is a fill. Small vermilion text must be ≥18px / 600wt.
  • 2Gold is a metal accent (hairlines, metrics). Never a fill surface.
  • 3Body text ≥ 4.5:1 contrast; large text ≥ 3:1. Rice paper on graphite = 11.8:1.

The Type Scale

Sora (UI & display) + Shippori Mincho (kanji accents). Fluid scale with clamp() for responsive sizing. Min body text 18px; min UI text 14px.

--t-megaSora 800

Mega

clamp(3.2rem, 7vw, 6.4rem)

--t-displaySora 700

Display

clamp(2.4rem, 4.6vw, 4rem)

--t-h1Sora 600

H1

clamp(2rem, 3.4vw, 3rem)

--t-h2Sora 600

H2

clamp(1.5rem, 2.4vw, 2.1rem)

--t-ledeSora 300

Lede

clamp(1.1rem, 1.5vw, 1.35rem)

--t-bodySora 400

Body

1rem

--t-tagSora 600

Tag

0.6875rem

Shippori Mincho Kanji Accent

弁当

Kanji accents (ルビ) set meaning without interrupting the Sora body. The system lives through Japanese method: purposeful materials, no cosplay.

Live Instances

Real components from the system. Each one is tested, accessible (≥44px targets), and consistent across the site.

Button

44px min target, rounded-full, transitions on color/transform.

Seal

Signature sealLarge seal

Gold-rimmed disc carrying the mark. Signs case studies and the footer.

Glass / Navbar Material

Navigation · Premium chrome

Full glass recipe: fill + edge + highlight + blur. Fallback to graphite@92% where backdrop-filter unsupported.

AI Orb

Active · intelligence signal

30px gradient orb with AI glow. Used for status, markers, accent on AI surfaces.

Motion + Laws

Eight laws that hold the system. Motion is the verb; every surface has one owner; design before code.

The Eight Laws

  • 1Motion is the default verb.
  • 2One owner per surface.
  • 3Spectacle rationed.
  • 4Re-skin never paste.
  • 5Every signature has a floor.
  • 6No library because it exists.
  • 7Japanese method not cosplay.
  • 8Cool but legible to everyone.

Motion Principles

  • Heavy, eased, purposeful.

    No bounce on content; spring on controls only.

  • Reduced motion honored.

    Reveal / Stagger components check prefers-reduced-motion and fall back to instant display.

  • Entrance is the default.

    Opacity 0→1 + rise (26px) on in-view, once per session.

Spacing (4pt base)

s1

4px

s2

8px

s3

12px

s4

16px

s5

20px

s6

24px

s7

28px

s8

32px

s9

36px

s10

40px

Section vertical rhythm = s9 (96px). Whitespace (ma 間) is a material. Use generously.

This is how Xikota Design builds.

Every color, motion, and rule serves a design decision. It is the same standard Xikota Design applies to the products it designs and builds. Tools change, principles remain.

See the work