Design system — Premium
Maison Verelle · Design systems — luxury and hospitality · New Orleans, LA
Sebastien Aurelio Marchand starts Maison Verelle's design system from the Premium starter and adapts it to the brand.
Use this templateAll colours
Colors| Name | Group | Value | Read on | Usage note |
|---|---|---|---|---|
| background | {"light":"#fcfbf8","dark":"#0d0c0b"} | — | The page itself. Everything else sits on it. | |
| foreground | {"light":"#141210","dark":"#eae6de"} | background | Body text and icons on the page. | |
| card | {"light":"#ffffff","dark":"#151412"} | — | Raised panels, dialogs and menus. | |
| card-foreground | {"light":"#141210","dark":"#eae6de"} | card | Text inside a card. | |
| popover | {"light":"#ffffff","dark":"#1a1916"} | — | Menus, tooltips and pickers that float over content. | |
| popover-foreground | {"light":"#141210","dark":"#eae6de"} | popover | Text inside a menu or tooltip. | |
| muted | {"light":"#f3f0ea","dark":"#1d1b18"} | — | Quiet fills: table headers, empty states, code blocks. | |
| muted-foreground | {"light":"#5c564c","dark":"#a39d92"} | muted | Hints and captions. Also reads on the page and on cards. | |
| primary | {"light":"#141210","dark":"#e8dfcc"} | — | The one main action on a screen. | |
| primary-foreground | {"light":"#fcfbf8","dark":"#141210"} | primary | Label on a primary button. | |
| secondary | {"light":"#efebe3","dark":"#23211d"} | — | Second actions and quiet selected states. | |
| secondary-foreground | {"light":"#141210","dark":"#eae6de"} | secondary | Label on a secondary button. |
Tables
Colors
21 sample rows · 5 columnsEvery colour the product uses, light and dark, and what each is read on.
| Name | Group | Value | Read on | Usage note |
|---|---|---|---|---|
| background | {"light":"#fcfbf8","dark":"#0d0c0b"} | — | The page itself. Everything else sits on it. | |
| foreground | {"light":"#141210","dark":"#eae6de"} | background | Body text and icons on the page. | |
| card | {"light":"#ffffff","dark":"#151412"} | — | Raised panels, dialogs and menus. | |
| card-foreground | {"light":"#141210","dark":"#eae6de"} | card | Text inside a card. | |
| popover | {"light":"#ffffff","dark":"#1a1916"} | — | Menus, tooltips and pickers that float over content. | |
| popover-foreground | {"light":"#141210","dark":"#eae6de"} | popover | Text inside a menu or tooltip. | |
| muted | {"light":"#f3f0ea","dark":"#1d1b18"} | — | Quiet fills: table headers, empty states, code blocks. | |
| muted-foreground | {"light":"#5c564c","dark":"#a39d92"} | muted | Hints and captions. Also reads on the page and on cards. | |
| primary | {"light":"#141210","dark":"#e8dfcc"} | — | The one main action on a screen. | |
| primary-foreground | {"light":"#fcfbf8","dark":"#141210"} | primary | Label on a primary button. | |
| secondary | {"light":"#efebe3","dark":"#23211d"} | — | Second actions and quiet selected states. | |
| secondary-foreground | {"light":"#141210","dark":"#eae6de"} | secondary | Label on a secondary button. |
Typography
7 sample rows · 4 columnsThe text styles: font, weight, size, line height and spacing.
| Name | Group | Style | Usage note |
|---|---|---|---|
| display | {"font":"'Cormorant Garamond', Didot, 'Bodoni 72', Georgia, serif","weight":500,"size":60,"lineHeight":64,"letterSpacing":-0.01} | The one line on a hero image. | |
| title | {"font":"'Cormorant Garamond', Didot, 'Bodoni 72', Georgia, serif","weight":500,"size":36,"lineHeight":44,"letterSpacing":0} | The page title. | |
| heading | {"font":"'Cormorant Garamond', Didot, 'Bodoni 72', Georgia, serif","weight":600,"size":24,"lineHeight":32,"letterSpacing":0} | Section headings. | |
| body | {"font":"Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif","weight":400,"size":16,"lineHeight":28,"letterSpacing":0.01} | Everything people read. | |
| eyebrow | {"font":"Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif","weight":500,"size":11,"lineHeight":16,"letterSpacing":0.18} | Small capitals above a title, buttons and menus. | |
| caption | {"font":"Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif","weight":400,"size":13,"lineHeight":20,"letterSpacing":0.02} | Captions and small print. | |
| code | {"font":"ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace","weight":400,"size":13,"lineHeight":20,"letterSpacing":0} | Booking references. |
Spacing
6 sample rows · 3 columnsThe spacing scale every layout is built from.
| Name | Value | Usage note |
|---|---|---|
| space-1 | 4 | Between an icon and its label. |
| space-2 | 8 | Between related controls. |
| space-4 | 16 | Between a label and its line. |
| space-6 | 24 | Padding of a card. |
| space-12 | 48 | Between groups. |
| space-24 | 96 | Between sections; space is the luxury. |
Corner radius
3 sample rows · 3 columnsHow round corners are, from chips to avatars.
| Name | Value | Usage note |
|---|---|---|
| radius-none | 0 | Buttons, fields, cards and images. |
| radius-sm | 2 | Tags and checkboxes. |
| radius-full | 9,999 | Avatars only. |
Shadows
3 sample rows · 3 columnsElevation: how far something floats above the page, in light and dark.
| Name | Value | Usage note |
|---|---|---|
| shadow-sm | {"light":{"x":0,"y":1,"blur":2,"spread":0,"color":"#1412100d"},"dark":{"x":0,"y":1,"blur":2,"spread":0,"color":"#00000059"}} | Almost nothing: cards on ivory. |
| shadow-lg | {"light":{"x":0,"y":24,"blur":60,"spread":-20,"color":"#1412101f"},"dark":{"x":0,"y":24,"blur":60,"spread":-20,"color":"#000000b3"}} | Dialogs and the booking panel. |
| shadow-md | {"light":{"x":0,"y":8,"blur":24,"spread":-12,"color":"#14121014"},"dark":{"x":0,"y":8,"blur":24,"spread":-12,"color":"#00000099"}} | Menus and the floating reserve bar. |
Opacity
3 sample rows · 3 columnsHow see-through things get: disabled controls, tints and overlays.
| Name | Value | Usage note |
|---|---|---|
| opacity-disabled | 0.4 | A control that cannot be used yet. |
| opacity-veil | 0.35 | The dark veil over a hero image so its line reads. |
| opacity-overlay | 0.7 | The dim behind a dialog. |
Motion
3 sample rows · 3 columnsHow fast things move and how they ease in and out.
| Name | Value | Usage note |
|---|---|---|
| motion-base | {"duration":240,"easing":"ease-out"} | Hover and focus; slower than usual on purpose. |
| motion-slow | {"duration":420,"easing":"cubic-bezier(0.22, 0.61, 0.36, 1)"} | Panels, images and pages fading in. |
| motion-reveal | {"duration":700,"easing":"cubic-bezier(0.22, 0.61, 0.36, 1)"} | A hero image settling in once, on arrival. |
Components
8 sample rows · 4 columnsEach component family, drawn as it looks in light and dark, with where to use it.
| Name | Group | Sample | Usage note |
|---|---|---|---|
| Button | <style>.w{font-family:Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif;}.b{font:inherit;font-family:Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif;font-size:11px;font-weight:500;line-height:1;height:44px;padding:0 28px;border-radius:0px;border:1px solid transparent;cursor:pointer;text-transform:uppercase;letter-spacing:0.18em;transition:filter var(--motion-fast, 120ms ease-out),transform var(--motion-fast, 120ms ease-out);}.r{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.p{background:var(--primary);color:var(--primary-foreground)}.p.h{filter:brightness(1.08)}.p.f{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}.p:disabled{opacity:var(--opacity-disabled, .5);cursor:not-allowed}</style><div class="w r"><button class="b p">Save</button><button class="b p h">Hover</button><button class="b p f">Focus</button><button class="b p" disabled>Disabled</button></div> | The one main action of a screen. Never two primary buttons side by side. | |
| Button variants | <style>.w{font-family:Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif;}.b{font:inherit;font-family:Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif;font-size:11px;font-weight:500;line-height:1;height:44px;padding:0 28px;border-radius:0px;border:1px solid transparent;cursor:pointer;text-transform:uppercase;letter-spacing:0.18em;transition:filter var(--motion-fast, 120ms ease-out),transform var(--motion-fast, 120ms ease-out);}.r{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.s{background:var(--secondary);color:var(--secondary-foreground)}.o{background:transparent;color:var(--foreground);border-color:var(--border)}.q{background:transparent;color:var(--muted-foreground);box-shadow:none}.d{background:var(--destructive);color:var(--destructive-foreground)}</style><div class="w r"><button class="b s">Secondary</button><button class="b o">Outline</button><button class="b q">Quiet</button><button class="b d">Delete</button></div> | Outline and quiet for everything else; delete only for what cannot be undone. | |
| Text field | <style>.w{font-family:Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif}.g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.f{display:grid;gap:6px;max-width:320px}.l{font-size:12px;font-weight:600;color:var(--foreground)}.i{font:inherit;font-size:14px;height:44px;padding:0 12px;border-radius:0px;border:1px solid var(--input);background:var(--background);color:var(--foreground);transition:box-shadow var(--motion-fast, 120ms ease-out)}.i:focus,.i.f{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}.h{font-size:12px;color:var(--muted-foreground)}.e .i{border-color:var(--destructive)}.e .h{color:var(--destructive)}</style><div class="w g"><label class="f"><span class="l">Email</span><input class="i" placeholder="name@company.com"><span class="h">We send the receipt here.</span></label><label class="f"><span class="l">Name</span><input class="i f" value="Dana Ruiz"><span class="h">Focused.</span></label><label class="f e"><span class="l">Phone</span><input class="i" value="555-01"><span class="h">Enter all ten digits.</span></label></div> | Every field has a visible label above it and a hint or error below. | |
| Card | <style>.w{font-family:Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif;}.b{font:inherit;font-family:Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif;font-size:11px;font-weight:500;line-height:1;height:44px;padding:0 28px;border-radius:0px;border:1px solid transparent;cursor:pointer;text-transform:uppercase;letter-spacing:0.18em;transition:filter var(--motion-fast, 120ms ease-out),transform var(--motion-fast, 120ms ease-out);}.c{max-width:380px;padding:20px;border-radius:0px;border:1px solid var(--border);background:var(--card);color:var(--card-foreground);box-shadow:var(--shadow-sm, none)}.k{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}.t{margin:0 0 4px;font-family:'Cormorant Garamond', Didot, 'Bodoni 72', Georgia, serif;font-size:18px;font-weight:600}.m{margin:0 0 14px;font-size:13px;color:var(--muted-foreground)}.a{display:flex;gap:8px}.p{background:var(--primary);color:var(--primary-foreground)}.o{background:transparent;color:var(--card-foreground);border-color:var(--border);box-shadow:none}</style><div class="w c"><p class="k">Report</p><h3 class="t">Quarterly summary</h3><p class="m">Updated 2 hours ago by Dana Ruiz</p><div class="a"><button class="b p">Open</button><button class="b o">Share</button></div></div> | One idea per card: a kicker, a title, one line of detail and at most two actions. | |
| Badge | <style>.w{font-family:Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif}.r{display:flex;flex-wrap:wrap;gap:8px}.x{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:0px;font-size:12px;font-weight:600;border:1px solid var(--border);color:var(--foreground);background:var(--muted)}.x i{width:7px;height:7px;border-radius:50%;background:currentColor}.ok{color:var(--success)}.wa{color:var(--warning)}.er{color:var(--destructive)}.pr{background:var(--primary);color:var(--primary-foreground);border-color:transparent}</style><div class="w r"><span class="x">Draft</span><span class="x pr">New</span><span class="x ok"><i></i>Live</span><span class="x wa"><i></i>Waiting</span><span class="x er"><i></i>Failed</span></div> | A status always pairs its colour with a word. | |
| Toggle list | <style>.w{font-family:Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif}.l{display:grid;max-width:440px;border:1px solid var(--border);border-radius:0px;background:var(--card)}.o{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;font-size:14px;color:var(--card-foreground)}.o+.o{border-top:1px solid var(--border)}.o small{display:block;font-size:12px;color:var(--muted-foreground)}.t{appearance:none;flex:none;width:40px;height:26px;border-radius:var(--radius-full, 999px);background:var(--input);position:relative;cursor:pointer;margin:0;transition:background var(--motion-fast, 120ms ease-out)}.t::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--background);transition:transform var(--motion-fast, 120ms ease-out)}.t:checked{background:var(--primary)}.t:checked::after{transform:translateX(14px)}.t:disabled{opacity:var(--opacity-disabled, .5);cursor:not-allowed}</style><div class="w l"><label class="o"><span>Email alerts<small>When a task is assigned to you</small></span><input type="checkbox" class="t" checked></label><label class="o"><span>Weekly digest<small>Every Monday morning</small></span><input type="checkbox" class="t"></label><label class="o"><span>Text messages<small>Needs a verified phone</small></span><input type="checkbox" class="t" disabled></label></div> | A switch acts at once. When a choice needs a Save, use a checkbox. | |
| Collapsible list | <style>.w{font-family:Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif}.d{max-width:500px;border:1px solid var(--border);border-radius:0px;background:var(--card);color:var(--card-foreground)}details+details{border-top:1px solid var(--border)}summary{list-style:none;cursor:pointer;padding:12px 16px;font-size:14px;font-weight:600;display:flex;justify-content:space-between;gap:12px}summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--muted-foreground)}details[open] summary::after{content:"\2212"}p{margin:0;padding:0 16px 14px;font-size:13px;color:var(--muted-foreground)}</style><div class="w d"><details open><summary>What is included</summary><p>Every table, view and page in the template.</p></details><details><summary>Who can see it</summary><p>Everyone in your organization.</p></details><details><summary>Can I undo it</summary><p>Yes, from the history of each item.</p></details></div> | For answers people look up once. Never hide a step people must take. | |
| Tabs | <style>.w{font-family:Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif}.t{display:flex;gap:4px;border-bottom:1px solid var(--border)}.t span{padding:10px 14px;font-size:14px;color:var(--muted-foreground);border-bottom:2px solid transparent;margin-bottom:-1px;text-transform:uppercase;letter-spacing:0.18em}.t .on{color:var(--foreground);font-weight:600;border-color:var(--primary)}</style><div class="w t"><span class="on">Overview</span><span>Activity</span><span>Settings</span></div> | Tabs switch views of one thing. Three to five, short names. |
Related templates
- Brand Assets HubOak Whistle Design3 tables · 8 views · 1 form · 1 row action · 1 agentGallery
- Company profileTidewater Mobile Tire & Brake3 tables · 5 views · 1 form · 1 dashboard · 1 digest · 4 agentsAgents
- Competitor AnalysisRavenbrook Field Software2 tables · 5 views · 1 form · 1 agentBoards
- Content CalendarThistlewick Garden Co.3 tables · 10 views · 1 form · 2 row actions · 1 agentCalendar
- Creator Content PlannerFernhollow Plant Co.3 tables · 11 views · 1 form · 2 row actions · 1 agentLinked tables
- Creator StudioWildgrain Kitchen5 tables · 15 views · 1 form · 3 row actions · 1 agentLinked tables