Decanter Design System.

Decanter Design System A Tailwind preset, not an SDK

Pin the documented generation route

The verified Decanter package is 7.5.3 and declares Tailwind CSS ^3.4.17. Its public entry is a Tailwind configuration preset. Add require("decanter") to presets, point content at actual source files and compile the utility stylesheet. There is no Decanter React provider to import.

The documentation includes upcoming v8 removals while still labelling the installation route v7. This reference pins v7.5.3 and avoids the deprecated foggy, slab and older modular-text utilities. The standalone preview is a clearly labelled interpretation of the layout rules, not a claimed Tailwind compilation.

Read the supporting specification

Decanter Design System Responsive modular typography

A scale depends on its base

Source Sans 3 and Source Serif 4 are the primary sans and serif families, with Helvetica/Arial and Georgia/Times fallbacks. The type-* utilities are proportional roles rather than fixed pixel headings. Their scale multiplier is 1.15 on mobile, 1.2 on tablet and 1.25 on desktop.

The specimen chooses the documented basefont-23 configuration: 18px at XS–SM, 21px at MD–XL and 23px at 2XL. It uses a type-3-sized headline so the display remains proportionate in a compact embedded example. A project choosing a different base must recalculate the resulting sizes instead of copying this preview’s pixels.

Read the supporting specification

Decanter Design System Fluid container and grid

The screen edge is part of the layout

The cc container uses curated edge spacing: 20px at XS, 30px at SM, 50px at MD, 80px at LG and 100px at XL. It grows until reaching a 1500px content maximum at a 1700px viewport. This is a fluid system with explicit edge rules, not simply a fixed 1200px container.

The specimen follows those edges and changes its two editorial cards into a single column below MD. Card contents use ordinary document order, so keyboard navigation follows the same reading sequence when the layout stacks.

Read the supporting specification

Decanter Design System Spacing that responds

Use responsive utilities deliberately

Decanter supplies rs-m-* and rs-p-* families for responsive margin and padding. A selected step changes at its documented ranges; it is not a Tailwind fixed-space alias. The example code uses rs-p-1 around a card and ordinary fixed padding for its action.

To keep the reference reproducible, the standalone interpretation identifies every CSS adjustment as application code. For a native build, use the preset’s generated utility rather than defining a second competing rule with the same name. Avoid dynamic fragments such as "rs-p-" + size when the build scanner cannot see the complete class.

Read the supporting specification

Decanter Design System Identity and interactive colour

Cardinal and digital red serve different roles

Stanford’s primary Cardinal red is #8c1515. Digital red #b1040e is an interactive/accent colour and does not replace Cardinal in the university identity. Digital blue #006cb8 is for links, with #00548f for its darker interaction state.

The specimen uses digital red for its expandable-detail action and restrained neutral surfaces. It does not include a Stanford wordmark, seal or official identity bar. An institutional deployment must use authorised identity assets and the university’s brand rules; a technical reference does not confer endorsement.

Read the supporting specification

Decanter Design System Editorial cards with actions

Compose content instead of guessing a component API

The official card examples are semantic HTML with utilities for spacing, type, surfaces and actions. Our composition keeps the event category separate from the title, shows its date and venue in text, and uses a real button to reveal an abstract in place. It does not invent a Decanter Card prop API.

A linked title would be appropriate when navigation is the actual result. Here the outcome is local expansion, so a button with aria-expanded and aria-controls communicates that behaviour. The preview uses original event names and abstracts rather than copying university news.

• Use the event title as the card heading.
• Keep time and location visible before expansion.
• Use a button for disclosure and an anchor only for real navigation.

Read the supporting specification

Decanter Design System Filters and disclosure

Keep content available across layouts

The topic selector filters the two original research-event cards and updates a visible result count. The no-match option intentionally demonstrates an empty state and a reset path. The filter does not alter the heading hierarchy or convert cards into selectable form options.

Each abstract has its own button state. Closing a card leaves focus on the same trigger. Changing the filter closes hidden abstracts so returning to a topic starts from a consistent overview. The controls are application behaviour added to a utility-based design approach, not packaged Decanter JavaScript.

Read the supporting specification

Decanter Design System Build and validate the result

Generated classes require scanned sources

The supplied setup targets Tailwind 3 and the verified Decanter 7.5.3 preset. It includes the input directives, content glob, output command and an original card composition. Link the resulting stylesheet from the document head. Load approved font files separately or intentionally retain the documented fallbacks.

The preview was not built through that toolchain and says so in its implementation label. A production adoption should compile its own complete class set and inspect the generated output, especially after a major-version upgrade changes deprecated utilities.

1. Pin Decanter and its compatible Tailwind major.
2. Register the preset and scan the real source directory.
3. Compile the three Tailwind directive layers.
4. Verify the chosen base font, screen edges and card actions at the documented breakpoints.

Read the supporting specification

Decanter Design System Component Examples

<article class="bg-white border border-solid border-black-20 rs-p-1">
  <p class="font-semibold text-digital-red">Research conversation</p>
  <h2 class="type-2 font-serif leading-display">Reading the changing coast</h2>
  <p class="leading-normal">An original example event about field observations.</p>
  <button type="button" class="bg-digital-red text-white px-26 py-10
    hocus:bg-cardinal-red-dark focus:outline focus:outline-2">
    Show session details
  </button>
</article>

module.exports = {
  presets: [require('decanter')],
  content: ['./src/**/*.{html,js}']
};

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Decanter editorial composition</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f5f2;color:#2e2d29;font:18px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif}.cc{margin-inline:20px;max-width:1500px;padding-block:40px}h1{font-family:Georgia,serif;font-size:1.520875em;line-height:1.2;margin:24px 0}h2{font:700 1.3225em/1.25 Georgia,serif;margin:12px 0}p{margin:16px 0}.overline{letter-spacing:.12em;font-size:14px;font-weight:700}.filters{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-block:24px;border-block:1px solid #c0c0bf;margin-block:32px}select{font:inherit;background:white;border:1px solid #767674;padding:8px}.cards{display:grid;grid-template-columns:1fr;gap:20px}article{background:white;padding:24px;border-top:4px solid #8c1515}article time{font-size:16px;color:#53565a}.topic{font-size:14px;font-weight:600;letter-spacing:.04em}.abstract{border-top:1px solid #d5d5d4;padding-top:16px}.action{font:600 16px/1.3 Arial,sans-serif;background:#b1040e;color:white;border:0;padding:12px 20px;cursor:pointer}.action:hover{background:#820000;text-decoration:underline}.reset{font:inherit;color:#006cb8;background:none;border:0;text-decoration:underline;padding:8px 0;cursor:pointer}:focus-visible{outline:3px solid #00548f;outline-offset:4px}small{display:block;font-size:14px;color:#53565a;margin-top:32px}[hidden]{display:none!important}@media(min-width:576px){.cc{margin-inline:30px}}@media(min-width:768px){body{font-size:21px}.cc{margin-inline:50px}h1{font-size:1.728em}h2{font-size:1.44em}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:992px){.cc{margin-inline:80px}.cards{gap:36px}h1{font-size:1.953125em}h2{font-size:1.5625em}}@media(min-width:1200px){.cc{margin-inline:100px}.cards{gap:40px}}@media(min-width:1500px){body{font-size:23px}.cards{gap:48px}}@media(min-width:1700px){.cc{margin-inline:auto}}
</style><main class="cc"><p class="overline">RESEARCH CONVERSATIONS · ORIGINAL EXAMPLES</p><h1>Ideas take shape in conversation.</h1><p>A compact editorial collection interpreting Decanter’s responsive type and screen-edge rules.</p><div class="filters"><label for="topic">Topic</label><select id="topic"><option value="all">All topics</option><option value="environment">Environment</option><option value="archives">Archives</option><option value="astronomy">Astronomy</option></select><span id="count" role="status">2 example events</span></div><div class="cards"><article data-topic="environment"><p class="topic">ENVIRONMENT</p><h2>Reading the changing coast</h2><time datetime="2026-10-12">12 October · Fictional seminar room</time><p>How field notes reveal changes that a single measurement cannot capture.</p><button class="action" type="button" aria-expanded="false" aria-controls="coast">Show session details</button><div class="abstract" id="coast" hidden><p>This original sample session compares written observations, sketches and repeat measurements. The conversation asks how researchers describe uncertainty when a landscape changes gradually.</p></div></article><article data-topic="archives"><p class="topic">ARCHIVES</p><h2>The stories between records</h2><time datetime="2026-10-19">19 October · Fictional reading room</time><p>Exploring how context connects objects in a community archive.</p><button class="action" type="button" aria-expanded="false" aria-controls="archive">Show session details</button><div class="abstract" id="archive" hidden><p>This original example considers correspondence, oral history and catalogue descriptions together. It examines how a collection can preserve disagreement without erasing individual perspectives.</p></div></article></div><div id="empty" hidden><h2>No events in this example topic</h2><p>Choose another topic or return to the full collection.</p><button type="button" class="reset" id="reset">Show all topics</button></div><small>Independent OpenDesign specimen. Original content, local font fallbacks and interpreted Decanter layout rules. No Stanford identity or real event listing.</small></main><script>const topic=document.querySelector('#topic'),cards=[...document.querySelectorAll('article')];function filter(){let count=0;cards.forEach(c=>{c.hidden=topic.value!=='all'&&topic.value!==c.dataset.topic;if(!c.hidden)count++;const b=c.querySelector('button');b.setAttribute('aria-expanded','false');b.textContent='Show session details';c.querySelector('.abstract').hidden=true});document.querySelector('#count').textContent=count+' example events';document.querySelector('#empty').hidden=count!==0}topic.onchange=filter;document.querySelector('#reset').onclick=()=>{topic.value='all';filter();topic.focus()};document.querySelectorAll('.action').forEach(b=>b.onclick=()=>{let open=b.getAttribute('aria-expanded')!=='true';b.setAttribute('aria-expanded',String(open));b.textContent=open?'Hide session details':'Show session details';document.getElementById(b.getAttribute('aria-controls')).hidden=!open});</script></html>