Book a call
.ts-wrap { max-width: 1280px; margin: 0 auto; padding: 4rem 2rem; font-family: ‘Inter’, system-ui, sans-serif; } .ts-section { margin-bottom: 5rem; } .ts-label { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(–wp–preset–color–muted-foreground); margin-bottom: 1.5rem; padding: 0.25rem 0.75rem; border: 1px solid var(–wp–preset–color–border); border-radius: 9999px; } .ts-section-title { font-size: 1.5rem; font-weight: 500; color: var(–wp–preset–color–foreground); margin: 0 0 2rem; border-bottom: 1px solid var(–wp–preset–color–border); padding-bottom: 0.75rem; } .ts-grid { display: grid; gap: 1rem; } .ts-grid–2 { grid-template-columns: repeat(2, 1fr); } .ts-grid–3 { grid-template-columns: repeat(3, 1fr); } .ts-grid–4 { grid-template-columns: repeat(4, 1fr); } .ts-grid–5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 768px) { .ts-grid–3, .ts-grid–4, .ts-grid–5 { grid-template-columns: repeat(2, 1fr); } .ts-grid–2 { grid-template-columns: 1fr; } } /* Color swatches */ .ts-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(–wp–preset–color–border); } .ts-swatch__color { height: 80px; } .ts-swatch__info { padding: 0.625rem 0.75rem; background: var(–wp–preset–color–background); } .ts-swatch__name { font-size: 0.75rem; font-weight: 600; color: var(–wp–preset–color–foreground); display: block; } .ts-swatch__hex { font-size: 0.7rem; color: var(–wp–preset–color–muted-foreground); font-family: monospace; } /* Typography rows */ .ts-type-row { display: flex; align-items: baseline; gap: 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(–wp–preset–color–border); } .ts-type-row:last-child { border-bottom: none; } .ts-type-meta { min-width: 140px; flex-shrink: 0; } .ts-type-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(–wp–preset–color–muted-foreground); display: block; } .ts-type-size { font-size: 0.75rem; color: var(–wp–preset–color–muted-foreground); font-family: monospace; } .ts-type-preview { flex: 1; line-height: 1.2; } /* Button row */ .ts-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.5rem; background: var(–wp–preset–color–muted); border-radius: 12px; margin-bottom: 1rem; } .ts-btn-row–dark { background: var(–wp–preset–color–dark); } .ts-btn-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(–wp–preset–color–muted-foreground); min-width: 120px; } .ts-btn-row–dark .ts-btn-label { color: rgba(250,250,250,0.5); } /* Icon grid */ .ts-icon-item { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; padding: 1.25rem; background: var(–wp–preset–color–muted); border-radius: 12px; text-align: center; } .ts-icon-item i { font-size: 1.5rem; color: var(–wp–preset–color–foreground); } .ts-icon-item span { font-size: 0.7rem; font-family: monospace; color: var(–wp–preset–color–muted-foreground); } /* Spacing */ .ts-spacing-row { display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(–wp–preset–color–border); } .ts-spacing-bar { background: var(–wp–preset–color–accent); border-radius: 4px; height: 24px; flex-shrink: 0; } .ts-spacing-meta { font-size: 0.75rem; color: var(–wp–preset–color–muted-foreground); font-family: monospace; } .ts-spacing-name { font-size: 0.75rem; font-weight: 600; color: var(–wp–preset–color–foreground); min-width: 80px; } /* Radius */ .ts-radius-item { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .ts-radius-box { width: 64px; height: 64px; background: var(–wp–preset–color–foreground); } .ts-radius-label { font-size: 0.7rem; font-family: monospace; color: var(–wp–preset–color–muted-foreground); text-align: center; } /* Forms */ .ts-form-group { margin-bottom: 1.5rem; } .ts-form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: var(–wp–preset–color–foreground); margin-bottom: 0.5rem; } /* Transition tokens */ .ts-trans-row { display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(–wp–preset–color–border); } .ts-trans-demo { width: 48px; height: 48px; background: var(–wp–preset–color–foreground); border-radius: 8px; cursor: pointer; } .ts-trans-demo:hover { background: var(–wp–preset–color–accent); }
Theme Setup — Design System Preview

Base Design Tokens

All design tokens, components, and base styles added on the theme-setup branch. This page is temporary.

01 — Colors

Color Palette (theme.json)

Background#ffffff
Foreground#141414
Muted#f5f5f5
Muted FG#737373
Border#e3e3e3
Accent ★#c5f135
Accent FG#141414
Accent Dark#7f981b
Dark#0a0a0a
Dark FG#fafafa
02 — Typography

Type Scale · Inter Variable · theme.json fluid sizes

Display96px fluid
The quick fox
H1 / .h160px fluid
The quick brown fox
H2 / .h248px fluid
The quick brown fox
H3 / .h330px
The quick brown fox jumps
H4 / .h424px
The quick brown fox jumps over
H5 / .h520px
The quick brown fox jumps over the lazy dog
H6 / .h618px
The quick brown fox jumps over the lazy dog
Body16px / lh 1.6
The quick brown fox jumps over the lazy dog. Paragraph text at base size with comfortable 1.6 line-height for readability.
SM14px
Small text — captions, labels, helper text, meta information
XS12px
Extra small — timestamps, badges, overline tags
03 — Buttons

Button Components

Default pill
.wp-block-button__link Primary CTA Accent Outline
CTA Button
.btn-cta
RC
Get Started
RC
Get Started
Small CTA
Header CTA
.site-header__cta
04 — Icons

Icomoon Icon Font (8 icons)

twitter-fill-16 f101
phone-icon f102
map-pin f103
linkedin-fill f104
instagram f105
facebook-fill f106
email-icon f107
arrow-icon f108

Usage: font-family: 'icomoon'; content: 'f108'; — used in $btn-simple-arrow-svg

05 — Spacing

Spacing Scale (theme.json + SCSS)

XS / 10
0.5rem — 8px — $spacing-xs / --wp--preset--spacing--10
SM / 20
1rem — 16px — $spacing-sm / --wp--preset--spacing--20
MD / 30
1.5rem — 24px — $spacing-md / --wp--preset--spacing--30
LG / 40
2rem — 32px — $spacing-lg / --wp--preset--spacing--40
XL / 50
3rem — 48px — $spacing-xxl / --wp--preset--spacing--50
XXL / 60
4rem — 64px — --wp--preset--spacing--60
3XL / 70
5rem — 80px — --wp--preset--spacing--70
06 — Radii

Border Radius Scale ($radius-*)

$radius-sm
4px
$radius-md
12px
$radius-lg
16px
$radius-xl
20px
$radius-xxl
40px
pill / full
9999px
07 — Forms

Form Elements

Choose option… FinTech Web3 AI/ML
08 — Changelog

What was added on this branch

theme.json

  • Full color palette (15 tokens) — accent lime, dark, muted, border…
  • Fluid font size scale (xs → Display)
  • Inter Variable font registered
  • Spacing scale (10–70)
  • H1–H6 global element defaults
  • Button / link global element defaults
  • Layout: contentSize 1280px / wideSize 1440px

SCSS Components

  • _typography.scss — .h1–.h6, .display, fluid sizes
  • _buttons.scss — .btn-pill, .btn-cta (+ –accent, –sm)
  • _navigation.scss — nav base styles
  • _site-header.scss — sticky header, burger logic
  • _footer.scss — footer layout
  • _forms.scss — form base (stub, ready to extend)
  • _page-frame.scss — new component (added)

shared-styles/_variables.scss

  • Full spacing scale ($spacing-xs → $spacing-xxl)
  • Breakpoint ladder ($mobile-xs → $ultra)
  • Radius scale ($radius-sm → $radius-xxl)
  • Z-index system ($z-dropdown → $z-tooltip)
  • Dark surface rgba tokens ($surface-field, $border-hairline…)
  • Shadow tokens ($shadow-card-hover, $shadow-hero-card…)
  • $color-accent, $icon-font-family, $btn-simple-arrow-svg

Removed (cleanup)

  • _filter-pill.scss — redundant
  • _glass-panel.scss — moved / removed
  • _insight-card.scss — removed
  • _section-tag.scss — removed
  • inc/block-resources-grid.php — removed