# Design Language for tanso.day ## Aesthetics and Tone tanso.day channels a flat-design aesthetic — the clean geometric forms, unadorned surfaces, and honest simplicity of flat design applied to a daily carbon (炭素/tanso) awareness and tracking platform. The site clarifies — with the reductive honesty of early iOS 7's design revolution, the geometric precision of Google's Material Design foundations, and the functional clarity of a daily carbon dashboard that strips away all decoration to reveal the essential truth of emissions data. Inspiration draws from the flat illustration work of Owen Davey, the geometric simplicity of Dropbox's rebrand, the information clarity of weather app interfaces, and the daily-ritual quality of mindfulness apps that make carbon awareness a daily practice. The tone is pastoral-romantic — surprisingly poetic language that treats daily carbon tracking as a gentle pastoral practice, observing the carbon landscape with the attentive care of a naturalist tending a garden. The flat-design treatment transforms daily carbon tracking from complex data visualization into clean, readable daily summaries — emissions displayed as simple geometric shapes sized proportionally to impact, reduction targets shown as flat progress bars with no gradient embellishment, and daily goals rendered as unadorned checkboxes that celebrate simplicity. The "day" focus creates ritual — each day is a fresh canvas for carbon consciousness. Each component embodies flat design's honest simplicity — zero gradients, zero shadows, zero textures. Colors are flat fills, borders are uniform strokes, and typography carries all the visual weight. The pastoral-romantic tone creates unexpected poetry — daily carbon data described with the gentle lyricism of nature writing. ## Layout Motifs and Structure The layout uses an **asymmetric** architecture — content blocks arranged with deliberate imbalance creating dynamic tension between carbon data and pastoral narrative, reflecting the daily push-pull between convenience and environmental responsibility. **Asymmetric Composition:** - Primary column: 62% width, left-aligned for data-heavy content - Secondary column: 33% width, right-offset for narrative and context - Deliberate vertical misalignment between columns (20-40px offset) - Container: max-width: 1000px centered - The asymmetry creates the off-balance quality of daily environmental decisions that never feel perfectly resolved **Section Sequence:** 1. **Dawn:** Hero with mono typography on flat colored ground, circuit clean geometric connection patterns, glitch-art fragmented daily-data imagery 2. **Morning Data:** Today's carbon metrics in asymmetric flat layout — card-flip interactive flat-panel data reveals with glitch-art minimal digital texture 3. **Afternoon Practice:** Daily carbon practices in offset columns with circuit simplified connection motifs and clean flat backgrounds 4. **Evening Reflection:** Daily carbon summary in balanced asymmetric review with circuit minimal closing patterns 5. **Dusk:** Footer as day's end — pastoral farewell with circuit fading connection lines and flat minimal closing **Spatial Philosophy:** - Asymmetry creates the daily-journal quality of handwritten entries that never sit perfectly on ruled lines - Flat surfaces create honesty — what you see is what you get, like unfiltered daily data - The dawn-to-dusk section progression creates natural daily rhythm ## Typography and Palette **Typography:** - **Headlines:** "Space Mono" (Google Fonts) — mono at 1.8rem-2.6rem, weight 700. Its monospace regularity creates the daily-log quality of terminal readouts tracking carbon with mechanical precision. - **Body Text:** "Karla" (Google Fonts) — clean sans at 0.9rem, weight 400, line height 1.75. - **Data:** "Space Mono" (Google Fonts) — monospace at 0.85rem for carbon measurements and daily tracking numbers. - **Labels:** "Karla" at 0.65rem, weight 700, uppercase, letter-spacing 0.12em. **Color Palette:** - **Day White:** #faf9f6 — clean off-white for primary background - **Flat Cream:** #f0ece4 — warm cream for secondary card surfaces - **Deep Burgundy:** #8b2252 — rich burgundy for primary accent - **Forest Flat:** #2d6a4f — flat forest green for secondary accent - **Amber Flat:** #d08c30 — warm amber for tertiary accent - **Text Dark:** #1a1a1a — near-black for text - **Muted Gray:** #7a7a7a — medium gray for secondary text - **Border Flat:** rgba(139,34,82,0.12) — burgundy-tinted flat border ## Imagery and Motifs **Glitch-Art Daily Data Texture:** Minimal digital texture suggesting daily data streams — CSS repeating-linear-gradient with 1px colored lines at wide intervals (every 120px) in Deep Burgundy at 0.03 opacity. The glitch quality creates subtle digital-artifact texture without compromising flat design's clean surfaces. **Card-Flip Daily Panel Reveals:** Interactive daily data cards flip to show detailed breakdowns — rotateY(0) to rotateY(180deg) over 400ms, front showing daily summary, back showing hourly breakdown. No shadows in either state, maintaining flat-design purity through the transition. **Circuit Connection Patterns:** Decorative circuit-like connection lines — SVG right-angle paths (1px stroke, Forest Flat at 0.06 opacity) connecting related data points across the asymmetric layout. The circuits create the network quality of interconnected daily carbon decisions. **Flat Color Blocks:** Key data areas highlighted with solid color fills — background-color: rgba(139,34,82,0.04) for burgundy emphasis, rgba(45,106,79,0.04) for green positive indicators. No gradients, no shadows — pure flat color communicating meaning through hue alone. **Daily Rhythm Indicators:** Time-of-day markers using flat geometric shapes — morning: circle (Forest Flat), afternoon: square (Amber Flat), evening: triangle (Deep Burgundy), all at 16px, filled solid with flat color. The shapes create a simple visual language for daily temporal progression. ## Prompts for Implementation Build the page as a flat-design daily carbon tracker. Asymmetric layout: .daily-grid { display: grid; grid-template-columns: 62% 33%; gap: 5%; max-width: 1000px; margin: 0 auto; } .offset-right { margin-top: 30px; } Flat card: .flat-card { background: #f0ece4; border: 1px solid rgba(139,34,82,0.12); border-radius: 4px; padding: 28px; } /* Zero box-shadow, zero gradient */ Card flip: .flip { perspective: 800px; } .flip-inner { transition: transform 400ms; transform-style: preserve-3d; } .flip:hover .flip-inner { transform: rotateY(180deg); } .flip-front, .flip-back { backface-visibility: hidden; } .flip-back { transform: rotateY(180deg); } AVOID: Skeuomorphic textures, gradient-heavy dashboards, and elaborate data visualizations. Let flat-design honesty and pastoral-romantic poetry create a daily carbon tracker where environmental awareness is practiced with the simple clarity of a morning meditation. ## Uniqueness Notes 1. **Flat-design for daily carbon:** Honest simplicity strips carbon tracking to essentials, making daily practice effortless and clear. 2. **Asymmetric as daily-journal quality:** Offset columns create the handwritten-journal feeling of daily entries that are personal and imperfect. 3. **Pastoral-romantic tone for data:** Poetic language transforms daily carbon numbers into nature writing, making tracking feel like tending a garden. 4. **Dawn-to-dusk progression:** Section sequence mirrors natural daily rhythm, embedding carbon awareness into the structure of each day. 5. **Zero-shadow flat purity:** Absolute commitment to flat design (no shadows, no gradients) creates visual honesty matching environmental truthfulness. **Seed/Style:** aesthetic: flat-design, layout: asymmetric, typography: mono, palette: deep-burgundy, patterns: card-flip, imagery: glitch-art, motifs: circuit, tone: pastoral-romantic **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, parallax-sections layout, warm palette, friendly tone, minimal imagery. This design uses flat-design aesthetic, asymmetric layout, mono typography, deep-burgundy palette, card-flip patterns, glitch-art imagery, and pastoral-romantic tone.