Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/demo/hotspot-points.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"x": 50,
"y": 62,
"title": "Three-seat sofa",
"text": "Removable, washable covers in twelve colours. Delivered and assembled in the room."
"text": "Removable, washable covers in twelve colors. Delivered and assembled in the room."
},
{
"x": 87,
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/AccordionDemo.astro
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const faqs = [
{
id: 'custom-cakes',
title: 'Do you take custom cake orders?',
body: '<p>Yes. Order at least five days ahead for a celebration cake, and two weeks ahead for a wedding. Tell us the size, the flavour and any lettering, and we confirm the price before we bake.</p>',
body: '<p>Yes. Order at least five days ahead for a celebration cake, and two weeks ahead for a wedding. Tell us the size, the flavor and any lettering, and we confirm the price before we bake.</p>',
},
{
id: 'order-ahead',
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/BeforeAfterDemo.astro
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const asset = (name: string) => assetBase + name;
<BeforeAfter
before={asset('before.svg')}
after={asset('after.svg')}
beforeAlt="A grey wireframe of a page: the before state"
beforeAlt="A gray wireframe of a page: the before state"
afterAlt="The same page in the Superhero purple and orange: the after state"
width={1200}
height={800}
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/FlipBoxDemo.astro
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const book = svg('<path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4
imageAlt=""
title="Hosting"
text="Fast pages, served close to your visitors."
backText="Every page is prebuilt and served from a network of data centres, so it opens quickly wherever your visitors are, and there is no server of yours to patch."
backText="Every page is prebuilt and served from a network of data centers, so it opens quickly wherever your visitors are, and there is no server of yours to patch."
cta={{ text: 'How hosting works', href: '#flip-box-demo' }}
/>
<FlipBox
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/InfoListDemo.astro
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const steps = [
{ title: 'You pay when happy', text: 'One invoice at the end, once you have seen the result.' },
];
const history = [
{ meta: '2014', title: 'One van, one mower', text: 'The business starts with weekend lawn care for neighbours.' },
{ meta: '2014', title: 'One van, one mower', text: 'The business starts with weekend lawn care for neighbors.' },
{ meta: '2017', title: 'The first design job', text: 'A courtyard garden, and the start of the design side.' },
{ meta: '2021', title: 'A team of six', text: 'Two crews, a designer and an office that answers the phone.' },
{ meta: '2025', title: 'Water-wise gardens', text: 'Drip irrigation and drought-tolerant planting become a service of their own.' },
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/MegaMenuDemo.astro
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const items = [
{
heading: 'Act',
links: [
{ label: 'Forms', href: '#forms', note: 'Enquiries straight to your inbox' },
{ label: 'Forms', href: '#forms', note: 'Inquiries straight to your inbox' },
{ label: 'Bookings', href: '#bookings' },
{ label: 'Reviews', href: '#reviews' },
],
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/TabcordionDemo.astro
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const mug = [
{
id: 'mug-description',
label: 'Description',
body: '<p>A 12 oz stoneware mug, thrown by hand and glazed in a speckled oat colour. Each one is a little different.</p>',
body: '<p>A 12 oz stoneware mug, thrown by hand and glazed in a speckled oat color. Each one is a little different.</p>',
},
{
id: 'mug-size',
Expand Down
146 changes: 73 additions & 73 deletions src/data/catalog.ts

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions src/data/palettes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -212,8 +212,8 @@ const PALETTE_DATA: readonly Omit<Palette, "contrast">[] = [
{ name: "accent", hex: "#c9a227" },
],
culture:
"Navy is the colour of uniforms, banks and courtrooms in the US and UK, so it reads as trust and authority, and can read as cold. Gold says quality; at Chinese New Year or an Indian wedding it says prosperity and celebration, so the accent may feel warmer to some visitors than you meant.",
suits: ["Law", "Finance", "Consulting", "Accountancy", "Insurance"],
"Navy is the color of uniforms, banks and courtrooms in the US and UK, so it reads as trust and authority, and can read as cold. Gold says quality; at Chinese New Year or an Indian wedding it says prosperity and celebration, so the accent may feel warmer to some visitors than you meant.",
suits: ["Law", "Finance", "Consulting", "Accounting", "Insurance"],
pairsWith: ["classic", "minimal"],
},
{
Expand All @@ -240,7 +240,7 @@ const PALETTE_DATA: readonly Omit<Palette, "contrast">[] = [
id: "warm-earthy",
name: "Warm & earthy",
direction: "warm-earthy",
mood: "warm, homely, rooted",
mood: "warm, homey, rooted",
colors: { primary: "#9c4a2f", secondary: "#6f7d4d", accent: "#e0a458", background: "#faf6f0", text: "#33302b" },
roles: [
{ name: "background", hex: "#faf6f0" },
Expand Down Expand Up @@ -292,7 +292,7 @@ const PALETTE_DATA: readonly Omit<Palette, "contrast">[] = [
{ name: "accent", hex: "#f43f5e" },
],
culture:
"Violet reads as creative and digital because so much software uses it. It has older meanings: in Catholic churches it marks Lent and Advent, a colour of waiting and penitence, and in Thailand it is traditionally worn in mourning. The hot pink-red accent reads as urgent, so use it sparingly.",
"Violet reads as creative and digital because so much software uses it. It has older meanings: in Catholic churches it marks Lent and Advent, a color of waiting and penitence, and in Thailand it is traditionally worn in mourning. The hot pink-red accent reads as urgent, so use it sparingly.",
suits: ["Software", "Agencies", "Startups", "Events", "Music"],
pairsWith: ["high-tech", "bold"],
},
Expand Down Expand Up @@ -333,7 +333,7 @@ const PALETTE_DATA: readonly Omit<Palette, "contrast">[] = [
],
culture:
"Green says growth, health and go on most traffic lights, and money in the US, where the notes are green. In many Muslim communities green carries religious weight, and on packaging it implies environmental claims, so be ready to back them.",
suits: ["Landscaping", "Outdoors", "Health", "Garden centres", "Vets"],
suits: ["Landscaping", "Outdoors", "Health", "Garden centers", "Vets"],
pairsWith: ["natural", "playful"],
},
{
Expand All @@ -353,7 +353,7 @@ const PALETTE_DATA: readonly Omit<Palette, "contrast">[] = [
],
culture:
"Dark green on cream is British racing green and the old railway liveries, so in the UK it reads as heritage and quality. Elsewhere it simply reads as woods and fields. The rust accent keeps it from looking like a bank.",
suits: ["Farms", "Garden centres", "Estate agents", "Outdoor gear", "Distilleries"],
suits: ["Farms", "Garden centers", "Real estate agents", "Outdoor gear", "Distilleries"],
pairsWith: ["natural", "classic", "luxurious"],
},
{
Expand All @@ -372,7 +372,7 @@ const PALETTE_DATA: readonly Omit<Palette, "contrast">[] = [
{ name: "accent", hex: "#b08d57" },
],
culture:
"Warm greys step back so photographs lead, which is why galleries and interior designers use them. Neutrals carry few cultural meanings of their own, but grey alone can feel sombre or unfinished; the bronze warms it and hints at craft rather than luxury.",
"Warm grays step back so photographs lead, which is why galleries and interior designers use them. Neutrals carry few cultural meanings of their own, but gray alone can feel somber or unfinished; the bronze warms it and hints at craft rather than luxury.",
suits: ["Interiors", "Photography", "Boutiques", "Architecture"],
pairsWith: ["minimal", "luxurious"],
},
Expand Down Expand Up @@ -412,8 +412,8 @@ const PALETTE_DATA: readonly Omit<Palette, "contrast">[] = [
{ name: "accent", hex: "#ffb703" },
],
culture:
"Red is luck and celebration at Chinese New Year and the colour of the bride at a Hindu wedding; in most shops it means sale, and on forms it means error. With sunshine yellow it can recall fast food, which the steadier blue helps to offset.",
suits: ["Events", "Children's activities", "Festivals", "Creative studios", "Toy shops"],
"Red is luck and celebration at Chinese New Year and the color of the bride at a Hindu wedding; in most shops it means sale, and on forms it means error. With sunshine yellow it can recall fast food, which the steadier blue helps to offset.",
suits: ["Events", "Children's activities", "Festivals", "Creative studios", "Toy stores"],
pairsWith: ["playful", "childlike", "bold"],
},
{
Expand All @@ -433,7 +433,7 @@ const PALETTE_DATA: readonly Omit<Palette, "contrast">[] = [
],
culture:
"Yellow is optimism and warmth to most visitors and also caution, from road signs to hazard tape, so a calm teal carries the text. Saffron-yellow is the robe of Buddhist monks in Thailand and Sri Lanka, worth knowing if your visitors include those communities.",
suits: ["Swim and surf schools", "Cafés", "Holiday lets", "Kids' classes", "Florists"],
suits: ["Swim and surf schools", "Cafés", "Vacation rentals", "Kids' classes", "Florists"],
pairsWith: ["playful", "natural", "retro"],
},
];
Expand Down
36 changes: 18 additions & 18 deletions src/data/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ export const STYLE_BOARDS: readonly StyleBoard[] = [
body: "Homes and small workplaces, designed around light and the way you actually live.",
button: "See our work",
cardTitle: "Three rooms, one idea",
cardBody: "A 1920s terrace, opened up without losing its bones.",
cardBody: "A 1920s row house, opened up without losing its bones.",
},
},
},
Expand All @@ -230,7 +230,7 @@ export const STYLE_BOARDS: readonly StyleBoard[] = [
colour: "Navy, burgundy and cream",
shape: "Symmetrical, arches and rules",
motion: "None",
suits: ["Accountants, lawyers and advisers"],
suits: ["Accountants, lawyers and advisors"],
demo: { href: "https://supper.superherotech.ai", label: "Supper, our restaurant demo" },
draw: {
onAccent: "ground",
Expand Down Expand Up @@ -282,7 +282,7 @@ export const STYLE_BOARDS: readonly StyleBoard[] = [
body: "Vegetables, eggs and honey from our fields, at the market on Saturdays and at your door on Tuesdays.",
button: "Order a box",
cardTitle: "This week's box",
cardBody: "Chard, new potatoes, spring onions and a dozen eggs.",
cardBody: "Chard, new potatoes, scallions and a dozen eggs.",
},
},
},
Expand All @@ -301,7 +301,7 @@ export const STYLE_BOARDS: readonly StyleBoard[] = [
colour: "Deep tones with gold and cream",
shape: "Fine lines, generous space",
motion: "Slow and restrained",
suits: ["Jewellers and fine goods"],
suits: ["Jewelers and fine goods"],
draw: {
onAccent: "ground",
eyebrow: "accent",
Expand All @@ -314,7 +314,7 @@ export const STYLE_BOARDS: readonly StyleBoard[] = [
brand: "Maison Aurèle",
eyebrow: "By appointment",
headline: "Made to be kept.",
body: "Fine jewellery, designed and finished by hand in our own atelier.",
body: "Fine jewelry, designed and finished by hand in our own atelier.",
button: "Book a private viewing",
cardTitle: "The Solstice ring",
cardBody: "Eighteen-carat gold, a single hand-set stone.",
Expand All @@ -325,7 +325,7 @@ export const STYLE_BOARDS: readonly StyleBoard[] = [
id: "playful",
label: "Playful",
word: "Playful",
feel: "bright colours, rounded shapes, bouncy motion, friendly type",
feel: "bright colors, rounded shapes, bouncy motion, friendly type",
palette: [
{ name: "ground", hex: "#fff8ec" },
{ name: "ink", hex: "#2a1a4a" },
Expand All @@ -348,7 +348,7 @@ export const STYLE_BOARDS: readonly StyleBoard[] = [
sample: {
brand: "Pop & Pedal",
eyebrow: "Bike repairs",
headline: "Flat tyre? We've got you.",
headline: "Flat tire? We've got you.",
body: "Same-day fixes, friendly advice and a free coffee while you wait.",
button: "Book a fix",
cardTitle: "Spring tune-up",
Expand All @@ -360,18 +360,18 @@ export const STYLE_BOARDS: readonly StyleBoard[] = [
id: "childlike",
label: "Childlike",
word: "Childlike",
feel: "primary colours, illustrations, big rounded type, hand-drawn",
feel: "primary colors, illustrations, big rounded type, hand-drawn",
palette: [
{ name: "ground", hex: "#fffdf5" },
{ name: "ink", hex: "#161616" },
{ name: "accent", hex: "#1f4fd1" },
{ name: "surface", hex: "#ffd60a" },
],
type: { heading: "hand", body: "rounded", note: "Big, rounded, hand-lettered feel" },
colour: "Primary colours",
colour: "Primary colors",
shape: "Illustrated, hand-drawn",
motion: "Lively",
suits: ["Nurseries and children's services"],
suits: ["Preschools and children's services"],
draw: {
onAccent: "ground",
eyebrow: "accent",
Expand All @@ -382,7 +382,7 @@ export const STYLE_BOARDS: readonly StyleBoard[] = [
motion: "bouncy",
sample: {
brand: "Little Acorns",
eyebrow: "Nursery and pre-school",
eyebrow: "Childcare and preschool",
headline: "Big days for small people.",
body: "Play, paint, stories and a garden to dig in, for children from two to five.",
button: "Come and visit",
Expand Down Expand Up @@ -423,23 +423,23 @@ export const STYLE_BOARDS: readonly StyleBoard[] = [
body: "Breakfast all day, milkshakes thick enough to stand a spoon in, and records on the jukebox.",
button: "See the menu",
cardTitle: "Blue plate special",
cardBody: "Meatloaf, mash and gravy, every Thursday.",
cardBody: "Meatloaf, mashed potatoes and gravy, every Thursday.",
},
},
},
{
id: "bold",
label: "Bold & loud",
word: "Bold",
feel: "huge headlines, high contrast, blocks of colour",
feel: "huge headlines, high contrast, blocks of color",
palette: [
{ name: "ground", hex: "#ffffff" },
{ name: "ink", hex: "#0a0a0a" },
{ name: "accent", hex: "#0033ff" },
{ name: "surface", hex: "#ffe500" },
],
type: { heading: "heavy", body: "system", note: "Huge, heavy headlines" },
colour: "High contrast, blocks of colour",
colour: "High contrast, blocks of color",
shape: "Hard edges, big blocks",
motion: "Snappy",
suits: ["Gyms and fitness"],
Expand Down Expand Up @@ -543,18 +543,18 @@ export interface StyleFlavor {

export const STYLE_FLAVORS: readonly StyleFlavor[] = [
{ id: "cottagecore", label: "Cottagecore", meaning: "soft florals, linen, warm daylight, handwritten touches", pairsWith: ["natural", "handcrafted"] },
{ id: "art-deco", label: "Art deco", meaning: "geometric gold lines, symmetry, 1920s glamour", pairsWith: ["luxurious", "classic", "retro"] },
{ id: "art-deco", label: "Art deco", meaning: "geometric gold lines, symmetry, 1920s glamor", pairsWith: ["luxurious", "classic", "retro"] },
{ id: "brutalist", label: "Brutalist", meaning: "raw type, hard edges, no ornament, honest structure", pairsWith: ["bold", "minimal"] },
{ id: "y2k", label: "Y2K / pop culture", meaning: "chrome, gradients, stickers, early-web fun", pairsWith: ["playful", "bold", "high-tech"] },
{ id: "pop-art", label: "Pop art", meaning: "halftones, bold outlines, comic colour", pairsWith: ["bold", "playful", "retro"] },
{ id: "pop-art", label: "Pop art", meaning: "halftones, bold outlines, comic color", pairsWith: ["bold", "playful", "retro"] },
{ id: "editorial", label: "Editorial", meaning: "magazine layout, big serif headlines, generous margins", pairsWith: ["classic", "minimal", "luxurious"] },
{ id: "boho", label: "Boho", meaning: "layered textures, rust and mustard, woven patterns", pairsWith: ["natural", "handcrafted", "retro"] },
{ id: "coastal", label: "Coastal", meaning: "sea blues, sand, light wood, open air", pairsWith: ["natural", "minimal"] },
{ id: "industrial", label: "Industrial", meaning: "concrete, steel, exposed grid, stencil type", pairsWith: ["high-tech", "bold", "minimal"] },
{ id: "scandinavian", label: "Scandinavian", meaning: "pale wood, quiet colour, function first", pairsWith: ["minimal", "natural"] },
{ id: "scandinavian", label: "Scandinavian", meaning: "pale wood, quiet color, function first", pairsWith: ["minimal", "natural"] },
{ id: "americana", label: "Vintage Americana", meaning: "badges, red-white-blue, hand-painted signs", pairsWith: ["retro", "classic", "handcrafted"] },
{ id: "street", label: "Street", meaning: "graffiti energy, stickers, high contrast, motion", pairsWith: ["bold", "playful"] },
{ id: "maximalist", label: "Maximalist", meaning: "more of everything, pattern on pattern, colour on colour", pairsWith: ["playful", "bold", "childlike"] },
{ id: "maximalist", label: "Maximalist", meaning: "more of everything, pattern on pattern, color on color", pairsWith: ["playful", "bold", "childlike"] },
{ id: "gallery", label: "Artsy / gallery", meaning: "white walls, art-first, sparse captions", pairsWith: ["minimal", "luxurious"] },
{ id: "cyberpunk", label: "Cyberpunk", meaning: "neon on black, glitch, grids", pairsWith: ["high-tech", "bold"] },
{ id: "farmhouse", label: "Farmhouse", meaning: "shiplap whites, black iron, warm wood", pairsWith: ["natural", "handcrafted", "classic"] },
Expand Down
8 changes: 4 additions & 4 deletions src/data/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -492,7 +492,7 @@ export const TYPE_PAIRINGS: readonly TypePairing[] = [
feel: "A serif and a sans drawn as one family: steady, legible and unfussy.",
headings: { scale: 1, weight: 600, tracking: "0", upper: false, lineHeight: 1.2 },
bodySettings: { size: "1.0625rem", lineHeight: 1.6, measure: "66ch" },
suits: ["Accountants, lawyers and advisers", "Charities and member bodies"],
suits: ["Accountants, lawyers and advisors", "Charities and member bodies"],
pairsWith: ["classic"],
},
{
Expand All @@ -503,7 +503,7 @@ export const TYPE_PAIRINGS: readonly TypePairing[] = [
feel: "A high-contrast display serif, spaced out in capitals, over a calm text serif.",
headings: { scale: 0.85, weight: 400, tracking: "0.08em", upper: true, lineHeight: 1.2 },
bodySettings: { size: "1.0625rem", lineHeight: 1.65, measure: "64ch" },
suits: ["Jewellers and fine goods", "Boutique hotels and restaurants"],
suits: ["Jewelers and fine goods", "Boutique hotels and restaurants"],
pairsWith: ["luxurious"],
},
{
Expand All @@ -525,7 +525,7 @@ export const TYPE_PAIRINGS: readonly TypePairing[] = [
feel: "A Renaissance book face over a soft sans: warm, literate and unhurried.",
headings: { scale: 1.1, weight: 500, tracking: "0", upper: false, lineHeight: 1.15 },
bodySettings: { size: "1.0625rem", lineHeight: 1.6, measure: "66ch" },
suits: ["Wineries and heritage estates", "Bookshops and publishers"],
suits: ["Wineries and heritage estates", "Bookstores and publishers"],
pairsWith: ["natural"],
},
{
Expand All @@ -547,7 +547,7 @@ export const TYPE_PAIRINGS: readonly TypePairing[] = [
feel: "Big hand-lettered headings over a round sans that children and parents both find easy.",
headings: { scale: 1.1, weight: 700, tracking: "0", upper: false, lineHeight: 1.1 },
bodySettings: { size: "1.125rem", lineHeight: 1.6, measure: "60ch" },
suits: ["Nurseries and children's services", "Schools and clubs"],
suits: ["Preschools and children's services", "Schools and clubs"],
pairsWith: ["childlike"],
},
{
Expand Down
Loading
Loading