Liberating Structures — Styleguide

Generated from src/tokens.css and src/components.css. Use the controls below to live-preview token changes.

Color

--primary-color #1c3b2a
--primary-dark #132a1e
--accent-color #b85c30
--accent-light #d07248
--accent-hover #9a4d27
--background-light #faf7f2
--background-warm #f3ede2
--background-dark #1a2a1e
--text-color #1e2a1c
--text-mid #445040
--text-light #5e6e5a

WCAG AA compliant: 4.6:1 contrast on light bg

--gold #a0681a
--color-success #2d5a3d
--color-error #9a2e1f
--color-warning var(--gold)
--color-linkedin #0077b5

LinkedIn brand

--color-surface-cool #e8f0eb

Light green tint

--color-surface-warm #fdf0ea

Light terracotta tint

--color-text-warm-dark #7a2e0e

Dark terracotta text on warm bg

Other

--section-overlay rgba(250, 247, 242, 0.88)
--card-background rgba(255, 254, 249, 0.97)
--white #fffef9

Layout

1200px
--max-width 1200px
72px
--header-height 72px

Elevation

8px
--radius-sm 8px
14px
--radius 14px
22px
--radius-lg 22px
0 1px 4px rgba(28, 59, 42, 0.08)
--shadow-sm 0 1px 4px rgba(28, 59, 42, 0.08)
0 4px 20px rgba(28, 59, 42, 0.12)
--shadow 0 4px 20px rgba(28, 59, 42, 0.12)
0 12px 48px rgba(28, 59, 42, 0.18)
--shadow-lg 0 12px 48px rgba(28, 59, 42, 0.18)

Spacing

0.25rem
--space-1 0.25rem

4px

0.5rem
--space-2 0.5rem

8px

0.75rem
--space-3 0.75rem

12px

1rem
--space-4 1rem

16px

1.25rem
--space-5 1.25rem

20px

1.5rem
--space-6 1.5rem

24px

2rem
--space-8 2rem

32px

2.5rem
--space-10 2.5rem

40px

3rem
--space-12 3rem

48px

4rem
--space-16 4rem

64px

Z-Index

1
--z-base 1
500
--z-sticky 500
1000
--z-header 1000
2000
--z-modal 2000
9999
--z-overlay 9999

Motion

150ms ease
--transition-fast 150ms ease
250ms ease
--transition-base 250ms ease
400ms ease
--transition-slow 400ms ease

Typography

'Cormorant Garamond', 'Georgia', serif
--font-heading 'Cormorant Garamond', 'Georgia', serif
'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
--font-body 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif