/* The card designs. * ============================================================================ * Twelve palettes for one card. shared/card.css draws the card and every * colour in it is a custom property; this file is the only place those * properties are given values, and each block is one design. * * `cards.design` holds the number. shared/card.js puts `d-` on the card's * root and nothing else in the system needs to know a design exists. * * ADDING A THIRTEENTH is a block at the bottom of this file and a swatch in * the creator. Not a stylesheet, not a component, not a branch anywhere in * the renderer. That constraint is the whole reason this works, and the rule * that keeps it true is: a design may set colour, radius, typeface, weight, * case, tracking, air, stroke weight and the optional decorative lines. It * may not add, remove or reorder an element, and it may not touch the * compliance footer. * * The levers are documented at the top of shared/card.css. * * --c-page is the odd one out: it is not on the card, it is the surface the * card sits on. The public page paints its body with it, the creator paints * the phone screen behind the preview, and the lab paints the well each card * stands in. A card floating on the same default grey whatever design it is * wearing is a card that was themed and a page that was not. * * The rule for choosing one: a dark card gets a LIGHTER page and a light card * a darker one. The card carries a drop shadow, and a shadow does nothing on * a ground darker than the thing casting it — the card stops having an edge * and reads as a hole. Design 8 is the single exception and says why. */ /* ================================================================== THE SIX TAKEN OFF CAR SITES — now 3, 4, 7, 8, 9 and 12 Six designs read out of six live car sites rather than off memory of them. The names are ours and the tokens are theirs. They used to be 7 through 12 and sat together. Ordering the set by colour scattered them, which is correct — an agent picks a card by how it looks, not by where it came from — so this note lives here rather than above whichever one happens to be first. Why the names do not match the source: an agent picking a design is not licensing a trademark, and a card labelled with a car company is a claim nobody at EMET is entitled to make. The provenance stays in these comments, where it is documentation and where anybody maintaining a value can go and check it against the live site. Nothing in the set is a common first name either. That rule came from the design formerly called Beverly and it now applies to all of them. Every value below was read out of the running page with getComputedStyle or lifted from the brand's own CSS custom properties, and the notes say which. ONE HONEST LIMITATION, AND IT APPLIES TO ALL SIX. Not one of these houses' typefaces can be used. Fonts are self-hosted, the CSP sets font-src 'self', and only Montserrat is committed. MBCorpo, BMW Type Next, Riviera Nights, Bentley, LamboType and FerrariSans are all approximated by Montserrat or a system serif. Weight, case, tracking and size are matched to the real thing; the letterforms are not. If one of these ships, its face gets subset and committed the way Montserrat was, and this paragraph comes out. /* ================================================================== 1 — HARBOR The house design. EMET navy, EMET blue, EMET greys, straight off tokens.css. Squared corners against the round photo so shape does some of the work, and outlined tiles rather than filled ones, which is what stops a phone number reading as another button. This is the default and the one every other design is a departure from. Anything that must look like EMET looks like this. */ .d-1 { /* A cool light grey-blue. The card is white, so the page is the darker of the two. */ --c-page: #E6ECF5; --c-bg: #FFFFFF; --c-top: #001A72; --c-top-img: radial-gradient(120% 90% at 82% 0%, rgba(24,99,220,.9), transparent 62%); --c-top-ink: #FFFFFF; --c-face-ring: #FFFFFF; --c-mono-bg: #1863DC; --c-mono-ink: #FFFFFF; --c-ink: #0A0A0A; --c-ink-2: #4A4A4A; --c-ink-3: #6E7480; --c-role: #1863DC; --c-line: #EBEEF3; --c-pri-bg: #1863DC; --c-pri-ink: #FFFFFF; --c-btn-bg: #FFFFFF; --c-btn-ink: #0A0A0A; --c-btn-line: #D8DEE8; --c-btn-icon: #6E7480; --c-tile-bg: #FFFFFF; --c-tile-line: #EBEEF3; --c-tile-icon: #1863DC; --c-tag-bg: #E4E8EF; --c-tag-ink: #6E7480; --c-r: 14px; } /* ================================================================== 2 — MIDNIGHT The same card with the lights off. Navy end to end, the primary the only bright thing on it, so the one action that matters cannot be missed. Known costs, and they are real: it ignores whatever theme the phone is set to, it prints badly, and a photo shot against a light background sits on it awkwardly. */ .d-2 { /* Lighter than the card, not darker. A dark card on a darker page has no edge and its shadow does nothing. */ --c-page: #0D2A63; --c-bg: #071A4A; --c-top: #071A4A; --c-top-img: linear-gradient(160deg, #0E2E7A 0%, #071A4A 62%); --c-top-ink: rgba(255,255,255,.92); --c-face-ring: #0B2159; --c-mono-bg: #1863DC; --c-mono-ink: #FFFFFF; --c-ink: #FFFFFF; --c-ink-2: rgba(255,255,255,.66); --c-ink-3: rgba(255,255,255,.44); --c-role: #7FA9F0; --c-line: rgba(255,255,255,.1); --c-pri-bg: #1863DC; --c-pri-ink: #FFFFFF; --c-btn-bg: rgba(255,255,255,.07); --c-btn-ink: #FFFFFF; --c-btn-line: rgba(255,255,255,.14); --c-btn-icon: rgba(255,255,255,.6); --c-tile-bg: rgba(255,255,255,.06); --c-tile-line: rgba(255,255,255,.09); --c-tile-icon: #7FA9F0; --c-tag-bg: rgba(255,255,255,.1); --c-tag-ink: rgba(255,255,255,.55); --c-r: 14px; } /* ================================================================== 3 — SAPPHIRE Read off Mercedes-Benz. Their Workbench tokens: --wb-black #000000, --wb-white #ffffff, --button-theme-color #0078d6, --wb-radius-m 4px, and the grey ramp --wb-grey-10 #1a1a1a through --wb-grey-60 #9f9f9f. Body is black with white text at 14px. Two faces, which is their system and worth copying exactly: --wb-font-text is a sans and --wb-font-title is a SERIF. So the name sits in the serif and everything else in the sans, which is the one structural thing that makes a Mercedes page look like one. */ .d-3 { /* The card is pure black. Anything but a lighter page and it stops being an object. */ --c-page: #1C1C1C; --c-bg: #000000; --c-top: #000000; --c-top-img: linear-gradient(180deg, #262626 0%, #141414 52%, #000000 100%); --c-top-ink: #FFFFFF; --c-face-ring: #000000; --c-face-edge: rgba(255,255,255,.22); --c-mono-bg: #1a1a1a; --c-mono-ink: #9f9f9f; --c-ink: #FFFFFF; --c-ink-2: #bbbbbb; --c-ink-3: #848484; --c-role: #0078d6; --c-rule: #333333; --c-line: #262626; --c-pri-bg: #0078d6; --c-pri-ink: #FFFFFF; --c-btn-bg: transparent; --c-btn-ink: #FFFFFF; --c-btn-line: #4f4f4f; --c-btn-icon: #9f9f9f; --c-tile-bg: #0d0d0d; --c-tile-line: #262626; --c-tile-icon: #0078d6; --c-tag-bg: #262626; --c-tag-ink: #9f9f9f; --c-r: 4px; --c-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --c-name-w: 400; --c-name-sz: 30px; --c-name-tr: 0em; --c-lab-tr: .1em; --c-stroke: 1.5; } /* ================================================================== 4 — BLUEPRINT Read off BMW. --surface-background-primary #fff, --secondary #f6f6f6, --heading and --copy-text #262626, --border #e6e6e6, --cta #1c69d4, and the headline face runs at weight 300 with no letter-spacing. Corners are 0px on every button on that site. Square is the single loudest thing about it, and it is why this and 3 read as opposites even though both are German and both are minimal: one is black with 4px corners, the other is white with none. Montserrat has no 300 committed, so the name is 500 — the lightest weight available. Named because it is a real difference from the reference and not a choice. */ .d-4 { /* Their own #f6f6f6 taken a step down so a white card lifts off it. */ --c-page: #E8EAEC; --c-bg: #ffffff; --c-top: #f6f6f6; --c-top-img: none; --c-top-ink: #262626; --c-face-ring: #ffffff; --c-face-edge: #e6e6e6; --c-mono-bg: #262626; --c-mono-ink: #ffffff; --c-ink: #262626; --c-ink-2: #666666; --c-ink-3: #8e8e8e; --c-role: #1c69d4; --c-rule: #e6e6e6; --c-line: #e6e6e6; --c-pri-bg: #1c69d4; --c-pri-ink: #ffffff; --c-btn-bg: #ffffff; --c-btn-ink: #262626; --c-btn-line: #262626; --c-btn-icon: #666666; --c-tile-bg: #ffffff; --c-tile-line: #e6e6e6; --c-tile-icon: #1c69d4; --c-tag-bg: #f2f2f2; --c-tag-ink: #8e8e8e; --c-r: 0px; --c-name-w: 500; --c-name-sz: 30px; --c-name-tr: -.01em; --c-lab-tr: .04em; --c-stroke: 1.4; } /* ================================================================== 5 — BLUSH Rose gold, and warm rather than pink. The move that keeps this from going sickly is that the ink is a deep plum-brown instead of black and the surfaces are barely tinted — the colour lives in the header, the primary, and the icons, and nowhere else. Softest radius of the five, because rounder reads warmer, and the name drops to 700 since 800 in a rose palette reads shouty. */ .d-5 { /* Warm blush, a shade under the card's own rose. */ --c-page: #F5E7E1; --c-bg: #FFFFFF; --c-top: #C98A96; --c-top-img: linear-gradient(155deg, #F0C4BC 0%, #DFA0A6 48%, #BE7C8B 100%); --c-top-ink: #FFFFFF; --c-face-ring: #FFFFFF; /* White circle, rose initials. Rose on rose was a hole in the header for any agent who has not uploaded a photo, which is most new ones. */ --c-mono-bg: #FFFFFF; --c-mono-ink: #B76E79; --c-ink: #452930; --c-ink-2: #7B5A63; --c-ink-3: #AB8892; /* Darkened from #B76E79. The role line is 11px bold uppercase, which is not WCAG large text, and rose on white measured 3.80:1. */ --c-role: #A55A6A; --c-line: #F5E6E4; --c-pri-bg: #DFA396; /* Three stops rather than two: a warm highlight, the rose, then a deeper edge. Flat rose reads dusty, and two stops read like a gradient. This reads like a metal. The label is plum, not white. White on rose gold measured 1.93:1, which is a button a client cannot read, and darkening the metal far enough to carry white would have put it on top of 6. Dark ink on a light metal is also simply what rose gold does. */ --c-pri-img: linear-gradient(135deg, #F0C6AE 0%, #E0A79E 46%, #CE8B95 100%); --c-pri-ink: #3D222B; --c-btn-bg: #FFFCFB; --c-btn-ink: #452930; --c-btn-line: #F0DCDA; --c-btn-icon: #C08997; --c-tile-bg: #FFFCFB; --c-tile-line: #F5E6E4; --c-tile-icon: #B76E79; --c-tag-bg: #F9EBE9; --c-tag-ink: #AB8892; --c-r: 18px; --c-name-w: 700; --c-name-tr: -.025em; } /* ================================================================== 6 — ROSEWATER A mid-twenties luxury agent in a white outfit and big sunglasses. The first pass was a hot pink field with a magenta button, which is a Barbie box. What makes the brief adult is not less pink, it is less pink SURFACE: the outfit is white, and pink is what she is wearing it with rather than what she is wearing. So the header drops from a magenta slab to a pale blush wash that is almost white where it meets the body, the card carries the faintest tint the whole way down, and the pink concentrates into three places — the role line, the icons, and the primary. The primary is a deep rose rather than a bright one. Bright pink on white is a sale sticker. A rose with grey in it is a lipstick, and it is dark enough to anchor a card that is otherwise all white, which is the sunglasses in the brief doing structural work. Ink goes near-black. That contrast against all the white is the entire difference between twenty-five and eight, and it costs nothing. Against 5, which also owns pink: 5 is warm copper rose gold with a sans name and a white body. This is a cooler, cleaner pink, tinted throughout, near-black ink, an italic serif, and a finer icon stroke. Two pinks, two people, and nobody has to choose between shades of the same idea. */ .d-6 { /* The pale wash of the header, deepened. The page is the shade the card is only tinted with. */ --c-page: #F3E4E9; --c-bg: #FFFCFD; --c-bg-img: none; --c-top: #F0D2DD; /* Pale, and palest at the bottom, so the header reads as light falling on white rather than as a band of colour stuck to the top. */ --c-top-img: linear-gradient(162deg, #EFC7D6 0%, #F3D6E0 52%, #FAECF1 100%); --c-top-ink: #2A2126; --c-face-ring: #FFFFFF; --c-face-edge: rgba(169,86,111,.18); --c-mono-bg: #FFFFFF; --c-mono-ink: #B26480; --c-ink: #221D20; --c-ink-2: #6B6165; --c-ink-3: #A79AA0; /* Darkened from #B26480, which measured 4.10:1 on this ground. */ --c-role: #A2526E; /* Taupe rather than silver. Chrome was the Y2K note; this one is blonde, and the quiet warm line is what belongs beside it. */ --c-rule: #E2D6DA; --c-rule-img: linear-gradient(90deg, transparent 0%, #E0D3D8 24%, #BCACB3 50%, #E0D3D8 76%, transparent 100%); --c-line: #F1E7EB; /* Lipstick, not a sale sticker. */ --c-pri-bg: #A9566F; --c-pri-ink: #FFFFFF; --c-btn-bg: #FFFFFF; --c-btn-ink: #221D20; --c-btn-line: #EEDFE5; --c-btn-icon: #B26480; --c-tile-bg: #FFFFFF; --c-tile-line: #F2E7EB; --c-tile-icon: #B26480; --c-tag-bg: #F7EDF1; --c-tag-ink: #A79AA0; /* 20px was bubbly. 15 is composed without going hard. */ --c-r: 15px; --c-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --c-name-w: 400; --c-name-sz: 31px; --c-name-style: italic; --c-name-tr: -.004em; --c-lab-tr: .2em; --c-stroke: 1.3; --c-air: 1.15; } /* ================================================================== 7 — VERMILION Read off Ferrari. Their ramp: --f-color-global-grey-white #fff through -950 #121212, --f-color-global-red-600 #da291c, and --f-color-global-yellow-400 #fff200. Buttons measured at 2px radius, weight 600, a hair of positive tracking. FerrariSans throughout, one face. White card, one red object, and the yellow used exactly once. That yellow is the shield and nothing else on a Ferrari page wears it, so it goes on the Soon tag and nowhere near anything larger. A yellow panel would be a taxi. */ .d-7 { /* A warm grey with the red barely in it. Anything more and the red primary stops being the only red. */ --c-page: #EDE8E7; --c-bg: #ffffff; --c-top: #121212; --c-top-img: linear-gradient(170deg, #303030 0%, #1c1c1c 48%, #121212 100%); --c-top-ink: #ffffff; --c-face-ring: #ffffff; --c-face-edge: rgba(0,0,0,.16); --c-mono-bg: #da291c; --c-mono-ink: #ffffff; --c-ink: #121212; --c-ink-2: #666666; --c-ink-3: #8f8f8f; --c-role: #da291c; --c-rule: #d2d2d2; --c-line: #ebebeb; --c-pri-bg: #da291c; --c-pri-ink: #ffffff; --c-pri-tr: .01em; --c-btn-bg: #ffffff; --c-btn-ink: #121212; --c-btn-line: #d2d2d2; --c-btn-icon: #666666; --c-tile-bg: #f7f7f7; --c-tile-line: #ebebeb; --c-tile-icon: #da291c; --c-tag-bg: #fff200; --c-tag-ink: #121212; --c-r: 2px; --c-name-w: 700; --c-name-sz: 29px; --c-name-tr: -.005em; --c-lab-tr: .06em; --c-stroke: 1.5; } /* ================================================================== 8 — APEX Read off Lamborghini. #181818 and #f5f5f5 off their gradient tokens, --yellow #dfb400, and the CTA is rgb(145,115,0) — an olive gold, not a yellow, which is the surprise in their system. Radius 0. Model names run uppercase at 120px. So: uppercase name, tight tracking, zero radius, olive gold primary, yellow marks. Angular end to end, and the only card here with no curve on it anywhere except the photo. LamboType is ultra-condensed and Montserrat is not. The name is 800 uppercase at negative tracking, which is as close as this repo can get, and it is not very close. */ .d-8 { /* Under the card's #181818. The one dark design where the page goes darker, because the card already carries a top light and reads as lit. */ --c-page: #0A0A0A; --c-bg: #181818; --c-bg-img: linear-gradient(180deg, rgba(24,24,24,0) 60%, rgba(0,0,0,.5) 100%); --c-top: #181818; --c-top-img: linear-gradient(180deg, #2e2e2e 0%, #1f1f1f 50%, #181818 100%); --c-top-ink: #f5f5f5; --c-face-ring: #dfb400; --c-face-w: 2px; --c-mono-bg: #242424; --c-mono-ink: #dfb400; --c-ink: #f5f5f5; --c-ink-2: rgba(245,245,245,.6); --c-ink-3: rgba(245,245,245,.42); --c-role: #dfb400; --c-rule: rgba(223,180,0,.45); --c-line: rgba(245,245,245,.13); --c-pri-bg: #917300; --c-pri-ink: #ffffff; --c-pri-tr: .06em; --c-pri-case: uppercase; --c-btn-bg: transparent; --c-btn-ink: #f5f5f5; --c-btn-line: rgba(245,245,245,.28); --c-btn-icon: #dfb400; --c-tile-bg: rgba(245,245,245,.05); --c-tile-line: rgba(245,245,245,.11); --c-tile-icon: #dfb400; --c-tag-bg: rgba(223,180,0,.16); --c-tag-ink: #dfb400; --c-r: 0px; --c-name-w: 800; --c-name-sz: 26px; --c-name-case: uppercase; --c-name-tr: -.02em; --c-lab-tr: .18em; --c-stroke: 1.6; } /* ================================================================== 9 — BRAMBLE Read off Bentley. Straight off --bm-primary-living-green #394d45, --bm-primary-teal #637a77, --bm-primary-moss #dcd8c0, --bm-primary-moss--10 #f8f7f2 and --bm-primary-blush #e7cfb9. Buttons are 0px radius with a 1px solid border, weight 300, letter-spacing 0.14px. The only green in the set, and the only card where the accent is a colour nobody would call an accent — living green is dark enough to be the primary and quiet enough to be a line. Moss is the ground, blush is the one warm note, and it goes on the tag because that is the smallest thing on the card. */ .d-9 { /* Moss, off their own palette. The card is the pale end of it. */ --c-page: #E2E4DB; --c-bg: #f8f7f2; --c-top: #394d45; --c-top-img: linear-gradient(165deg, #4b6058 0%, #3f544c 46%, #33443d 100%); --c-top-ink: #f8f7f2; --c-face-ring: #f8f7f2; --c-face-edge: rgba(57,77,69,.22); --c-mono-bg: #dcd8c0; --c-mono-ink: #394d45; --c-ink: #1c2622; --c-ink-2: #5b6b65; --c-ink-3: #8d9994; --c-role: #394d45; --c-rule: #cfcab0; --c-line: #e4e1d3; --c-pri-bg: #394d45; --c-pri-ink: #f8f7f2; --c-pri-tr: .01em; --c-btn-bg: transparent; --c-btn-ink: #1c2622; --c-btn-line: #394d45; --c-btn-icon: #637a77; --c-tile-bg: #ffffff; --c-tile-line: #e4e1d3; --c-tile-icon: #637a77; --c-tag-bg: #e7cfb9; --c-tag-ink: #6b4f3a; --c-r: 0px; --c-name-w: 500; --c-name-sz: 30px; --c-name-tr: .004em; --c-lab-tr: .12em; --c-stroke: 1.3; } /* ================================================================== 10 — ATELIER White on white. The first version of this was ivory and gold, which is a different house entirely — gold is Versace and Chanel, and the reference here is a Dior boutique, which is white walls, white floor, one black line, and an enormous amount of nothing. So the header is not a dark band. It is the same white as the body, and the card has no block of colour anywhere on it. The only dark thing is the primary button, which is why it is the only thing the eye lands on. Corners are 0. Icons drop to a 1.1 stroke, which is the difference between a drawn line and an engraved one. Labels run at .32em tracking and the primary is set in caps, because a couture label is spaced, not bolded. Air is up a third: restraint is spacing, and a white card at normal density is just an empty card. */ .d-10 { /* Warm stone. The card is true white and the page is the room it hangs in. */ --c-page: #EAE7E2; --c-bg: #FFFFFF; --c-top: #FFFFFF; --c-top-img: none; --c-top-ink: #14110F; /* A hairline, because a white ring on a white header is no ring. */ --c-face-ring: #ECE9E3; --c-mono-bg: #14110F; --c-mono-ink: #FFFFFF; --c-ink: #14110F; --c-ink-2: #6E6961; --c-ink-3: #A6A099; --c-role: #14110F; --c-rule: #DCD8D0; --c-line: #EDEAE4; --c-pri-bg: #14110F; --c-pri-ink: #FFFFFF; --c-pri-tr: .16em; --c-pri-case: uppercase; --c-btn-bg: transparent; --c-btn-ink: #14110F; --c-btn-line: #DCD8D0; --c-btn-icon: #A6A099; --c-tile-bg: #FFFFFF; --c-tile-line: #EDEAE4; --c-tile-icon: #14110F; --c-tag-bg: #F3F1ED; --c-tag-ink: #A6A099; --c-r: 0px; --c-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --c-name-w: 400; --c-name-sz: 31px; --c-name-tr: .012em; --c-lab-tr: .32em; --c-stroke: 1.1; --c-air: 1.35; } /* ================================================================== 11 — CONCOURS A matte black car in a dark studio under one big soft light. The first two attempts got this wrong in opposite directions. Onyx was flat black, which has no light in it at all. Monaco added amber and teal, which is a warm, colourful, atmospheric look — and the reference has no colour in it whatsoever. What it has is one enormous diffused panel above and everything else falling away into graphite. So there is no accent colour on this design. None. The role line, the icons, and the hairline are all cool platinum, which is the chrome on the grille and nothing more. The only bright thing is the primary, and it is a matte off-white — the white banner on the far wall, not a gold badge. Two things carry it, and both are light rather than pigment: the wash a broad soft ellipse across the top of the card, and a second across the header. That is the ceiling panel. It is why the card has depth without a single saturated value in it. the weave a diagonal at 2% white, 7px. Invisible as a pattern and the reason the black reads as a surface rather than as an absence. Matte paint and studio floor tile both do this; a flat fill does not. Named for the concours lawn rather than a city, because that is the room the reference photograph is in and it is who the design is for. */ .d-11 { /* Lighter graphite. Same reason as 3 and for the same design idea — the card is a matte panel and a panel needs a floor. */ --c-page: #202024; --c-bg: #0C0C0D; --c-bg-img: radial-gradient(125% 40% at 50% 0%, rgba(226,231,240,.115) 0%, rgba(226,231,240,.028) 46%, transparent 74%), repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 1px, transparent 1px 7px); --c-top: #0C0C0D; --c-top-img: linear-gradient(180deg, rgba(234,238,245,.17) 0%, rgba(234,238,245,.055) 48%, rgba(234,238,245,0) 94%); --c-top-ink: rgba(240,241,243,.8); --c-face-ring: #191A1D; --c-mono-bg: #191B1F; --c-mono-ink: #D5DAE2; --c-ink: #F0F1F3; --c-ink-2: rgba(240,241,243,.58); --c-ink-3: rgba(240,241,243,.4); --c-role: #C3C9D2; --c-rule: rgba(198,204,214,.3); --c-line: rgba(255,255,255,.085); /* Matte, not metallic. A gradient here would be a shine, and nothing in the reference shines. */ /* Flat. The one bright object on the card, and it earns that by being the only one, not by shining. */ --c-pri-bg: #EDEFF2; --c-pri-ink: #0A0A0B; --c-pri-tr: .03em; /* The badge is light, not plated. A gradient inside 15px letterforms reads as a printing fault before it reads as metal. */ --c-word-fill: currentColor; /* The window trim: a hairline, not a band. 4px of silver around a photo is a picture frame; 1.5px is a car. */ --c-face-ring: #C6CCD6; --c-face-w: 1.5px; /* The one indulgence, and it is still a line. Bright in the middle and gone at both ends, which is what a chrome strip does under a single light overhead. */ --c-rule-img: linear-gradient(90deg, transparent 0%, rgba(214,220,229,.5) 24%, #FFFFFF 50%, rgba(214,220,229,.5) 76%, transparent 100%); /* One lit pixel along the top of every tile and every button. A panel edge catching the panel light, and the only reason these read as parts rather than as rectangles. */ --c-bevel: inset 0 1px 0 rgba(255,255,255,.1); --c-edge: rgba(255,255,255,.14); --c-btn-bg: rgba(255,255,255,.045); --c-btn-ink: #F0F1F3; --c-btn-line: rgba(255,255,255,.14); --c-btn-icon: #C6CCD5; --c-tile-bg: rgba(255,255,255,.035); --c-tile-line: rgba(255,255,255,.08); --c-tile-icon: #CFD5DE; --c-tag-bg: rgba(255,255,255,.075); --c-tag-ink: rgba(240,241,243,.48); --c-r: 13px; --c-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --c-name-w: 400; --c-name-sz: 31px; --c-name-tr: .004em; --c-lab-tr: .22em; --c-stroke: 1.3; } /* ================================================================== 12 — COLONNADE Read off Rolls-Royce. Riviera Nights at weight 300, and the thing that actually makes their pages theirs is the tracking: their model names run uppercase at 70px with 2.5px of letter-spacing, and SPECTRE runs at 15.4px of it. That is .036em to .22em, an order of magnitude past normal. Their CTA is a white pill — background #ffffff, colour #151515, border-radius 30px — on near-black. So --c-r goes to 100px and every shape on the card becomes a pill, which is what that site does. The name is uppercase and dropped to 21px, because a full name in caps at .16em of tracking does not fit a 393px card at 31. */ .d-12 { /* Well above the card's #151515. Everything on that design is contrast and nothing else. */ --c-page: #282828; --c-bg: #151515; --c-top: #151515; --c-top-img: linear-gradient(180deg, #2a2a2a 0%, #1c1c1c 55%, #151515 100%); --c-top-ink: #FFFFFF; --c-face-ring: #151515; --c-face-edge: rgba(255,255,255,.25); --c-mono-bg: #242424; --c-mono-ink: #FFFFFF; --c-ink: #FFFFFF; --c-ink-2: rgba(255,255,255,.62); --c-ink-3: rgba(255,255,255,.44); --c-role: rgba(255,255,255,.72); --c-rule: rgba(255,255,255,.28); --c-line: rgba(255,255,255,.14); --c-pri-bg: #FFFFFF; --c-pri-ink: #151515; --c-pri-tr: .04em; --c-btn-bg: transparent; --c-btn-ink: #FFFFFF; --c-btn-line: rgba(255,255,255,.4); --c-btn-icon: rgba(255,255,255,.6); --c-tile-bg: rgba(255,255,255,.05); --c-tile-line: rgba(255,255,255,.12); --c-tile-icon: rgba(255,255,255,.65); --c-tag-bg: rgba(255,255,255,.12); --c-tag-ink: rgba(255,255,255,.55); --c-r: 100px; --c-name-w: 500; --c-name-sz: 21px; --c-name-case: uppercase; --c-name-tr: .16em; --c-lab-tr: .26em; --c-stroke: 1.2; --c-air: 1.15; }