Sentre Legacy
  • 🥳Welcome
  • Getting Started
  • DApp Manifest
  • Folder Structure
  • Available Scripts
  • Development
    • View
    • Model & Controllers
    • Providers
      • UI Provider
      • Wallet Provider
      • Account Provider
      • Mint Provider
    • Static
    • Global variables
    • Configs
  • Advanced Usage
    • ☀️Theme
    • 👘Customizing Styles
    • 🪝Hooks
  • 🤩Submitting DApps
  • References
  • Best Practices
  • Troubleshoots
  • 🎨Design Pricinples
    • Button
    • Card
    • Checkbox
    • Color
    • Corner radius
    • Drawer
    • Dropdown
    • Grid
    • Icons
    • Input
    • List
    • Menu
    • Modal
    • Radio
    • Select
    • Shadow
    • Spacing
    • Switch
    • Tabs
    • Tooltip
    • Table
    • Typography
  • 📄Litepaper
    • Introduction
    • Industry Problems
    • Sentre: An All-in-one Solution
      • The Open Protocol
      • Liquidity Efficiency
    • SEN as the Heart of the Ecosystem
      • Asymmetric Deposit
      • Adaptive Fee Model
      • The Triad Pool
      • Simulated Mesh Trading
      • Token Use Cases
    • Conclusion
Powered by GitBook
On this page
  • Color principles
  • Color palettes
  • Accent color
  • Themes
  • Sample code
  1. Design Pricinples

Color

Color provides an intuitive way of communicating information to users in your app: it can be used to indicate interactivity, give feedback to user actions, and give your interface a sense of visual co

PreviousCheckboxNextCorner radius

Last updated 3 years ago

Color principles

Use color meaningfully: When color is used sparingly to highlight important elements, it can help create a user interface that is fluid and intuitive.

Use color to indicate interactivity: It's a good idea to choose one color to indicate elements of your application that are interactive. For example, many web pages use blue text to denote a hyperlink.

Color palettes

Accent color

Common controls use an accent color to convey state information. By default, the accent color is the SystemAccentColor: #F9575E that users select in their Settings. However, you can also customize your app's accent color to reflect your brand.

You can use the accent color palette for color theming in your app. Below is an example of how you can use the accent color palette on a button.

Themes

SenOS's apps can use a light or dark application theme. The theme affects the colors of the app's background, text, icons, and common controls.

Light theme

Dark theme

Sample code

<Grid>
    <Grid.Resources>
        <CornerRadius x:Key="ControlCornerRadius">8</CornerRadius>
    </Grid.Resources>
    <Button Content="Button"/>
</Grid>

🎨