/* ============================================================================= SketchDeck Brand CSS Source: SketchDeck Brand Guidelines 2025, v1.0 (January 2025) © 2024 SketchDeck, a 24 Seven Company PROVENANCE LEGEND ----------------- [BOOK] Value is taken directly from the brand guidelines PDF. [INTERP] Sensible default — the brand book does NOT specify this and the value is the author's interpretation. Confirm against your design system / Figma before shipping. [TBD] Brand book references this but did not define it in v1.0 (notably the "SketchDeck Lab" section). ============================================================================= */ /* ----------------------------------------------------------------------------- 1. Fonts [BOOK] Headers : Syne Regular — uppercase only. No other Syne weights/cases. Body : Inter Regular / Bold — sentence or uppercase. Bold sparingly. ----------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400&family=Inter:wght@400;700&display=swap'); /* ----------------------------------------------------------------------------- 2. Design tokens ----------------------------------------------------------------------------- */ :root { /* ---- Core colors [BOOK] Only colors permitted to pair with iced/saturated; only colors permitted for text. */ --sd-color-blue-moon: #161638; /* PANTONE 4146 C */ --sd-color-white-rabbit: #FFFFFF; --sd-color-ice-ice-baby: #C0D8FF; /* PANTONE 2707 C — listed as core AND iced */ /* ---- Neutrals [BOOK] */ --sd-color-n1: #F4F4F0; /* PANTONE Cool Gray 1 C */ --sd-color-n2: #858580; /* PANTONE 2332 C */ /* ---- Saturated palette [BOOK] Bold, vivid. Always pair with White Rabbit copy. */ --sd-color-ocean-eyes: #0077E4; /* PANTONE 2195 C */ --sd-color-texas-sun: #F95104; /* PANTONE 1655 C */ --sd-color-brown-sugar: #7E5735; /* PANTONE 7568 C */ /* ---- Iced palette [BOOK] Lighter, brighter. Always pair with Blue Moon copy. */ --sd-color-purple-rain: #B8ACFF; /* PANTONE 2635 C */ --sd-color-pink-floyd: #FFB2D5; /* PANTONE 6050 C */ --sd-color-yellow-submarine: #D8DE00; /* PANTONE 389 C */ /* ---- Approved gradients (iced + iced ONLY) [BOOK] These four pairings are the only gradients permitted. Direction (135deg) is [INTERP] — book illustrates gradients but does not specify an angle. */ --sd-gradient-purple-ice: linear-gradient(135deg, var(--sd-color-purple-rain) 0%, var(--sd-color-ice-ice-baby) 100%); --sd-gradient-ice-pink: linear-gradient(135deg, var(--sd-color-ice-ice-baby) 0%, var(--sd-color-pink-floyd) 100%); --sd-gradient-pink-yellow: linear-gradient(135deg, var(--sd-color-pink-floyd) 0%, var(--sd-color-yellow-submarine) 100%); --sd-gradient-yellow-ice: linear-gradient(135deg, var(--sd-color-yellow-submarine) 0%, var(--sd-color-ice-ice-baby) 100%); /* ---- SD Lab gradients [TBD] The book's Texas Sun pairing footnote references "the Texas Sun-Pink Floyd gradient (See SD Lab Gradient Section)" — but the SD Lab section in v1.0 is labelled "SketchDeck lab (?)" and did not define gradients in the extracted PDF. If the lab gradients exist in your latest source, define them here and remove this block. --sd-gradient-texas-pink: linear-gradient(135deg, var(--sd-color-texas-sun) 0%, var(--sd-color-pink-floyd) 100%); */ /* ---- Semantic aliases [INTERP] Use these in product code so palette swaps stay safe. */ --sd-bg-default: var(--sd-color-white-rabbit); --sd-bg-inverse: var(--sd-color-blue-moon); --sd-bg-muted: var(--sd-color-n1); --sd-text-default: var(--sd-color-blue-moon); /* on light bg */ --sd-text-inverse: var(--sd-color-white-rabbit); /* on dark / saturated bg */ --sd-text-muted: var(--sd-color-n2); --sd-border-default: var(--sd-color-blue-moon); --sd-border-inverse: var(--sd-color-white-rabbit); /* ---- Type families [BOOK] */ --sd-font-heading: 'Syne', 'Helvetica Neue', Arial, sans-serif; --sd-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; /* ---- Type scale [INTERP] The brand book illustrates a hierarchy (Display / Header / Subtitle / Eyebrow / Body) but does not specify pixel sizes. Replace these clamp() ramps with values from your design system if you have them. */ --sd-fs-display: clamp(3.25rem, 5.5vw + 1rem, 6.5rem); --sd-fs-h1: clamp(2.5rem, 3.5vw + 1rem, 4.25rem); --sd-fs-h2: clamp(2rem, 2.5vw + 1rem, 3rem); --sd-fs-h3: clamp(1.5rem, 1.5vw + 0.75rem, 2.25rem); --sd-fs-subtitle: clamp(1.125rem,0.5vw + 0.875rem, 1.5rem); --sd-fs-body: 1rem; /* 16px */ --sd-fs-small: 0.875rem; /* 14px */ --sd-fs-eyebrow: 0.75rem; /* 12px */ /* ---- Line height & tracking [INTERP] */ --sd-lh-tight: 1.05; --sd-lh-snug: 1.2; --sd-lh-normal: 1.5; --sd-lh-relaxed: 1.65; --sd-tracking-display: -0.01em; --sd-tracking-eyebrow: 0.12em; --sd-tracking-button: 0.08em; /* ---- Spacing scale [INTERP] 4px base. Brand book does not specify a spacing scale. */ --sd-space-1: 0.25rem; --sd-space-2: 0.5rem; --sd-space-3: 0.75rem; --sd-space-4: 1rem; --sd-space-5: 1.5rem; --sd-space-6: 2rem; --sd-space-7: 3rem; --sd-space-8: 4rem; --sd-space-9: 6rem; --sd-space-10: 8rem; /* ---- Radii [INTERP] Brand book says core circles/squares "transition into slightly rounded forms when used as on-brand UI elements" — no specific px values given. */ --sd-radius-sm: 4px; --sd-radius-md: 8px; --sd-radius-lg: 12px; --sd-radius-pill: 999px; /* ---- Borders & motion [INTERP] */ --sd-border-width: 1.5px; --sd-transition-fast: 120ms ease-out; --sd-transition-base: 200ms ease-out; } /* ----------------------------------------------------------------------------- 3. Base / reset ----------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sd-font-body); font-weight: 400; font-size: var(--sd-fs-body); line-height: var(--sd-lh-normal); color: var(--sd-text-default); background-color: var(--sd-bg-default); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; display: block; } ::selection { background: var(--sd-color-blue-moon); color: var(--sd-color-white-rabbit); } /* ----------------------------------------------------------------------------- 4. Typography [BOOK] - h1–h6 default to Syne Regular UPPERCASE. - .sd-subtitle = Syne Regular UPPERCASE at smaller size. - .sd-subtitle--long = Inter Regular sentence case (long subtitles). - .sd-eyebrow = Inter Regular UPPERCASE, small with extra tracking. - Body copy = Inter Regular sentence case (Bold sparingly). - DO NOT use Syne in any non-Regular weight, non-uppercase, or for long copy. - DO NOT invert typeface usage (Inter for headlines is forbidden). Specific letter-spacing / line-height numbers are [INTERP]. ----------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .sd-heading { font-family: var(--sd-font-heading); font-weight: 400; /* Syne Regular only */ font-style: normal; text-transform: uppercase; /* Syne is uppercase only */ letter-spacing: var(--sd-tracking-display); line-height: var(--sd-lh-tight); margin: 0 0 var(--sd-space-4); color: inherit; } h1, .sd-h1 { font-size: var(--sd-fs-h1); } h2, .sd-h2 { font-size: var(--sd-fs-h2); } h3, .sd-h3 { font-size: var(--sd-fs-h3); line-height: var(--sd-lh-snug); } h4, .sd-h4 { font-size: var(--sd-fs-subtitle); line-height: var(--sd-lh-snug); } h5, .sd-h5 { font-size: 1.125rem; line-height: var(--sd-lh-snug); } h6, .sd-h6 { font-size: 1rem; line-height: var(--sd-lh-snug); } .sd-display { font-family: var(--sd-font-heading); font-weight: 400; text-transform: uppercase; font-size: var(--sd-fs-display); line-height: var(--sd-lh-tight); letter-spacing: var(--sd-tracking-display); margin: 0 0 var(--sd-space-5); } .sd-subtitle { font-family: var(--sd-font-heading); font-weight: 400; text-transform: uppercase; font-size: var(--sd-fs-subtitle); line-height: var(--sd-lh-snug); letter-spacing: 0; } .sd-subtitle--long { /* Long subtitles: switch to Inter sentence case for readability per book. */ font-family: var(--sd-font-body); font-weight: 400; text-transform: none; font-size: var(--sd-fs-subtitle); line-height: var(--sd-lh-normal); letter-spacing: 0; } .sd-eyebrow { font-family: var(--sd-font-body); font-weight: 400; text-transform: uppercase; font-size: var(--sd-fs-eyebrow); letter-spacing: var(--sd-tracking-eyebrow); line-height: 1; margin: 0 0 var(--sd-space-3); display: inline-block; } p, .sd-body { font-family: var(--sd-font-body); font-weight: 400; font-size: var(--sd-fs-body); line-height: var(--sd-lh-relaxed); margin: 0 0 var(--sd-space-4); } .sd-body--bold, strong, b { font-weight: 700; } .sd-body--small { font-size: var(--sd-fs-small); line-height: var(--sd-lh-normal); } a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: opacity var(--sd-transition-fast); } a:hover { opacity: 0.7; } /* [INTERP] book does not specify link hover */ /* ----------------------------------------------------------------------------- 5. Color utilities [BOOK] Text must always be Blue Moon or White Rabbit. Each .sd-bg-* class auto-applies the correct text color for its surface. ----------------------------------------------------------------------------- */ /* Text */ .sd-text-blue-moon { color: var(--sd-color-blue-moon); } .sd-text-white-rabbit { color: var(--sd-color-white-rabbit); } /* Backgrounds — Core */ .sd-bg-blue-moon { background-color: var(--sd-color-blue-moon); color: var(--sd-color-white-rabbit); } /* [BOOK] */ .sd-bg-white-rabbit { background-color: var(--sd-color-white-rabbit); color: var(--sd-color-blue-moon); } /* [BOOK] */ .sd-bg-ice-ice-baby { background-color: var(--sd-color-ice-ice-baby); color: var(--sd-color-blue-moon); } /* [BOOK] iced rule */ /* Backgrounds — Neutrals [INTERP] The book does not state which text color belongs on N1/N2. N1 is light, so Blue Moon is the safe pick; N2 is mid-gray and contrast is borderline either way. Re-confirm against an accessibility audit. */ .sd-bg-n1 { background-color: var(--sd-color-n1); color: var(--sd-color-blue-moon); } .sd-bg-n2 { background-color: var(--sd-color-n2); color: var(--sd-color-white-rabbit); } /* Backgrounds — Saturated (always pair with White Rabbit copy) [BOOK] */ .sd-bg-ocean-eyes { background-color: var(--sd-color-ocean-eyes); color: var(--sd-color-white-rabbit); } .sd-bg-texas-sun { background-color: var(--sd-color-texas-sun); color: var(--sd-color-white-rabbit); } .sd-bg-brown-sugar { background-color: var(--sd-color-brown-sugar); color: var(--sd-color-white-rabbit); } /* Backgrounds — Iced (always pair with Blue Moon copy) [BOOK] */ .sd-bg-purple-rain { background-color: var(--sd-color-purple-rain); color: var(--sd-color-blue-moon); } .sd-bg-pink-floyd { background-color: var(--sd-color-pink-floyd); color: var(--sd-color-blue-moon); } .sd-bg-yellow-submarine { background-color: var(--sd-color-yellow-submarine); color: var(--sd-color-blue-moon); } /* Approved gradients (iced + iced) — copy is Blue Moon [BOOK] */ .sd-bg-gradient-purple-ice { background: var(--sd-gradient-purple-ice); color: var(--sd-color-blue-moon); } .sd-bg-gradient-ice-pink { background: var(--sd-gradient-ice-pink); color: var(--sd-color-blue-moon); } .sd-bg-gradient-pink-yellow { background: var(--sd-gradient-pink-yellow); color: var(--sd-color-blue-moon); } .sd-bg-gradient-yellow-ice { background: var(--sd-gradient-yellow-ice); color: var(--sd-color-blue-moon); } /* Texas Sun special case [BOOK] White Rabbit is the lead text on Texas Sun, but Blue Moon is also accessible — particularly on the Texas Sun + Pink Floyd gradient (see SD Lab Gradient Section, marked [TBD] above). */ .sd-bg-texas-sun--blue-moon-text { color: var(--sd-color-blue-moon); } /* ----------------------------------------------------------------------------- 6. Layout primitives [INTERP] ----------------------------------------------------------------------------- */ .sd-container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--sd-space-5); } .sd-container--wide { max-width: 1600px; } .sd-container--narrow { max-width: 880px; } .sd-section { padding-block: var(--sd-space-9); } .sd-stack > * + * { margin-top: var(--sd-space-4); } .sd-stack-lg > * + * { margin-top: var(--sd-space-6); } /* ----------------------------------------------------------------------------- 7. Buttons [BOOK] UI elements use "slightly rounded" forms. Labels in the book's examples are uppercase ("BOOK A CONSULTATION", "GET STARTED", "SIGN IN"). Outlines and gradient buttons are only valid on Blue Moon or White Rabbit surfaces. [INTERP] Specific paddings, font sizes, hover/focus states, and the choice of pill radius are interpretive. ----------------------------------------------------------------------------- */ .sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sd-space-2); padding: var(--sd-space-3) var(--sd-space-6); font-family: var(--sd-font-body); font-weight: 700; font-size: var(--sd-fs-small); text-transform: uppercase; letter-spacing: var(--sd-tracking-button); text-decoration: none; line-height: 1; border: var(--sd-border-width) solid transparent; border-radius: var(--sd-radius-pill); cursor: pointer; transition: background-color var(--sd-transition-base), color var(--sd-transition-base), border-color var(--sd-transition-base), transform var(--sd-transition-fast); white-space: nowrap; } .sd-btn:hover { transform: translateY(-1px); } .sd-btn:focus-visible { outline: 2px solid var(--sd-color-ocean-eyes); outline-offset: 3px; } .sd-btn:disabled, .sd-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; } /* Primary — Blue Moon background, White Rabbit text */ .sd-btn--primary { background-color: var(--sd-color-blue-moon); color: var(--sd-color-white-rabbit); border-color: var(--sd-color-blue-moon); } .sd-btn--primary:hover { background-color: #0e0e26; /* [INTERP] darkened Blue Moon */ border-color: #0e0e26; } /* Inverse — White Rabbit background, Blue Moon text (for dark surfaces) */ .sd-btn--inverse { background-color: var(--sd-color-white-rabbit); color: var(--sd-color-blue-moon); border-color: var(--sd-color-white-rabbit); } .sd-btn--inverse:hover { background-color: var(--sd-color-ice-ice-baby); /* [INTERP] cool tint */ border-color: var(--sd-color-ice-ice-baby); } /* Outline — only Blue Moon or White Rabbit per "core color outlines" [BOOK] */ .sd-btn--outline { background-color: transparent; color: var(--sd-color-blue-moon); border-color: var(--sd-color-blue-moon); } .sd-btn--outline:hover { background-color: var(--sd-color-blue-moon); color: var(--sd-color-white-rabbit); } .sd-btn--outline-inverse { background-color: transparent; color: var(--sd-color-white-rabbit); border-color: var(--sd-color-white-rabbit); } .sd-btn--outline-inverse:hover { background-color: var(--sd-color-white-rabbit); color: var(--sd-color-blue-moon); } /* Gradient buttons [BOOK] "Gradients or color outlines can only be used over Blue Moon or White Rabbit backgrounds. Additionally, only one gradient or one bright color is permitted to be combined with these two core colors." */ .sd-btn--gradient { background: var(--sd-gradient-ice-pink); color: var(--sd-color-blue-moon); border-color: transparent; } .sd-btn--sm { padding: var(--sd-space-2) var(--sd-space-4); font-size: 0.75rem; } .sd-btn--lg { padding: var(--sd-space-4) var(--sd-space-7); font-size: 1rem; } /* ----------------------------------------------------------------------------- 8. Cards / surfaces / "stickers" [INTERP] The "sticker" treatment is [BOOK]: shapes can highlight copy with text in Blue Moon or White Rabbit only. Specific paddings and radii are [INTERP]. ----------------------------------------------------------------------------- */ .sd-card { background-color: var(--sd-color-white-rabbit); color: var(--sd-color-blue-moon); border: var(--sd-border-width) solid var(--sd-color-blue-moon); border-radius: var(--sd-radius-lg); padding: var(--sd-space-6); } .sd-card--inverse { background-color: var(--sd-color-blue-moon); color: var(--sd-color-white-rabbit); border-color: var(--sd-color-white-rabbit); } .sd-sticker { display: inline-block; padding: var(--sd-space-2) var(--sd-space-4); border-radius: var(--sd-radius-pill); font-family: var(--sd-font-heading); font-weight: 400; text-transform: uppercase; letter-spacing: var(--sd-tracking-button); font-size: var(--sd-fs-small); line-height: 1; } /* ----------------------------------------------------------------------------- 9. Forms [INTERP] Brand book does not specify form styling. Defaults below use core colors only and follow the "core color outlines" guidance. ----------------------------------------------------------------------------- */ .sd-input, .sd-textarea, .sd-select { width: 100%; font-family: var(--sd-font-body); font-size: var(--sd-fs-body); color: var(--sd-color-blue-moon); background-color: var(--sd-color-white-rabbit); border: var(--sd-border-width) solid var(--sd-color-blue-moon); border-radius: var(--sd-radius-md); padding: var(--sd-space-3) var(--sd-space-4); line-height: var(--sd-lh-normal); transition: border-color var(--sd-transition-fast), box-shadow var(--sd-transition-fast); } .sd-input:focus, .sd-textarea:focus, .sd-select:focus { outline: none; border-color: var(--sd-color-ocean-eyes); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sd-color-ocean-eyes) 25%, transparent); } .sd-textarea { min-height: 8rem; resize: vertical; } .sd-label { display: inline-block; font-family: var(--sd-font-body); font-weight: 700; font-size: var(--sd-fs-small); margin-bottom: var(--sd-space-2); color: var(--sd-color-blue-moon); } /* ----------------------------------------------------------------------------- 10. Helpers ----------------------------------------------------------------------------- */ .sd-uppercase { text-transform: uppercase; } .sd-sentence { text-transform: none; } .sd-text-center { text-align: center; } .sd-text-left { text-align: left; } .sd-text-right { text-align: right; } .sd-hide { display: none !important; } .sd-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------------- 11. Brand "don'ts" (reference only — no styles attached) [BOOK] The class names below have no rules attached. Their presence anywhere in markup is a signal that something needs to be removed. Useful for grep / lint checks. .sd-DONT-syne-bold -> Syne in any weight other than Regular .sd-DONT-syne-sentence-case -> Syne in non-uppercase .sd-DONT-inter-headline -> Inter used for headlines .sd-DONT-multiple-bright-colors -> >1 saturated/iced color per piece .sd-DONT-custom-gradient -> Gradient outside the approved four .sd-DONT-color-text -> Text in a color other than Blue Moon or White Rabbit ----------------------------------------------------------------------------- */