Style Guide
Use this page as your customization reference for SAKAI. Preview the typography, palette, rich-text elements, and buttons before adapting the template to your own identity. Keep existing global styles and variables wherever possible so updates stay consistent across the site.
Typography
Text Display
Display
Text 4XL
Page Title
Text 3XL
Section Title
Text 2XL
Large Heading
Text XL
Medium Heading
Text L
Small Heading
Text M
Use Display for the strongest editorial moments, Page Title for page introductions, Section Title to organize content, and the smaller text styles for supporting information. Preserve the hierarchy.
Text S
Thoughtful design brings clarity to complex ideas and creates digital experiences that feel considered, useful, and distinctly human.
Text XS
DESIGN / STRATEGY / DIGITAL CRAFT
Colors
SAKAI uses a restrained neutral palette to keep the work in focus. These swatches are connected to the existing site variables; update the variable values rather than applying one-off colors to individual elements.
Button
Use the primary button for the main action in a section and a text link for a lower-emphasis destination. Keep labels short and specific, and reuse the existing button classes to preserve the template’s interaction and visual consistency.
Rich Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Use rich text for long-form content such as articles, project notes, and case studies. Keep paragraphs focused, use headings to create a clear reading order, and use lists or quotations only when they help explain the content.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
.webp)
