Design System & Style Guide
Visual specification and custom components documentation for the Rowan Knots website. Matches the approved branding guidelines in assets-needed.md.
1. Color Palette
2. Typography Scale
Heading 1 (h1) — 2.5rem
Font: 'Outfit', sans-serif (700 Bold) | Used: Page TitlesHeading 2 (h2) — 1.875rem
Font: 'Outfit', sans-serif (600 Semi-Bold) | Used: Section TitlesHeading 3 (h3) — 1.25rem
Font: 'Outfit', sans-serif (600 Semi-Bold) | Used: Component / Card TitlesBody Paragraph Text (p) — 1.0rem
Font: 'Inter', sans-serif (400 Regular, line-height 1.6) | Used: Generic Content Copy3. Interactive Components
Buttons
Form Inputs
4. Icon Set (SVG)
Clean geometric strokes from a single family. Color shifts dynamically with text theme (currentColor).
5. Alert Panel Block Styles
This is a standard information block. It uses the primary slate-blue color brand token for the left accent border. Perfect for quick tips or generic warnings.
This is a warning or important information block. It uses the warm brass/gold color token for the left accent border. Suitable for safety announcements or cancellation rules.
6. Section Pattern Bands
Tinted full-bleed bands used to separate sections and add visual contrast. They reuse the same woven rope lattice as the page hero — two opposing 45° diagonals over a soft primary and brass glow — so every patterned surface on the site reads as one system. Alternate .section-alt with .section-alt-mirror down a page so two adjacent bands do not look identical. Cards placed inside a band automatically drop back to the plain page background so they stay legible.
.section-alt
Primary glow upper-left, brass glow lower-right.
Falls back to the page background for contrast.
.section-alt-mirror
Same weave, glows flipped to the opposite corners.
Falls back to the page background for contrast.