/* ========================================================================== corporate-memphis-theme / tokens -------------------------------------------------------------------------- This file is the single source of truth. Every literal value in the theme lives here exactly once. The Tailwind adapters next to it (theme.css for v4, preset.js for v3) hold no values of their own; they point at these custom properties with var(). Each group is annotated with the creative-direction axis the choice serves. The four axes are tone register, aesthetic philosophy, audience relationship, and sensory ambition. Read them at https://rampstack.co/framework/creative-direction Contrast ratios in the comments are measured against the ground (--cm-ground), the surface (--cm-surface), or the fill named. They are WCAG 2.1 relative-luminance figures. Every text pairing here clears AA. ONE THING TO KNOW BEFORE READING THE PALETTE. This register draws with solids and no contour outlines, so every edge inside an illustration is the boundary between two solids and contrast becomes a drawing problem rather than a text problem. Most of the illustration fills below measure well under 3:1 against the ground and against each other. That is measured, it is not fixable inside this palette, and the ILLUSTRATION PALETTE group says what the scenes do about it. ========================================================================== */ :root { /* ---------------------------------------------------------------------- GROUND AND INK Aesthetic philosophy axis. Polished Standard asks for a ground the reader does not have to notice, and pure white is not that: white ground under saturated flat fills makes the fills look pasted on. A ground warmed a few points toward peach gives the illustration somewhere to sit. Ink is a desaturated navy rather than black, because black next to a coral fill reads as a different design system arriving mid-page. ---------------------------------------------------------------------- */ --cm-ground: #fdf8f4; /* page background, warm off-white */ --cm-surface: #ffffff; /* cards and raised panels */ --cm-surface-soft: #fdeee8; /* tinted section bands, quiet panels */ --cm-ink: #22303c; /* text. 12.80:1 on ground, 13.50:1 on surface */ --cm-ink-muted: #516471; /* secondary text. 5.84:1 on ground, 5.44:1 on surface-soft */ /* ---------------------------------------------------------------------- ACTION COLORS Tone register axis. Conversational sets the volume: saturated enough to read as friendly, short of the voltage that would make the page shout. The coral everyone recognizes in this register is #f4796a, and it is a fill color rather than a text background. White on it measures 2.70:1, which fails AA for body text and fails the 3:1 floor for large text as well. The action color below is the same hue pushed down until white clears 4.5:1. The recognizable coral survives in the illustration palette, where nothing sits on it but more illustration. ---------------------------------------------------------------------- */ --cm-primary: #cf4130; /* white text: 4.72:1 */ --cm-primary-ink: #ffffff; --cm-secondary: #0f7a70; /* white text: 5.20:1. Against ground: 4.93:1 */ --cm-secondary-ink: #ffffff; --cm-destructive: #c4362b; /* white text: 5.37:1 */ --cm-destructive-ink: #ffffff; /* ---------------------------------------------------------------------- SEMANTIC FILLS Aesthetic philosophy axis. Badges take ink text on a pale tint rather than colored text on white. Pale tints keep the badge quiet enough for a Polished Standard page while leaving the hue free to mean something, and ink on every one of them clears 11:1, so the fill never has to defend the label. ---------------------------------------------------------------------- */ --cm-fill-neutral: #eef1f3; /* ink on fill: 11.90:1 */ --cm-fill-success: #dff2ec; /* ink on fill: 11.60:1 */ --cm-fill-info: #dceefb; /* ink on fill: 11.35:1 */ --cm-fill-warning: #fcefc7; /* ink on fill: 11.77:1 */ --cm-fill-danger: #fce3dd; /* ink on fill: 11.03:1 */ /* ---------------------------------------------------------------------- ILLUSTRATION PALETTE Sensory ambition axis, and the reason this repo exists. The scenes in illustrations/ are flat vector with no outline, so every edge in them is the boundary between two fills. That makes contrast a structural concern rather than a text concern. Measured against the ground: plum 3.82:1, skin-2 4.14:1, coral 2.56:1, teal 2.80:1, skin-1 1.91:1, sky 1.74:1, mustard 1.56:1. Two of the seven clear 3:1. Adjacent pairs are worse, and worse in a way that is easy to miss until something is drawn: plum against skin-2 is 1.08:1, coral against teal is 1.10:1, skin-1 against mustard is 1.23:1. Two solids at 1.1:1 sharing an edge produce one solid. There is no version of this palette that fixes it. Darkening skin-1 until it clears 3:1 on the ground drops it to 1.01:1 against the teal, which moves the problem rather than solving it. The trade is structural to a pastel register. So the scenes do three things instead, and every file in illustrations/ says in its construction comment which ones it is using: 1. They are decorative. Each is aria-hidden and the meaning it carries is in the copy beside it, which is what makes fills under 3:1 permissible rather than merely common. 2. Where two solids have to share an edge, the one on top is drawn over a paper-colored copy of itself a few units wider, which leaves a white gap between them. --cm-illo-paper is that color, and the gap is the one technique this palette cannot be drawn without. 3. Every figure carries at least one ink element, usually the hair, so the eye has something above 6:1 to find it by. TWO SKIN TOKENS, DELIBERATELY. The best known corporate work in this register solved the question of what color a person is by making people lilac and blue. That avoids the question rather than answering it, and it was fairly criticized for it. Two warm tones that differ from each other lets a scene hold more than one kind of person, which is the thing the single non-naturalistic fill cannot do. Add a third if your scenes need one; nothing here assumes there are exactly two. ---------------------------------------------------------------------- */ --cm-illo-coral: #f4796a; --cm-illo-teal: #2aa79b; --cm-illo-mustard: #f5c34b; --cm-illo-plum: #8c6bd8; --cm-illo-sky: #7ec8f2; --cm-illo-skin-1: #e9a887; --cm-illo-skin-2: #a9694a; --cm-illo-line: var(--cm-ink); /* the few places a scene draws a stroke */ --cm-illo-paper: var(--cm-surface); /* the fill a pale shape sits on */ /* Background shapes. These are the blobs and arcs that sit behind copy, so they are picked to stay under 1.2:1 against the ground. A background shape that competes with the text in front of it has stopped being background. */ --cm-blob-1: #fce3dd; /* 1.16:1 on ground */ --cm-blob-2: #dff2ec; /* 1.10:1 on ground */ /* ---------------------------------------------------------------------- RADIUS Audience relationship axis. Companion is the position that sits beside the reader, and radius is the most direct instrument on that axis. Every corner in this theme is rounded further than a Peer-register system would round it, and the illustration figures are built from the same curve family, so the interface and the artwork agree about how soft the page is. 14px on a card rather than 8px is the whole difference between a system that stands across from the reader and one that sits next to them. Past roughly 24px on a card the page starts addressing the reader as a child, which is a tone failure wearing a relationship-axis costume. ---------------------------------------------------------------------- */ --cm-radius-tight: 8px; /* badges, tags, inline chips */ --cm-radius: 14px; /* buttons, inputs, cards */ --cm-radius-lg: 24px; /* panels, image frames, the illustration plate */ --cm-radius-pill: 999px; /* avatars, pill toggles, and the primary button */ /* ---------------------------------------------------------------------- BORDER Aesthetic philosophy axis. This register carries almost no borders. Depth comes from fill changes and soft elevation, so a border here is either a hairline that separates two whites or a real boundary on a control. Those two jobs need different values and only one of them is an accessibility surface. --cm-border is decorative: 1.34:1 on surface, well under the 3:1 floor, and it is never the only thing marking a boundary. --cm-border-strong is what an input uses, because the edge of a text field is a boundary a person has to find. ---------------------------------------------------------------------- */ --cm-border-width: 1px; --cm-border-width-heavy: 2px; --cm-border: #e7ddd6; /* hairlines only. 1.34:1 on surface */ --cm-border-strong: #9a8b80; /* control edges. 3.29:1 on surface, 3.12:1 on ground */ /* ---------------------------------------------------------------------- SHADOW Sensory ambition axis. Soft, wide, low opacity, and tinted with the ink rather than with black, so elevation warms rather than greys. Two layers per step: a tight one that gives the edge definition and a wide one that gives the plane its distance. A single-layer shadow at this softness reads as a blur rather than as a raised object. ---------------------------------------------------------------------- */ --cm-shadow-sm: 0 1px 2px 0 rgba(34, 48, 60, 0.06), 0 1px 3px 0 rgba(34, 48, 60, 0.07); --cm-shadow: 0 2px 4px -1px rgba(34, 48, 60, 0.07), 0 10px 20px -6px rgba(34, 48, 60, 0.12); --cm-shadow-lg: 0 4px 8px -2px rgba(34, 48, 60, 0.07), 0 22px 40px -10px rgba(34, 48, 60, 0.16); /* ---------------------------------------------------------------------- TYPE Tone register axis. A rounded sans is what carries Conversational in this register, so the stack asks for one before it asks for anything else. It loads no webfont and makes no network request, which means the roundness is a request rather than a guarantee: ui-rounded resolves on Apple platforms, and Windows and most Linux desktops fall through to a grotesque. Where it falls through, the geometry has to carry the register on its own, which is what the large radii and the illustration are for. If the roundness matters enough to spend a network request on, add a rounded webfont ahead of this stack and nothing else in the theme moves. Weight does the work: 800 on display against 400 on body. The jump is wide because a rounded face at a middle weight reads as soft rather than as confident, and Conversational still has to sound like it knows things. ---------------------------------------------------------------------- */ --cm-font-sans: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Varela Round", Quicksand, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --cm-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --cm-weight-body: 400; --cm-weight-medium: 500; --cm-weight-bold: 700; --cm-weight-display: 800; --cm-text-display: 3.5rem; /* 56px */ --cm-text-h1: 2.5rem; /* 40px */ --cm-text-h2: 1.875rem; /* 30px */ --cm-text-h3: 1.25rem; /* 20px */ --cm-text-lead: 1.1875rem; /* 19px */ --cm-text-body: 1rem; /* 16px, the floor for form inputs on iOS */ --cm-text-sm: 0.875rem; /* 14px, the floor for any body content */ --cm-text-xs: 0.75rem; /* 12px, labels and badges only, never prose */ --cm-leading-tight: 1.1; --cm-leading-snug: 1.3; --cm-leading-body: 1.65; --cm-tracking-tight: -0.015em; --cm-tracking-wide: 0.04em; /* ---------------------------------------------------------------------- SPACE Aesthetic philosophy axis. Polished Standard spends its budget on air. The scale is fixed so that the vertical rhythm survives a page being assembled by three people, and the section step holds at 80px on desktop against 56px on mobile. The prose measure is 62ch rather than the 68 to 72 a text-only page would take. Copy in this register sits beside an illustration for most of its life, and a column that runs to 70 characters next to a 460px picture leaves the reader's eye travelling further than the picture is tall. ---------------------------------------------------------------------- */ --cm-space-1: 4px; --cm-space-2: 8px; --cm-space-3: 12px; --cm-space-4: 16px; --cm-space-6: 24px; --cm-space-8: 32px; --cm-space-10: 40px; --cm-space-14: 56px; --cm-space-20: 80px; --cm-space-28: 112px; --cm-measure: 62ch; /* prose measure */ --cm-container: 1140px; /* page max width */ /* ---------------------------------------------------------------------- GRID Aesthetic philosophy axis. One number, because the card row is the only place in this theme where a column count is a design decision rather than a consequence. Three is what a feature row holds at this container width before the cards stop having room for a spot illustration. ---------------------------------------------------------------------- */ --cm-columns: 3; /* ---------------------------------------------------------------------- MOTION Sensory ambition axis. Everything moves the same way: up, slightly, on a curve that decelerates. 200ms is slow enough to read as a lift rather than a flicker and quick enough that a person clicking through a form never waits for it. The lift is 3px, which is the distance at which the shadow visibly grows without the element appearing to jump. ---------------------------------------------------------------------- */ --cm-duration: 200ms; --cm-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --cm-lift: 3px; /* ---------------------------------------------------------------------- FOCUS Audience relationship axis. The ring is the secondary teal rather than the primary coral, because the primary is already the color of the button a keyboard user is most often focused on, and a ring the same hue as the thing it rings is not a ring. Offset outside the element so it never overlaps a rounded corner. ---------------------------------------------------------------------- */ --cm-ring: var(--cm-secondary); /* 4.93:1 on ground, clears the 3:1 UI floor */ --cm-ring-width: 3px; --cm-ring-offset: 2px; /* ---------------------------------------------------------------------- ILLUSTRATION LAYER Sensory ambition axis, and the dial this whole theme turns on. --cm-illo-share is the width the illustration takes in a paired illustration-and-copy block, expressed as a grid fraction. It is the single token that moves this theme along the sensory axis, and CUSTOMIZE.md works the move in both directions. Setting it to 0fr collapses the picture column to nothing and the theme lands on the ordinary SaaS register, which is the honest name for what is left. The remaining sizes exist so a scene has a documented ceiling. An illustration that scales with its column keeps growing until it is taller than the copy beside it, and at that point the reader reads the picture first and the headline second. ---------------------------------------------------------------------- */ --cm-illo-share: 0.9fr; /* the picture column's share. 0fr removes it */ --cm-illo-max: 460px; /* ceiling on a hero or section scene */ --cm-illo-spot: 88px; /* the small scene that sits inside a card */ --cm-blob-size: 520px; /* the background blob behind a hero */ --cm-arc-size: 260px; /* the background arc stack */ --cm-blob-bleed: 12%; /* how far a background shape runs past its block */ } /* Anyone who has asked the operating system to stop animating gets a theme that still changes on hover and still shows focus, with no travel and no duration. The shadow step is what carries the state instead. */ @media (prefers-reduced-motion: reduce) { :root { --cm-lift: 0px; --cm-duration: 1ms; } }