Phase 1 / Dev
Foundations.
Type scale, palette, motion tokens. Everything Phase 1 days 1-4 wired into the design system. Visible proof that the foundation works before any new page consumes it.
Type scale
Twelve tokens. Fluid via clamp(). Inter body, Geist display.
Resize the viewport. Each token interpolates between its mobile and desktop size as the window crosses the clamp range. No responsive prefixes needed.
text-display-1 The CRM for crews.
text-display-2 Built for the trade.
text-display-3 Quote. Schedule. Get paid.
text-h1 Every call, text, and email on one thread.
text-h2 Real Stripe. Real Square. Zero markup.
text-h3 Priced the way exterior cleaning works.
text-h4 Smaller subheading, still a subheading.
text-body-lg Lead paragraph. Used for hero subheads and section intros where the body needs a little more presence on the page.
text-body Default paragraph. Used everywhere by default. Inter Variable at the comfortable reading size, generous line-height, no surprises.
text-body-sm Smaller body. Used for cards, callouts, supporting copy under a primary line.
text-caption Caption. Used for image captions and metadata.
text-eyebrow (uppercase + tracking-eyebrow) Section eyebrow
Font families
Two typefaces. Default body Inter, display Geist.
--font-body / Inter Variable The quick brown fox jumps over the lazy dog.
0123456789 abcdefghijklmnop ABCDEFGHIJKLMNOP
--font-display / Geist Variable The quick brown fox jumps over the lazy dog.
0123456789 abcdefghijklmnop ABCDEFGHIJKLMNOP
Palette
Navy and cyan. Brand only.
From brand/shinecrm-palette.json. No editorial drift; warmth comes from typography, spacing, and screenshot polish, not from color.
Brand
ink
#0B1A4A primary
#0B1A4A accent
#2BA9F4 Surface
bg
#F1F6FD surface
#FFFFFF secondary
#DCEEFB Utility
border
#DDE5F0 muted
#5A6B8C faint
#8D9AB3 success
#10B981 warning
#D97706 danger
#DC2626 info
#1856C7 Motion durations
Named by intent, not by length.
Hover a tile. The bar fills over the token's duration. 150ms vs 600ms is unmistakable.
--motion-instant 0ms
Hover
--motion-fast 150ms
Hover
--motion-base 240ms
Hover
--motion-slow 400ms
Hover
--motion-deliberate 600ms
Hover
Easings
Four curves. Out is the default.
--ease-out --ease-in-out --ease-in --ease-linear Hover any row to see the curve traverse the track.
This page is dev-only and noindex. Lives at /dev/foundations for visual proof of the Phase 1 foundation work. Removed before atomic flip.