Start from a template in Grok Imagine
96
/* Force single-scheme rendering so clients that honor color-scheme (Apple Mail, iOS Mail,
and Outlook web in part) skip the prefers-color-scheme: dark path and their auto-invert
heuristics have fewer signals to act on. */
:root {
color-scheme: normal;
supported-color-schemes: normal;
}
/* Type scale (px): sm 14/18 | base 16/21 | medium 24/29 | large 32/35 | display 48/48 */
/* Spacing tokens (between modules, applied via spacer rows): xs 7 | sm 10 | md 16 | lg 21 | xl 32 | section 52 */
/* Radius: 8px | Card pad: 12px | Buttons: pill (100px radius, VML roundrect in Outlook — resize VML width/height when copy changes) */
/* Palette: bg transparent | container transparent | text #000 | secondary #7D7C78 */
/* Borders: 5% #ECEBE8 | 10% #E0DFDD | 20% #C7C6C3 */
/* Resets */
body, table, td, div, p, a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
p { margin: 0; mso-line-height-rule: exactly; }
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
border-collapse: collapse;
}
img {
-ms-interpolation-mode: bicubic;
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
display: block;
}
/* Root — using #fefefe (not #ffffff) so Outlook.com / new Outlook's dark-mode
auto-invert heuristic doesn't pattern-match "pure white light background". */
body {
margin: 0;
padding: 0;
width: 100% !important;
height: 100% !important;
background: #fefefe;
color: #000000;
}
.body-link { color: #000000; text-decoration: underline; }
/* Layout */
.wrapper {
width: 100%;
background: #fefefe;
padding: 21px 0;
}
/* Fluid hybrid container */
.container {
width: 100% !important;
max-width: 620px !important;
margin: 0 auto;
background: #fefefe;
}
.px-base {
padding-left: 25px;
padding-right: 25px;
}
.px-header {
padding-left: 15px;
padding-right: 15px;
}
/* Type scale */
.text-sm {
font-size: 14px;
line-height: 18px;
mso-line-height-rule: exactly;
}
.text-base {
font-size: 16px;
line-height: 21px;
mso-line-height-rule: exactly;
}
.text-medium {
font-size: 24px;
line-height: 29px;
mso-line-height-rule: exactly;
}
.text-large {
font-size: 32px;
line-height: 35px;
mso-line-height-rule: exactly;
}
.text-display {
font-size: 48px;
line-height: 48px;
mso-line-height-rule: exactly;
}
.text-code {
font-size: 14px;
line-height: 18px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
mso-line-height-rule: exactly;
}
.font-semibold { font-weight: 600; }
/* Colors */
.text-primary { color: #000000; }
.text-secondary { color: #7D7C78; }
/* Footer — same #808080 on links and body copy. -webkit-text-fill-color stops
iOS Mail / Apple Mail dark mode from restyling to a lighter link color. */
.footer-link,
.footer-link span,
.footer-text,
.footer-text span {
color: #808080 !important;
-webkit-text-fill-color: #808080 !important;
}
.footer-link { text-decoration: none !important; }
/* iOS Mail / Gmail wrap street addresses in an ; pin them to footer gray, no underline. */
.footer-address,
.footer-address span,
.footer-address a,
a[x-apple-data-detectors] {
color: #808080 !important;
-webkit-text-fill-color: #808080 !important;
text-decoration: none !important;
border-bottom: 0 !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* Cards / metric cells — separated borders so Outlook honors border-radius */
.card-cell, .metric-cell {
border-collapse: separate !important;
border-spacing: 0;
}
.col-header { font-weight: normal; vertical-align: top; }
.hide-mobile { display: table-cell; }
/* Data table */
.data-table { width: 100%; border-collapse: collapse; }
.data-table td,
.data-table th { vertical-align: top; }
.data-table th { border-bottom: 1px solid #E0DFDD; }
.data-table tr:not(:first-child):not(:last-child) td { border-bottom: 1px solid #E0DFDD; }
/* List markers — table-based list for Outlook */
.list-marker { width: 21px; vertical-align: top; }
/* Feature row inside a card (icon + title + description), divider between rows */
.feature-row-cell { vertical-align: top; }
.feature-icon-cell {
width: 18px;
padding-right: 12px;
vertical-align: top;
color: #000000;
}
.feature-divider-cell {
border-top: 1px solid #E0DFDD;
font-size: 1px;
line-height: 1px;
height: 1px;
}
/* MSO fixed heights so Outlook respects card height */
.mso-h-170 { mso-height-rule: exactly; height: 170px; }
.mso-h-209 { mso-height-rule: exactly; height: 209px; }
.mso-h-227 { mso-height-rule: exactly; height: 227px; }
/* Responsive gutters */
@media screen and (max-width: 620px) {
.px-base { padding-left: 20px !important; padding-right: 20px !important; }
.px-header { padding-left: 10px !important; padding-right: 10px !important; }
}
@media screen and (max-width: 520px) {
.px-base { padding-left: 16px !important; padding-right: 16px !important; }
.px-header { padding-left: 6px !important; padding-right: 6px !important; }
}
/* Mobile */
@media screen and (max-width: 479px) {
.wrapper { padding: 0; }
.container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
.px-base { padding-left: 14px !important; padding-right: 14px !important; }
.px-header { padding-left: 4px !important; padding-right: 4px !important; }
.stack-2, .stack-3, .stack-2x { display: block !important; width: 100% !important; max-width: 100% !important; padding-bottom: 10px !important; }
.mso-h-170, .mso-h-209, .mso-h-227 { height: auto !important; }
.hide-mobile { display: none !important; }
.text-display { font-size: 42px !important; line-height: 42px !important; }
.text-large { font-size: 28px !important; line-height: 32px !important; }
.feature-icon-cell { display: block !important; width: auto !important; padding-right: 0 !important; padding-bottom: 16px !important; }
.feature-row-cell { display: block !important; width: 100% !important; }
}
u + .body .grok-logo-blend { display: block !important; }
u + .body .grok-logo-safe { display: none !important; }
/* Footer logo intentionally NOT blend-swapped: the wordmark is mid-gray, which is
legible on both light and dark backgrounds. difference-blending a gray asset
produces a darker, haloed result in Gmail dark mode (fuzzy "ghost" logo). */
@supports (mix-blend-mode: difference) {
.grok-logo-blend { display: block !important; }
.grok-logo-safe { display: none !important; }
}
[data-ogsc] .grok-logo-blend, [data-ogsb] .grok-logo-blend { display: none !important; }
[data-ogsc] .grok-logo-safe, [data-ogsb] .grok-logo-safe { display: none !important; }
[data-ogsc] .grok-logo-white, [data-ogsb] .grok-logo-white { display: block !important; }
[data-ogsc] .footer-logo-blend, [data-ogsb] .footer-logo-blend { display: none !important; }
[data-ogsc] .footer-logo-safe, [data-ogsb] .footer-logo-safe { display: none !important; }
[data-ogsc] .footer-logo-white, [data-ogsb] .footer-logo-white { display: block !important; }
u + .body .footer-link,
u + .body .footer-link span,
u + .body .footer-text,
u + .body .footer-text span,
u + .body .footer-address,
u + .body .footer-address span,
u + .body .footer-address a,
[data-ogsc] .footer-link, [data-ogsb] .footer-link,
[data-ogsc] .footer-link span, [data-ogsb] .footer-link span,
[data-ogsc] .footer-text, [data-ogsb] .footer-text,
[data-ogsc] .footer-text span, [data-ogsb] .footer-text span,
[data-ogsc] .footer-address, [data-ogsb] .footer-address,
[data-ogsc] .footer-address a, [data-ogsb] .footer-address a {
color: #808080 !important;
-webkit-text-fill-color: #808080 !important;
}
u + .body .footer-address a,
[data-ogsc] .footer-address a, [data-ogsb] .footer-address a {
text-decoration: none !important;
border-bottom: 0 !important;
}
/* Outlook.com / Outlook app dark mode — keep buttons legible and reveal the
(light-mode invisible) outlines so pills stay distinguishable on dark backgrounds. */
[data-ogsc] .btn-primary-td, [data-ogsb] .btn-primary-td { background-color: #000000 !important; border-color: #EDEBE4 !important; }
[data-ogsc] .btn-primary-a, [data-ogsb] .btn-primary-a { background-color: #000000 !important; color: #ffffff !important; }
[data-ogsc] .btn-primary-a span, [data-ogsb] .btn-primary-a span { color: #ffffff !important; }
[data-ogsc] .btn-secondary-a, [data-ogsb] .btn-secondary-a, [data-ogsc] .btn-secondary-a span, [data-ogsb] .btn-secondary-a span { color: #EDEBE4 !important; }
Headshots, product shots, posters, and more. Included with your plan.
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
Start from a template in Grok Imagine
Grok Imagine now runs on Image 2.0, our best image model yet. The easiest way to start is with a template. Pick one, add a photo or a few details, and Imagine makes the finished image. Here are five to try.
•
Professional Headshot. Turn a casual photo into a headshot for your profile or bio.
•
E-Commerce Photos. Make listing shots for a product you sell.
•
Editorial Product Poster. Put your product on a magazine-style poster, headline included.
•
Mascot Maker. Design a character for a brand, a team, or a channel.
•
Emoji Creator. Make a custom emoji of your own.
Find more templates for icons, merch, and collages in Imagine.
Open Imagine →
Open Imagine →
Best,SpaceXAI Team
Privacy Policy ·
Terms of Service ·
Help
© 2026 xAI LLC.
1450 Page Mill Rd., Palo Alto, CA 94304.
Unsubscribe
