Theme
Plaster
Sora + Sora
Pressed in, or raised out
Settings · Players · Personal apps
Primary Secondary Tertiary
Tokens
The theme as CSS
/* Plaster · full palette · Designed using Design Lounge (https://www.designlounge.live)
Primary / secondary / tertiary + feedback + surfaces. Match the numbers.
Free to use. */
:root {
/* Brand */
--primary: #3d3833;
--primary-ink: #fffdf8;
--primary-soft: #cecbc7;
--secondary: #6b655e;
--secondary-ink: #fffdf8;
--secondary-soft: #d5d1cd;
--tertiary: #8a3d2e;
--tertiary-ink: #fffdf8;
--tertiary-soft: #d9ccc6;
/* Surface */
--bg: #e6e3df;
--surface: #e6e3df;
--surface-2: #dad6d0;
--surface-3: #cfcbc6;
--ink: #2a2622;
--ink-2: #56514b;
--ink-3: #625c56;
--line: #b9b3aa;
--line-strong: #837d76;
/* Feedback — reserved for live state, never decoration */
--success: #2f6b4a;
--success-ink: #fffdf8;
--success-soft: #ccd2ca;
--success-on-soft: #295e41;
--warning: #9b6212;
--warning-ink: #fffdf8;
--warning-soft: #ddd2c3;
--warning-on-soft: #784c0e;
--danger: #a63a2e;
--danger-ink: #fffdf8;
--danger-soft: #ddcbc6;
--danger-on-soft: #923328;
--info: #4b5d75;
--info-ink: #fffdf8;
--info-soft: #d0d0d0;
--info-on-soft: #425267;
/* Chrome */
--focus: #3d3833;
--link: #3d3833;
--overlay: #141210;
--inverse: #2a2622;
--inverse-ink: #e6e3df;
/* Aliases */
--accent: var(--primary);
--accent-ink: var(--primary-ink);
--positive: var(--success);
--font-display: "Sora", Georgia, serif;
--font-text: "Sora", system-ui, sans-serif;
--radius: 20px;
--shadow: 8px 8px 18px rgba(74,66,58,.22), -8px -8px 18px rgba(255,255,255,.85);
}
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-text);
}
h1, h2, h3, .display { font-family: var(--font-display); }