The Raft Design & Brand System
Visual language, EN/JA typesetting, and how to build with it here
Raft Design is a bilingual AI-native studio working across the U.S. and Japan on brand, product, and digital experience.
Founded by Lance Shields after twenty years of design leadership at Adobe and Walmart, plus brand and product work with LegalOn, Visa, Hitachi, and Red Bull. The studio's own words: hands-on, fast, and built to move with change rather than around it.
The system reads as editorial-technical: a near-black forest-green canvas, one acid-lime accent, Inter Black for everything structural, and Fraunces italic for the few moments of warmth. Dark mode is the default; light mode is a full parallel palette, not an inverted filter.
Plain, declarative, senior. Short sentences. Claims followed by the reason for the claim.
Negation then correction
The house rhythm, used sparingly: "The build is directed, not just delegated." "Meaning has to be rebuilt, not converted."
Honesty as a device
Copy admits limits rather than hiding them — a published Graveyard of dropped tools, verdicts that name downsides, a "Known Gaps" section in the spec itself.
Person
"We" for the studio. "I" only where Lance speaks personally. "You" addresses the reader's situation, never marketing address.
No emoji, no hype
No exclamation marks, no rhetorical questions except FAQ headings. The one recurring glyph is the arrow →.
Canvas
#04220FElevated
#102A1BSunken
#02190AChrome
#2E4034Brand / accent
#3DE83DRule
#1E3A28One saturated color in the whole system — #3DE83D — does not change between themes. Everything else is a value step of the same forest green. Body text is off-white #EDF2EE, never pure white; metadata sits at #8FA396.
Canvas
#F7FFF7Surface / elevated
#EBF7EBAccent (darkened)
#159845Rule
#CFE5D7Text primary
#000000Light mode is a full parallel palette, not an inverted filter — its own canvas, its own darkened accent (#159845 instead of #3DE83D) for contrast, its own rule and border tones.
Aa
72
36
28
24
20
16
13
12
11
Inter carries the system at weight 900 for anything that reads as a heading, with optical sizing and cv11 kerning so the heavy weight doesn't muddy. Scale: 11 / 12 / 13 / 16 / 20 / 24 / 28 / 36 / 72px, plus two untokenized literals — a 48px article title and a 105–128px hero display.
turbulent
Fraunces italic SemiBold, with 'SOFT' 0, 'WONK' 1, is the emphasis face — accent words in the hero and every stat figure. It never carries body copy.
Display heading -2px
PILL LABEL 0.52px
FLAT LABEL 1px
Body & headings 0
Japanese is real content, not translation. Copy is rebuilt for the market, not converted.
Type faces
Noto Sans JP is the logotype face and the default body/heading face. Noto Serif JP 900 substitutes for Fraunces — it has no CJK glyphs.
Tracking & line-height
Tracking is always 0 on Japanese pages. Line-height opens to 1.5 for headings and 1.9 for body — noticeably looser than the Latin scale.
What stays English
Nav labels and section pills stay English on purpose — they function as design elements, not copy to translate.
What switches
FAQ questions and Tools-page pills switch to genuine Japanese: よくある質問 / 稼働中 / グレイブヤード.
EN — tracking -2px, line-height 1
DESIGNING FOR turbulent TIMES AHEAD.
JA — tracking 0, line-height 1.5
変わりゆく時代を、
デザインする。
Body copy sets at line-height 1.55 across the system, letting long paragraphs breathe without feeling loose.
日本語のボディコピーは行間1.9で組まれ、漢字とかなが混在する文章でも読みやすさを保つ。
An 8-point-ish scale from 4 to 96px, with 6px and 12px minted specifically for badges and tags. When a component needs a value the scale lacks, name the exact pixel value as a new token rather than force-fit an existing one.
Sections run full-width to a 1920px cap with 15px gutters on the homepage, 32px on the Tools page. Sections separate with a single 1px rule — no background changes, no cards-as-sections. Only the nav is fixed, at 66px.
Elevated card
Elevated fill, 1px hairline rule border, 4px radius, 24px padding. No shadows exist in this system — depth comes from surface value and a border.
Recessed banner
The inverse of a card: darker fill, brighter border, square corners. Used for the CTA banner.
Cards don't hover
Hovers are 0.2s color/background transitions — never scale or lift. Cards have no hover state at all.
2px — labels, tags
4px — cards, images
Pill — buttons, badges
50% — dots, avatars
Motion is purposeful and mostly one-shot: clip-path reveals at 0.33–0.6s, 0.6s scroll fade-ins with a 20px translate, a 24s client marquee at 50% opacity. Every animation disables under prefers-reduced-motion.
→
No icon library
There is no icon font in this codebase. The arrow → is the house glyph — it leads CTAs, prefixes taglines, and appears in nav and carousel controls.
Hand-written SVGs & brand figures
A handful of inline SVGs (theme icons, hamburger, close X) plus animated brand-figure motifs that live inside 250px lime badge tiles. No emoji, anywhere.
Hand-keyed brand-figure animations, squash-and-stretch eased, always cropped into 250px square lime tiles — flat vector on the one saturated color, never freestanding icons.
Core
Button
SectionLabel
Eyebrow
Tag
StatusBadge
StatValue
TextLink
Card
Forms
TextField
Content
ToolCard
GraveyardRow
ServiceCard
WorkCard
JournalCard
FaqItem
Navigation
NavHeader
ThemeToggle
SiteFooter
Marketing
PageHero
LogoBlock
CtaBanner
CommunityStrip
ClientLogoMarquee
Every component maps to a real class in the source CSS. The inventory stops where the source stops — no Select, Checkbox, Tabs, or Toast, because the live site doesn't have them.
Five status colors, scoped to the AI Tools page's tool-rating badges — the only place other hues appear in the system. Each pairs a text/dot color with a 12% tint fill and a 25–30% border.
Raft portfolio deck
15-slide new-business deck — approach, expertise, projects, build, studio, contact.
Raft portfolio deck (JA)
16-slide Japanese version, with Noto Sans JP, 0 tracking, and 1.9 line-height applied throughout.
Raft site page
Site page scaffold — sticky nav, 72px hero, section block, CTA banner, footer.
Check whether one of these matches before building from scratch — copy it in as a starting point, then swap in the real content.
The design system is a bundle you load, not a style to imitate.
1. Load it
Every page links the token stylesheets and a compiled JS bundle. React and ReactDOM must load first — the bundle calls React.createElement directly.
2. Compose with it
Components come off window.RaftDesignSystem_76d511 — Button, Card, and the rest. Don't rebuild them from raw HTML.
3. Style against tokens
Colors, type, spacing, radii — reach for the linked var(--*) tokens instead of guessing new values.
If a template already matches the brief — a deck, a site page — copy it in first and edit its content rather than assembling the bundle by hand.
GitHub repo (source of truth) · DESIGN.md · llms.txt · raftdesign.studio
Where DESIGN.md and this system disagree, DESIGN.md wins.
Raft Design System