--- version: 1 name: Cream Neobrutalist Mobile colors: background: "#F5F0E8" surface: "#FFFFFF" on-surface: "#1A1A1A" on-surface-variant: "#6B7280" border: "#1A1A1A" primary: "#E85D3A" on-primary: "#FFFFFF" secondary: "#1A1A1A" on-secondary: "#FFFFFF" accent: "#E8B93A" on-accent: "#1A1A1A" muted: "#E5E7EB" cat-coral: "#E85D3A" cat-blue: "#3A6BE8" cat-green: "#7BB069" cat-yellow: "#E8B93A" cat-pink: "#E85D8A" error: "#EF4444" success: "#7BB069" typography: display-md: fontFamily: Fraunces fontSize: 30px fontWeight: 700 lineHeight: 36px letterSpacing: -0.01em headline-lg: fontFamily: Fraunces fontSize: 24px fontWeight: 700 lineHeight: 28px letterSpacing: -0.005em headline-md: fontFamily: Fraunces fontSize: 20px fontWeight: 700 lineHeight: 24px letterSpacing: 0em headline-sm: fontFamily: Fraunces fontSize: 18px fontWeight: 700 lineHeight: 22px letterSpacing: 0em card-numeral: fontFamily: Fraunces fontSize: 18px fontWeight: 700 lineHeight: 20px letterSpacing: 0em body-md: fontFamily: Inter fontSize: 14px fontWeight: 500 lineHeight: 20px letterSpacing: 0em body-sm: fontFamily: Inter fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0em body-italic: fontFamily: Fraunces fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0em label-md: fontFamily: Inter fontSize: 12px fontWeight: 700 lineHeight: 16px letterSpacing: 0.06em label-sm: fontFamily: Inter fontSize: 10px fontWeight: 700 lineHeight: 12px letterSpacing: 0.08em tab-label: fontFamily: Inter fontSize: 10px fontWeight: 700 lineHeight: 12px letterSpacing: 0.08em rounded: sm: 8px md: 12px lg: 16px xl: 20px "2xl": 24px full: 9999px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px "2xl": 32px gutter: 24px card-padding: 16px section-gap: 32px icons: set: phosphor default_variant: regular active_variant: fill stroke_weight: 1.5px default_size: 24px components: card: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" borderColor: "{colors.border}" borderWidth: 2px rounded: "{rounded.lg}" padding: "{spacing.card-padding}" boxShadow: "4px 4px 0px #1A1A1A" card-compact: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" borderColor: "{colors.border}" borderWidth: 2px rounded: "{rounded.md}" padding: 12px boxShadow: "2px 2px 0px #1A1A1A" card-feature: backgroundColor: "{colors.secondary}" textColor: "{colors.on-secondary}" borderColor: "{colors.border}" borderWidth: 2px rounded: "{rounded.xl}" padding: 20px boxShadow: "4px 4px 0px #1A1A1A" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" borderColor: "{colors.border}" borderWidth: 2px typography: "{typography.label-md}" rounded: "{rounded.md}" height: 44px paddingX: 20px boxShadow: "4px 4px 0px #1A1A1A" pressedBackground: "#D4512F" button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" borderColor: "{colors.border}" borderWidth: 2px typography: "{typography.label-md}" rounded: "{rounded.md}" height: 44px paddingX: 20px boxShadow: "2px 2px 0px #1A1A1A" button-icon: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" borderColor: "{colors.border}" borderWidth: 2px rounded: "{rounded.md}" size: 44px boxShadow: "2px 2px 0px #1A1A1A" iconSize: 24px button-fab: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" borderColor: "{colors.border}" borderWidth: 2px rounded: "{rounded.lg}" size: 56px boxShadow: "4px 4px 0px #1A1A1A" iconSize: 32px input-text: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" borderColor: "{colors.border}" borderWidth: 2px typography: "{typography.body-md}" rounded: "{rounded.md}" height: 44px paddingX: 16px boxShadow: "2px 2px 0px #1A1A1A" focusRingColor: "{colors.primary}" chip: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" borderColor: "{colors.border}" borderWidth: 2px typography: "{typography.label-md}" rounded: "{rounded.full}" paddingX: 16px paddingY: 8px boxShadow: "2px 2px 0px #1A1A1A" chip-active: backgroundColor: "{colors.secondary}" textColor: "{colors.on-secondary}" borderColor: "{colors.border}" borderWidth: 2px typography: "{typography.label-md}" rounded: "{rounded.full}" paddingX: 16px paddingY: 8px boxShadow: "2px 2px 0px #1A1A1A" badge-pill: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" borderColor: "{colors.border}" borderWidth: 2px typography: "{typography.label-sm}" rounded: "{rounded.full}" paddingX: 10px paddingY: 4px boxShadow: none avatar: backgroundColor: "{colors.muted}" borderColor: "{colors.border}" borderWidth: 2px rounded: "{rounded.md}" size: 56px boxShadow: none avatar-circle-sm: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" borderColor: "{colors.border}" borderWidth: 2px rounded: "{rounded.full}" size: 48px boxShadow: "2px 2px 0px #1A1A1A" list-row: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" borderColor: "{colors.border}" borderWidth: 2px rounded: "{rounded.lg}" padding: 12px gap: "{spacing.lg}" boxShadow: "4px 4px 0px #1A1A1A" progress-bar: backgroundColor: "{colors.muted}" rounded: "{rounded.full}" height: 6px border: none boxShadow: none progress-bar-thick: backgroundColor: "#3A3A3A" rounded: "{rounded.full}" height: 8px border: none boxShadow: none top-app-bar: backgroundColor: "{colors.background}" textColor: "{colors.on-surface}" borderColor: "{colors.border}" borderWidth: 2px paddingX: "{spacing.gutter}" paddingY: 16px boxShadow: none tab-bar: backgroundColor: "{colors.surface}" borderColor: "{colors.border}" borderWidth: 2px paddingX: "{spacing.gutter}" paddingY: 12px boxShadow: "0 -2px 10px rgba(0,0,0,0.05)" tab-item-active: backgroundColor: "{colors.secondary}" textColor: "{colors.on-secondary}" rounded: "{rounded.md}" size: 44px iconSize: 24px border: none boxShadow: "2px 2px 0px #1A1A1A" tab-item-inactive: backgroundColor: "transparent" textColor: "{colors.on-surface-variant}" rounded: "{rounded.md}" size: 44px iconSize: 24px border: none boxShadow: none --- # Cream Neobrutalist Mobile ## Overview **Warm, paper-stock cream canvas married to ink-black 2px borders and offset hard shadows.** This is a contemporary neobrutalist mobile aesthetic: every meaningful surface is hand-stamped with a thick black outline and a flat, non-blurred drop-shadow that sits a few pixels down-and-right, as if every card were a printed sticker pressed onto kraft paper. There is zero translucency, zero Gaussian blur, and zero gradient softness — depth is conveyed by the offset shadow alone. The personality is **editorial-meets-arcade**: a warm Fraunces serif (often italicized for the second word of a title, used as a typographic flourish) carries headings, while Inter handles all functional UI text in heavy weights with generous letter-spacing on uppercase labels. Color is used as confident, saturated punctuation against the cream and ink — never as a wash or atmosphere. The result feels tactile, opinionated, and slightly playful — confident enough to be used for serious products but warm enough to feel inviting. ## Colors The palette has three layers, each with strict boundaries: **Chrome (always present):** `{colors.background}` is the warm cream canvas; `{colors.surface}` is pure white reserved for cards and inputs only — never a full-screen background. `{colors.on-surface}` doubles as the universal **border color** at 2px on every component. `{colors.on-surface-variant}` is the only acceptable secondary text color. **Brand & emphasis:** `{colors.primary}` (saturated coral) is used for the dominant CTA, active progress fill, and translation/hint text in word entries. `{colors.secondary}` (near-black ink) is used for hero feature surfaces, the active tab pill, and active filter chips. `{colors.accent}` (warm yellow) is reserved for stars, achievements, and "in progress" states — it never carries a CTA. **Categorical (`cat-*`):** five saturated hues (`cat-coral`, `cat-blue`, `cat-green`, `cat-yellow`, `cat-pink`) for tagging, status, charting, and category icons. Use them to *differentiate* — never to decorate. A card never has a `cat-*` background unless it represents a categorical state. The hero feature card (`{components.card-feature}`) and the AI-style accent card use `{colors.secondary}` and `{colors.cat-blue}` respectively as full backgrounds; this is the signature "loud surface" move and should be used sparingly (one per screen). **Hard rules:** - The 2px border is **always** `{colors.border}` (`#1A1A1A`). Never a tinted border, never a hairline, never a different weight. - Drop shadows are **always** the same ink color, no blur, offset only. Never soft, never colored. - The cream `{colors.background}` never appears inside cards — surfaces are white or a saturated brand/categorical hue. ## Typography Two-family system: - **Fraunces** (serif) carries every heading, every numeral that wants weight, and the recurring "italic flourish" trick. Always 700 for the bold portion; 400 italic for the flourish word. Mix bold and italic in the same heading by italicizing the second noun (e.g. *first* word bold-roman, *second* word italic-regular) — this is a signature gesture. - **Inter** handles all functional UI: labels, buttons, body, captions, tab labels. `{typography.display-md}` (30px Fraunces 700) is the screen title. `{typography.headline-md}` and `{typography.headline-sm}` are section anchors and card titles. `{typography.label-md}` and `{typography.label-sm}` are uppercase, heavily letter-spaced (0.06–0.08em) — they carry metadata kickers, button text, badge text, and tab labels. The uppercase + tracked-out treatment is load-bearing: it visually "stamps" labels onto the page like a printer's mark. `{typography.body-italic}` (Fraunces italic at 12px) is reserved for example sentences, voice samples, or quoted phrases — italic Fraunces does the work that a quote-block bar or fancy callout would do in other systems. **Weight rule of thumb:** Fraunces is bold or italic-regular, never in between. Inter is 700 for labels, 500 for body, 400 only for muted descriptive text. ## Spacing & Layout Density sits at **balanced-to-airy**. Screen gutters are `{spacing.gutter}` (24px); cards have `{spacing.card-padding}` (16px) internal padding; sections separate at `{spacing.section-gap}` (32px). The cream surface and uniform 4px hard-shadow offsets create natural breathing room — content doesn't need to crowd. A consistent rhythm: a sticky bordered top bar, a hero loud-surface card, a horizontal chip strip, then a vertical stack of bordered cards. The implementer composes screens from these blocks; the aesthetic does not prescribe the arrangement. ## Elevation & Depth There is exactly **one elevation move** in this system, applied with three offset sizes: - **2px offset** (`shadow-[2px_2px_0px_#1A1A1A]`) — small chrome (badges, chips, inputs, icon buttons, tab active pill, compact cards). - **4px offset** (`shadow-[4px_4px_0px_#1A1A1A]`) — primary cards, list rows, feature surfaces, the FAB, primary CTAs. - **0 offset** — backgrounds, dividers, decorative dot patterns, progress bars, plain inline avatars. The shadow is **always solid `#1A1A1A`, no blur, offset down-and-right**. Never use `rgba` blurry shadows, never use a colored glow, never inset. The pressed state collapses the offset: `active:translate-x-[1px] active:translate-y-[1px] active:shadow-none` (or to the next-smaller offset). This press behavior is the signature interactivity feel and should apply to every interactive bordered element. The **single exception** is the bottom tab bar, which uses a soft top-edge glow (`0 -2px 10px rgba(0,0,0,0.05)`) to lift it off the canvas — this is the only blurred shadow allowed in the system. ## Shapes Mostly rounded rectangles in a tight scale — `{rounded.md}` (12px) for inputs, icon buttons, and small cards; `{rounded.lg}` (16px) for standard cards and list rows; `{rounded.xl}` (20px) for hero/feature cards; `{rounded.full}` for chips, progress bars, status dots, and the user-circle avatar. Avatars in list rows use `{rounded.md}` (square-with-soft-corners), not circles — circles are reserved for status indicators and the header user mark. The shape language is **softened-rectangular**, not pillowy. Corners are visible and consistent; nothing is fully circular except where pill-shape is functional. ## Components ### card The workhorse surface. White fill, 2px ink border, 4px hard shadow, 16px internal padding. ```html

[Card title]

[Card body]

``` ### card-feature The "loud surface" — used at most once per screen as a hero CTA / feature highlight. Black or saturated-color fill, white text, often overlaid with a faint dot-grid texture in the top-right corner. ```html

[Kicker]

[Title] [flourish]

[Subtitle]

``` ### button-primary Coral fill, ink border, 4px hard shadow, uppercase tracked-out label. ```html ``` ### button-secondary White fill, ink border, 2px hard shadow. ```html ``` ### button-icon 44×44 square icon button with the same chrome treatment. ```html ``` ### button-fab Floating action button, 56×56, primary fill, 4px shadow, anchored above the tab bar. ```html ``` ### input-text ```html
``` ### chip / chip-active Pill chips, uppercase-tracked label, always with 2px shadow. Active state is ink-fill / white-text. ```html ``` ### list-row A standalone bordered card-as-row with avatar/icon + body + trailing meta. ```html

[Primary]

[Meta]

[Secondary]

``` ### avatar Image avatars are square with `{rounded.md}` corners and a 2px ink border — never circular. A small status dot can be hung off the bottom-right with its own 2px border. ```html
``` ### avatar-circle-sm Header user mark — a coral circle with a Fraunces initial, used only once per screen at the top-right. ```html
[Initial]
``` ### progress-bar Thin track in `{colors.muted}` with a saturated fill. The fill color encodes status (use `cat-green` for completed, `cat-yellow` for in progress, `cat-pink` for new, `{colors.primary}` for active session). For loud-surface progress, use `progress-bar-thick` with a diagonal-stripe primary fill: ```html
``` The diagonal-stripe progress fill on dark surfaces is a signature flourish — use it only on `card-feature`-style loud surfaces, never on standard white cards. ### top-app-bar Flat, bordered-bottom, lives on the cream background. Holds title + optional avatar/icon-button on the right. ```html

[Title] [flourish]

``` ### tab-bar White surface, bordered-top, soft upward glow. Active item is an ink-filled rounded square with the icon in the filled variant; inactive items are transparent with the regular icon variant. Tab label sits below in `{typography.tab-label}`. ```html ``` ### Composition recipes (not separate components) - **Stat tile**: a `card-compact` with a category-colored Phosphor `-fill` icon on the left, an uppercase `{typography.label-sm}` kicker (`leading-none`), and a `{typography.headline-sm}` numeral below. Three abreast in a flex row. Don't add a separate `stat-tile` component — compose it. - **Numbered/list step**: a 64×64 square `{rounded.xl}` colored tile (status: `cat-green` complete, `{colors.primary}` active, `{colors.muted}` locked) with a Phosphor icon, paired with a kicker + title to its right. Indent each successive step horizontally to suggest a meandering path. - **Inline quote / example sentence**: render `{typography.body-italic}` with a 2px left border in `{colors.muted}` and 12px left padding. This replaces a quote-card. - **Status badge** (Mastered / Learning / New): plain `{typography.label-sm}` text in the corresponding `cat-*` color, no pill chrome — the color alone carries the status. ## Iconography **Set: Phosphor.** Use the regular variant (no suffix) for inactive states and bold/regular icons within content; use the `-fill` variant for active states (active tab, primary surface decorations, category markers in stat tiles). The `-bold` variant is used sparingly for emphasis arrows and confirmation marks. **Phosphor naming quirk — important**: Phosphor's "regular" variant has NO suffix. Write `ph:user`, NOT `ph:user-regular` (which does not exist and renders as a missing-icon glyph). The available suffixes are `-bold`, `-fill`, `-light`, `-thin`, `-duotone` only. Icon sizing in snippets uses Tailwind classes (`size-5`, `size-6`, `size-8`), never `width`/`height` HTML attributes. Default chrome icon size is 24px (`size-6`); FAB and large stat icons go to 32px (`size-8`); small inline icons go to 20px (`size-5`). Icons inside category tiles take their color from the tile category (one of the `cat-*` tokens). Icons inside `card-feature` surfaces are white. Icons in inactive tab items use `{colors.on-surface-variant}`. ## Illustration & Imagery **Note**: the only `` elements in source HTML are user profile photos (e.g. randomuser.me portraits) — no decorative illustrations. The aesthetic is illustration-light by nature: it relies on bold typography, hard-shadow surfaces, dot-grid textures, and Phosphor icons rather than illustrated scenes. Treat imagery as a supporting element, not a hero. The descriptions below cover what the source DOES show (photographic avatars) and what would be aesthetically consistent if a brief introduces additional imagery. - **Style / Technique** *(for photographic content like avatars)*: natural, warmly-lit photographic portraits with a slight golden/cream cast. Soft daylight, shallow depth of field, candid framing. NOT studio-lit, NOT heavily filtered, NOT color-graded into a single palette. *(For illustrated content, if a brief introduces it: flat 2D vector with a 2px black outline matching the chrome borders, filled with the categorical palette, no shading — illustrations should look like they were drawn by the same hand that drew the borders.)* - **Palette**: photos retain their natural color but read as warm thanks to the cream background. Illustrations, if used, should be limited to 3–4 colors per piece drawn from `cat-coral`, `cat-blue`, `cat-green`, `cat-yellow`, `cat-pink`, with `{colors.on-surface}` for the outline. - **Edge treatment**: photos are **always** wrapped in a 2px `{colors.border}` black border matching every other component. Illustrations would carry the same 2px black outline as a hard rule — outlines are non-negotiable in this system. - **Shading & light**: photos retain their natural shading. Illustrations are flat — no gradients, no soft shading, no ambient occlusion. One-color fills only. - **Composition & framing**: portrait avatars are square-cropped tight on the face, bleeding to the edges of their square frame. Decorative imagery should be centered and surrounded by generous negative space within its container. - **Background within the illustration**: photos retain their natural background. For an illustration, prefer a transparent or solid `{colors.surface}`/`{colors.background}` background — never include scenery or an illustrated environment. - **Container styling**: every image sits in a `{rounded.md}` (12px corner) square frame with a **2px solid `#1A1A1A` border**, no internal padding. The image fills its frame with `object-cover`. Avatars get a small status dot (`size-4 rounded-full`) hung off the bottom-right with its own 2px black border when an online state needs to be communicated. - **CSS treatment on the `` element**: `object-cover` on every image. NO `mix-blend-mode`, NO `opacity` reduction (except `opacity-70` to suggest a "muted" or "archived" row state — applied to the entire row, not the image alone), NO CSS `filter`. Quote: `class="size-14 rounded-xl border-2 border-[#1A1A1A]"`. - **Box-shadow on the image or its frame**: **none** — image frames sit flat. The hard-shadow treatment is reserved for the *card or row* that contains the image, not the image itself. (Exception: if an image is itself a standalone surface — e.g. a profile hero — apply the standard `4px 4px 0px #1A1A1A` shadow to its frame.) - **Aspect ratio rule**: always **1:1 square** for avatars and thumbnails. Crop to square; do not preserve source aspect. For wider editorial imagery, use 4:3 or 16:9 within the same bordered-square-corner frame. - **Anti-references**: NOT 3D, NOT claymation, NOT photorealistic illustration, NOT painterly, NOT pastel, NOT line-art-only (must be filled), NOT outlined-in-color (outline must be `#1A1A1A`), NOT shadowed/blurred (image frames are flat). - **Style recipe prompt** *(for any illustrated `[SUBJECT]` a brief might call for)*: > *Flat 2D vector illustration of [SUBJECT], drawn with a confident 2px solid black outline. Filled with 3 to 4 saturated flat colors drawn from a small palette of warm coral, vivid blue, leafy green, golden yellow, and hot pink — no gradients, no shading, no ambient occlusion. Centered composition with generous negative space. Transparent or warm cream solid background. Editorial-meets-arcade neobrutalist style. NOT 3D, NOT claymation, NOT photorealistic, NOT pastel, NOT painterly, NOT outlined in any color other than black.* ## Hierarchy & Emphasis What gets weight, in order: 1. **Loud-surface cards** (`card-feature`) — saturated or ink fill, claim the most attention. One per screen. 2. **Fraunces 700 headings** with the italic-flourish second word — the typography itself is the loudest non-color signal. 3. **Primary-fill buttons** (coral) — single per screen for the dominant action. 4. **Saturated category color** in icons, progress fills, and accent text — codes meaning, never decorates. 5. **Standard cards and rows** — whisper-equal in importance; differentiation comes from content, not chrome. 6. **Muted text** (`{colors.on-surface-variant}`) — metadata, captions, kickers; always reads as quieter context. ## Distinctive Details - **The italic flourish.** Every screen-title or feature-card heading splits its words: the first half is Fraunces 700 roman, the second half is Fraunces 400 *italic*. This is the signature typographic gesture and should appear at least once per screen. - **The hard-offset shadow.** No blur, ever. Always `Npx Npx 0px #1A1A1A`. Buttons and cards collapse the offset on press (`active:translate-x-[1px] active:translate-y-[1px] active:shadow-none`) — this physical "stamp pressing into paper" feel is the system's interactivity language. - **Dot-grid texture overlay.** Loud-surface cards (`card-feature`) often carry a small radial-gradient dot pattern in the top-right corner at 20% opacity — a printer's halftone reference that ties decorative texture to the rest of the system without using imagery. - **Diagonal-stripe progress fill.** When progress sits on a dark feature surface, the fill becomes a 45° repeating-linear-gradient stripe in the primary color — never used on white cards, only on the loud surfaces, where it reads as a printed sticker label. ## Do's and Don'ts ### Do - Apply 2px `#1A1A1A` borders to every card, button, input, chip, image frame, and badge — the border is non-negotiable. - Use the hard-offset shadow (no blur) at 2px or 4px sizes; collapse it on press. - Keep the cream `{colors.background}` for the canvas only; surfaces are white or a saturated brand/categorical color. - Italicize the second word of headings in Fraunces regular for the signature flourish. - Use uppercase + 0.06–0.08em letter-spacing for every label, button, and meta-caption. - Reserve the loud feature surface (`card-feature`) for one card per screen. - Use Phosphor's `-fill` variant for active states and the regular (no suffix) variant for inactive states. ### Don't - Don't use blurry / soft shadows anywhere except the bottom tab-bar's upward glow. - Don't tint the border — it's always pure ink `#1A1A1A`. - Don't use translucent overlays, glass, or backdrop-blur — this aesthetic is opaque end-to-end. - Don't put the cream background inside a card — use white or a saturated fill. - Don't write Phosphor's regular variant as `ph:name-regular` — it must be the bare name `ph:name`. - Don't use HTML `width`/`height` attributes on `` — always use `size-*` or `w-*`/`h-*` Tailwind classes. - Don't make avatars circular — they're rounded squares (`{rounded.md}`). Circles are for status dots and the single header user mark only. - Don't introduce gradients, soft shading, or pastel colors — the palette is saturated or ink, never washed out. - Don't add more than one loud (saturated/ink-fill) surface per screen.