• Discover
  • Developers
  • Aragon Developer Portal
  • Project
  • Network
← Back to home
  • menu

    home-Guidelines

    menu

    Guidelines

    • Layout
    • Color
    • Iconography
    • Typography
    • Illustrations

    Components

    • Overview
    Edit

    Colors

    These principles are the framework upon which we have built our system for how color is used in Aragon.

    • Precision: We defined a small number of primary colors for core interactions (and task-based contexts) and a sufficient number of secondary colors to create more ascetic / decorative illustrations, app icons and graphs.
    • Accesible: We should never use color alone to convey information. Provide sufficient contrast between the elements and meet the minimum accessibility guidelines to better serve color blind or people with low vision.
    • Focus: We should use color purposefully to help focus users’ attention with the task at hand. Colors convey meaning and complement the content hierarchy following a clear rationale.
    • Clarity: Developers and designers should be able to easily refer to particular colors defined in the system. Color names are easily understood, memorable, and spark meaningful conversations between designers and developers (shades changes, contrast corrections, etc.).
    • Consistent: Color should be applied throughout a UI consistently and celebrate the brand it represents.

    Color naming conventions

    There are two common approaches when it comes to name color names: Declarative or natural color names and semantic or abstract color names. We’ve combined both approaches to create a more flexible and theme-able design system.

    Aragon Colors

    Basic light theme
    WhiteWhite#000000
    Baby BlueBaby Blue#F9FAFC

    Grey scale

    Grey
    Grey BasicGrey Basic#DDE4E9
    Grey LightGrey Light#C4CDD5
    GreyGrey#C8D7EA
    Grey MediumGrey Medium#637381
    Grey DarkGrey Dark#212B36

    Primary colors

    Aragon Blue
    Aragon Blue LightAragon Blue Light#95ECFF
    Aragon BlueAragon Blue#08BEE5
    Aragon Blue DarkAragon Blue Dark#0792AF
    Aragon Turquoise
    Aragon Turquoise LightAragon Turquoise Light#9CF7F3
    Aragon TurquoiseAragon Turquoise#3FE8E0
    Aragon Turquoise DarkAragon Turquoise Dark#26B4AD

    Secondary colors

    Purple
    Purple LightPurple Light#95ECFF
    PurplePurple#08BEE5
    Purple DarkPurple Dark#0792AF
    Blue
    Blue LightBlue Light#9CF7F3
    BlueBlue#3FE8E0
    Blue DarkBlue Dark#26B4AD
    Green
    Green LightGreen Light#9CF7F3
    GreenGreen#3FE8E0
    Green DarkGreen Dark#26B4AD
    Yellow
    Yellow LightYellow Light#9CF7F3
    YellowYellow#3FE8E0
    Yellow DarkYellow Dark#26B4AD
    Coral
    Coral LightCoral Light#9CF7F3
    CoralCoral#3FE8E0
    Coral DarkCoral Dark#26B4AD
    Brown
    Brown LightBrown Light#9CF7F3
    BrownBrown#3FE8E0
    Brown DarkBrown Dark#26B4AD
    Pink
    Pink LightPink Light#9CF7F3
    PinkPink#3FE8E0
    Pink DarkPink Dark#26B4AD
    Green Olive
    Green Olive LightGreen Olive Light#E4F577
    Green OliveGreen Olive#BDD237
    Green Olive DarkGreen Olive Dark#87981B

    Functional colors

    Mint Green
    Mint Green LightMint Green Light#87F1CB
    Mint GreenMint Green#2CC68F
    Mint Green DarkMint Green Dark#1B8962
    Orange
    Orange LightOrange Light#FFD48C
    OrangeOrange#2CC68F
    Orange DarkOrange Dark#C7871E
    Red
    Red LightRed Light#FFB1B1
    RedRed#FF6969
    Red DarkRed Dark#CA4141

    Usage

    The Aragon Gradient (AragonBlue + AragonTurquoise) is used to convey the most relevant action in the page as well as statuses in Aragon UI. We use it for the primary buttons and selected and active states in various components.

    Branded

    Primary colors are used to emphasize primary buttons, interactive areas, component states, and progress indicators.

    Interface

    Base theme colors are used to visualize all UI objects: typography, backgrounds, iconography, etc.

    Contextual

    Functional colors are used to convey the current status of the interface: primary objects include contextual buttons, help and feedback objects, transient elements, etc.

    Aesthetics

    Additional colors are used for data visualization, illustrations, and iconography.

    ← LayoutIconography →
    • Colors
    • Color naming conventions
    • Aragon Colors
    • Usage
    • Branded
    • Interface
    • Contextual
    • Aesthetics
    HomeDiscoverProjectNetwork
    DevelopersBug bountyGrantsGovernance
    ContributeBlogWikiAraCon

    Be part of the conversation

    Subscribe to our newsletter