Canela - Serif Typeface
This typeface is used for longer form content. It is the primary typeface for the Salt brand.
Tailwind Text Sizes
Current: seriftext-xs0.75rem (12px)The quick brown fox jumps over the lazy dog
text-sm0.875rem (14px)The quick brown fox jumps over the lazy dog
text-base1rem (16px)The quick brown fox jumps over the lazy dog
text-lg1.125rem (18px)The quick brown fox jumps over the lazy dog
text-xl1.25rem (20px)The quick brown fox jumps over the lazy dog
text-2xl1.5rem (24px)The quick brown fox jumps over the lazy dog
text-3xl1.875rem (30px)The quick brown fox jumps over the lazy dog
text-4xl2.25rem (36px)The quick brown fox jumps over the lazy dog
text-5xl3rem (48px)The quick brown fox jumps over the lazy dog
text-6xl3.75rem (60px)The quick brown fox jumps over the lazy dog
text-7xl4.5rem (72px)The quick brown fox jumps over the lazy dog
text-8xl6rem (96px)The quick brown fox jumps over the lazy dog
text-9xl8rem (128px)The quick brown fox jumps over the lazy dog
Body Text Variants
Current: seriftext-lg (lead)1.125rem (18px)Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
text-base (body)1rem (16px)The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning).
text-sm (small)0.875rem (14px)Fine print, legal text, and supplementary information often use smaller text sizes for hierarchy.
Inline Elements
This is a paragraph with a link, strong text, emphasized text, inline code,Ctrl,highlighted text, H2O and E=mc2.
Blockquote
Good typography is invisible; readers shouldn't notice the typeface but should be drawn into the content. Great typography makes ideas accessible and engaging.
Code Block
const fluidType = (min, vw, base, max) => {
return `clamp(${min}px, ${vw}vw + ${base}px, ${max}px)`;
};
console.log(fluidType(16, 1.2, 12, 18));Horizontal Rule
Lists
Unordered List
- First level item
- First level item with nested list
- Second level item
- Second level item
- First level item
Ordered List
- First step
- Second step with nested list
- Sub-step A
- Sub-step B
- Third step
Two-Column Reading Test
Typography exists to honor content. Like dress, it is an art capable of many variations. Here the designer acts as an interpreter, adapting the form to serve the content's needs.
The typographer's task has always been to add a framework of typographic form to the literary material supplied. In the past, this was mostly a question of the size and spacing of the letters.
Today, typographers must also consider how text appears on screens of various sizes, ensuring readability across devices while maintaining the hierarchy and rhythm of the text.
Good typography creates a pleasant reading experience. It guides the eye through content with appropriate contrast, spacing, and rhythm. The goal is invisible design that serves the reader.
Fluid typography adapts to viewport size, ensuring optimal line length and comfortable reading at any screen width. This approach respects both the content and the reader's context.
The interplay between type size, line height, line length, and spacing creates the texture of text. These relationships must remain harmonious across all viewport sizes.
Link States
Favorit - Sans-serif Typeface
This is the typeface used for content on slide decks and callouts on the web experience.
Tailwind Text Sizes
Current: sanstext-xs0.75rem (12px)The quick brown fox jumps over the lazy dog
text-sm0.875rem (14px)The quick brown fox jumps over the lazy dog
text-base1rem (16px)The quick brown fox jumps over the lazy dog
text-lg1.125rem (18px)The quick brown fox jumps over the lazy dog
text-xl1.25rem (20px)The quick brown fox jumps over the lazy dog
text-2xl1.5rem (24px)The quick brown fox jumps over the lazy dog
text-3xl1.875rem (30px)The quick brown fox jumps over the lazy dog
text-4xl2.25rem (36px)The quick brown fox jumps over the lazy dog
text-5xl3rem (48px)The quick brown fox jumps over the lazy dog
text-6xl3.75rem (60px)The quick brown fox jumps over the lazy dog
text-7xl4.5rem (72px)The quick brown fox jumps over the lazy dog
text-8xl6rem (96px)The quick brown fox jumps over the lazy dog
text-9xl8rem (128px)The quick brown fox jumps over the lazy dog
Body Text Variants
Current: sanstext-lg (lead)1.125rem (18px)Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
text-base (body)1rem (16px)The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning).
text-sm (small)0.875rem (14px)Fine print, legal text, and supplementary information often use smaller text sizes for hierarchy.
Inline Elements
This is a paragraph with a link, strong text, emphasized text, inline code,Ctrl,highlighted text, H2O and E=mc2.
Blockquote
Good typography is invisible; readers shouldn't notice the typeface but should be drawn into the content. Great typography makes ideas accessible and engaging.
Code Block
const fluidType = (min, vw, base, max) => {
return `clamp(${min}px, ${vw}vw + ${base}px, ${max}px)`;
};
console.log(fluidType(16, 1.2, 12, 18));Horizontal Rule
Lists
Unordered List
- First level item
- First level item with nested list
- Second level item
- Second level item
- First level item
Ordered List
- First step
- Second step with nested list
- Sub-step A
- Sub-step B
- Third step
Two-Column Reading Test
Typography exists to honor content. Like dress, it is an art capable of many variations. Here the designer acts as an interpreter, adapting the form to serve the content's needs.
The typographer's task has always been to add a framework of typographic form to the literary material supplied. In the past, this was mostly a question of the size and spacing of the letters.
Today, typographers must also consider how text appears on screens of various sizes, ensuring readability across devices while maintaining the hierarchy and rhythm of the text.
Good typography creates a pleasant reading experience. It guides the eye through content with appropriate contrast, spacing, and rhythm. The goal is invisible design that serves the reader.
Fluid typography adapts to viewport size, ensuring optimal line length and comfortable reading at any screen width. This approach respects both the content and the reader's context.
The interplay between type size, line height, line length, and spacing creates the texture of text. These relationships must remain harmonious across all viewport sizes.
Link States
Favorit Mono - Monospace Typeface
The mono typeface is to be used in special callouts on slides and the web site. To be used infrequently.
Tailwind Text Sizes
Current: monotext-xs0.75rem (12px)The quick brown fox jumps over the lazy dog
text-sm0.875rem (14px)The quick brown fox jumps over the lazy dog
text-base1rem (16px)The quick brown fox jumps over the lazy dog
text-lg1.125rem (18px)The quick brown fox jumps over the lazy dog
text-xl1.25rem (20px)The quick brown fox jumps over the lazy dog
text-2xl1.5rem (24px)The quick brown fox jumps over the lazy dog
text-3xl1.875rem (30px)The quick brown fox jumps over the lazy dog
text-4xl2.25rem (36px)The quick brown fox jumps over the lazy dog
text-5xl3rem (48px)The quick brown fox jumps over the lazy dog
text-6xl3.75rem (60px)The quick brown fox jumps over the lazy dog
text-7xl4.5rem (72px)The quick brown fox jumps over the lazy dog
text-8xl6rem (96px)The quick brown fox jumps over the lazy dog
text-9xl8rem (128px)The quick brown fox jumps over the lazy dog
Body Text Variants
Current: monotext-lg (lead)1.125rem (18px)Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
text-base (body)1rem (16px)The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning).
text-sm (small)0.875rem (14px)Fine print, legal text, and supplementary information often use smaller text sizes for hierarchy.
Inline Elements
This is a paragraph with a link, strong text, emphasized text, inline code,Ctrl,highlighted text, H2O and E=mc2.
Blockquote
Good typography is invisible; readers shouldn't notice the typeface but should be drawn into the content. Great typography makes ideas accessible and engaging.
Code Block
const fluidType = (min, vw, base, max) => {
return `clamp(${min}px, ${vw}vw + ${base}px, ${max}px)`;
};
console.log(fluidType(16, 1.2, 12, 18));Horizontal Rule
Lists
Unordered List
- First level item
- First level item with nested list
- Second level item
- Second level item
- First level item
Ordered List
- First step
- Second step with nested list
- Sub-step A
- Sub-step B
- Third step
Two-Column Reading Test
Typography exists to honor content. Like dress, it is an art capable of many variations. Here the designer acts as an interpreter, adapting the form to serve the content's needs.
The typographer's task has always been to add a framework of typographic form to the literary material supplied. In the past, this was mostly a question of the size and spacing of the letters.
Today, typographers must also consider how text appears on screens of various sizes, ensuring readability across devices while maintaining the hierarchy and rhythm of the text.
Good typography creates a pleasant reading experience. It guides the eye through content with appropriate contrast, spacing, and rhythm. The goal is invisible design that serves the reader.
Fluid typography adapts to viewport size, ensuring optimal line length and comfortable reading at any screen width. This approach respects both the content and the reader's context.
The interplay between type size, line height, line length, and spacing creates the texture of text. These relationships must remain harmonious across all viewport sizes.
Link States
Links & Interactions
Default Link Style
All links use a sand-colored underline while inheriting their parent's text color. This creates a consistent, elegant treatment inspired by the manifesto's emphasis on making extraction and exploitation obsolete.
Link Examples
Body text with link
Technology is too powerful to be guided only by profit. Read more about our approach to building the future.
Heading with link
The Founder-Steward Model
Implementation
/* Default link styles */
a {
color: inherit;
text-decoration: none;
border-bottom: 2px solid var(--sand);
transition: opacity 0.3s ease, border-color 0.3s ease;
display: inline;
}
a:hover {
opacity: 0.7;
}Design Rationale
- •Sand underline: Provides visual distinction without overwhelming the content
- •Inherited color: Links maintain context and hierarchy within their containing elements
- •Hover opacity: Subtle feedback that respects the minimal aesthetic
- •Accessibility: Transitions respect prefers-reduced-motion preference
Generated Brand Imagery
AI-generated abstract compositions using brand colors, created with Midjourney.
Airy abstract streams of light, flowing currents of Pacific navy (#142139), Mint (#F5FCF9), Oatmilk (#F9F2E9), bright Atlantic blues (#C2ECF4, #6BD1E5...
Ethereal airy abstract flowing currents of Pacific navy (#142139), Mint (#F5FCF9), Oatmilk (#F9F2E9), bright Atlantic blues (#C2ECF4, #6BD1E5, #1B879C...
Ethereal airy abstract flowing currents of Pacific navy (#142139), Mint (#F5FCF9), Oatmilk (#F9F2E9), bright Atlantic blues (#C2ECF4, #6BD1E5, #1B879C...
Ethereal airy abstract flowing currents of Rosewood (#ED6363), Driftwood (#D4B3A7), Pacific navy (#142139), Mint (#F5FCF9), Oatmilk (#F9F2E9), bright ...
White background with exceptionally ethereal airy abstract flowing currents of Rosewood (#ED6363), Driftwood (#D4B3A7), Mint (#F5FCF9), Oatmilk (#F9F2...
Bright white, tons of light feelings, with exceptionally ethereal airy abstract flowing of Rosewood (#ED6363), Driftwood (#D4B3A7), Mint (#F5FCF9), Oa...
Ethereal abstract seascape at sunrise glowing horizon where sea and sky blend into soft light; flowing luminous gradients in Rosewood (#ED6363), Drift...
Cinematic abstract seascape at sunrise soft radiant light breaking over the horizon, luminous gradients in Rosewood (#ED6363), Driftwood (#D4B3A7), Mi...
